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 ****語法在瀏覽器中識別