VUE-CLI

Vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。

1、在安装好nodejs环境下
2、全局安装vue-cli
        npm  install  -g vue-cli
     若失败,使用npm cache clean  清理缓存
3、执行
    vue init    webpack-simple my-project
         初始化、 模板、项目名称
4、cd my-project
5、npm install 下载依赖的包
6、启动当前项目npm run dev

 

 

组件的使用

比如有这之前的一个自定义的组件：

Vue.component('app-header', {
    template: '#head-template',
    data: {
        title: '我是头部'
    }
})

如果是这样的去写我们的组件的话，太复杂了，后期还不好去维护。可能大家现在还感觉不出来，如果写更多功能或者用到组件时会相互嵌套，那就更加的麻烦了。还好官方推出的vue-cli工具，基本不用任何的额外的代码，很快的就可以构建出一套完整的环境。

<template>　　　　　　　　//要写的组件结构
  <div class="header">
    <h1> {{ title }} </h1>
  </div>
</template>

<script>　　　　　　　　//要写的业务逻辑
  export defualt {
    data: function() {
      return {
        title: '我是頭部'
      }
    }
  }
</script>

<style>　　　　　　　　　　//组建的样式
  .header {
    color: red;
  }
</style>

 

另外上面的代码我们发现有export default 语法，其实这个东西跟python模块化有些类似，在es6module 中，webpack这个工具通过babel-loader 这个loader将我们的es6  module语法进行解析，从而让我们的export   default和import ****语法在浏览器中识别