三、vue腳手架工具vue-cli的使用

1.vue-cli構建

　　vue-cli工具構建：https://blog.csdn.net/u013182762/article/details/53021374

　　npm的鏡像替換成淘寶

2.項目運行

在項目目錄中，運行命令 npm run dev ，也可以運行npm run start（在package.json文件中可以看到），項目運行成功后，瀏覽器會自動打開localhost:8080（如果瀏覽器沒有自動打開，可以手動輸入）

3.項目分析

目錄結構：http://www.runoob.com/vue2/vue-directory-structure.html

我們只關注src下的

 main.js是整個項目的入口文件，創建了一個vue實例

　　掛載點：#app，

　　注冊了一個局部組件：App，采用es6的語法import app from './App'，引入了App組件在當前路徑下App.vue

　　　　components: { App }說明：components: { App :  App }，如果建和值相同，可以簡寫components: { App }

　　模板是App組件的內容<App/>

　　　　template: '<div><App/></div>':外層的div可以省略，顯示的內容為App組件的template

在index.html上定義了app掛載點

App.vue：單文件組件包含三部分，template、script、style

 注意：

　　1.在template下只能有一個最外層的包裹標簽，如果寫多個編譯會報錯，可以把多個標簽元素包裹在一個根標簽下面；

　　2.export也是es6的語法，在vue實例中以前data是一個對象，而在vue-cli中data是一個函數，而且可以簡寫data : function (){}為data (){}，其他也可以簡寫

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App , test it .'
    }
  },
  components:{
  },
  methods:{
  }
}

　　3.組件的調用可以通過import引入，並且在export中通過components進行聲明

import TodoItem from './components/TodoItem.vue';

components:{
            'todo-item': TodoItem
        },

　　4.在style上可以添加scoped來聲明此樣式為局部樣式，只在這個組件的范圍有效，不會影響全局樣式，建議單頁面開發一般加上scoped

<style scoped>