9.vue-cli
9.1.介紹和安裝
在開發中，需要打包的東西不止是js、css、html。還有更多的東西要處理，這些插件和加載器如果我們一一去添加就會比較麻煩。
幸好，vue官方提供了一個快速搭建vue項目的腳手架：vue-cli
使用它能快速的構建一個web工程模板。
官網：https://github.com/vuejs/vue-cli
安裝命令：npm install -g vue-cli
9.2.快速上手
我們新建一個module：
切換到該目錄：
用vue-cli命令，快速搭建一個webpack的項目：vue init webpack
前面幾項都走默認或yes
下面這些我們選no
最后，再選yes，使用 npm安裝
開始初始化項目，並安裝依賴，可能需要
安裝成功！
可以使用npm run dev命令啟動。
9.3.項目結構
安裝好的項目結構：
入口文件：main.js
9.4.單文件組件
需要注意的是，我們看到有一類后綴名為.vue的文件，我們稱為單文件組件
每一個.vue文件，就是一個獨立的vue組件。類似於我們剛才寫的login.js和register.js
只不過，我們在js中編寫 html模板和樣式非常的不友好，而且沒有語法提示和高亮。
而單文件組件中包含三部分內容：
- template：模板，支持html語法高亮和提示
- script：js腳本，這里編寫的就是vue的組件對象，還可以有data(){}等
- style：樣式，支持CSS語法高亮和提示
每個組件都有自己獨立的html、JS、CSS，互不干擾，真正做到可獨立復用。
9.5.運行
看看生成的package.json：
- 可以看到這引入了非常多的依賴，絕大多數都是開發期依賴，比如大量的加載器。
- 運行時依賴只有vue和vue-router
- 腳本有三個：
- dev：使用了webpack-dev-server命令，開發時熱部署使用
- start：使用了npm run dev命令，與上面的dev效果完全一樣，當腳本名為“start”時，可以省略“run”。
- build：等同於webpack的打包功能，會打包到dist目錄下。
我們執行npm run dev 或者 npm start 都可以啟動項目：
頁面：
