VUE-CLI

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

一、在安装好nodejs环境下
二、全局安装vue-cli
        npm  install  -g vue-cli
     若失败,使用npm cache clean  清理缓存
三、执行
    vue init    webpack-simple my-project
         初始化、 模板、项目名称
四、cd my-project
五、npm install 下载依赖的包
六、启动当前项目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 ****语法在浏览器中识别