閱讀目錄
VUE2 第六天學習--- vue單檔案專案構建
VUE單檔案元件
在Vue專案中，然後使用 new Vue({el: '#container' }), 在每個頁面內指定一個容器元素。使用Vue.component來定義全域性元件，這種方式在小規模專案中還可以，但是在專案中有如下缺點：
1. 全域性定義：強制要求每個component中的命名不能重複。
2. 字串模板：缺乏語法高亮，在HTML有多行的時候，需要用到醜陋的 \
3. 不支援css，意味著HTML和javascript元件化時，css明顯被遺漏。
4. 沒有構建步驟，限制只能使用HTML和ES5 Javascript，而不能使用前處理器。
.vue 單檔案元件可以解決上面的所有問題，並且還可以使用 webpack等構建工具。
.vue檔案是一個自定義的檔案型別，用類HTML語法描述一個Vue元件。每個 .vue檔案包含三種型別的頂級語言塊 <template>,<script>,和 <style>,如下程式碼：
<template>
<div class="example">{{ msg }}</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script>
<style>
.example {
color: red;
}
</style>
vue-loader 會解析檔案，提取每個語言塊，通過loader處理，最後將他們組成一個CommonJS模組。module.exports出一個Vue.js元件物件。
vue-loader 支援使用非預設語言，比如css前處理器，預編譯的HTML模板語言，通過設定語言塊的lang屬性。比如如下程式碼：
<style lang='stylus'> /* stylus程式碼 */ </style>
語言塊
<template>
預設語言： html
每個.vue檔案最多包含一個 <template>塊
內容將被提取為字串，將編譯並用作Vue元件的template選項。
<script>
預設語言： js(在檢測到 babel-loader 或 buble-loader 配置時自動支援ES2015)
每個.vue檔案最多包含一個<script>塊。
該指令碼在類CommonJS環境中執行，也可以通過require()其他依賴，在ES2015支援下，可以使用import 和 export 語法。
指令碼必須匯出 Vue.js 元件物件。也可以匯出由 Vue.extend()建立的擴充套件物件。但是普通物件將會更好。
<style>
預設語言：css
一個 .vue檔案可以包含多個 <style> 標籤。
預設情況下，將會使用 style-loader 提取內容，並通過 <style>標籤動態加入文件的<head>中，也可以配置將所有style提取到單個的css檔案中。
專案構建：
一： 安裝專案依賴
npm install --save vue 預設安裝最新版vue
npm install --save-dev webpack webpack-dev-server 安裝webpack，webpack-dev-server
提示： npm install --save 和 npm install --save-dev的區別，--save 會把依賴包名稱新增到 package.json 檔案 dependencies 鍵下，--save-dev 則新增到 package.json 檔案 devDependencies 鍵下，--save-dev 是你開發時候依賴的東西，--save 是你釋出之後還依賴的東西。*
npm install --save-dev babel-core babel-loader babel-preset-es2015 安裝babel，babel的作用是將es6的語法編譯成瀏覽器認識的語法es5
npm install --save-dev vue-loader vue-template-compiler 用來解析vue的元件，.vue字尾的檔案
npm install --save-dev css-loader style-loader stylus-loader 用來解析css
提示：css-loader 和 style-loader，二者處理的任務不同，css-loader使你能夠使用類似@import 和 url(…)的方法實現 require()的功能,style-loader將所有的計算後的樣式加入頁面中，二者組合在一起使你能夠把樣式表嵌入webpack打包後的JS檔案中。
npm install --save-dev url-loader file-loader 用於打包檔案和圖片
npm install --save-dev vue-router 安裝路由
二：專案目錄結構如下：
demo # 工程名
| |--- dist # 打包後生成的目錄檔案
| |--- node_modules # 所有的依賴包
| |--- src # 專案的檔案包
| | |--- assets # styles(樣式)，img(圖片)的目錄檔案
| | |--- components # 一些元件的目錄，比如 header.vue 等
| | |--- views # 存放單個頁面所有vue檔案
| | |--- App.vue # 專案的入口檔案
| | |--- index.js # 例項化的js入口檔案
| | |--- routes.js # 路由配置檔案
| |---
| |--- .babelrc # 支援es6
| |--- .gitignore
| |--- README.md
| |--- index.html # 首頁入口檔案
| |--- package.json
| |--- webpack.config.js # 配置檔案
三：專案執行
執行 webpack 打包；
執行 webpack-dev-server 啟動伺服器；
四：轉換命令
把 webpack 和 webpack-dev-server 命令轉成 npm 命令；需要安裝 cross-env 命令如下：
npm install cross-env --save-dev
然後在package.json 檔案新增
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "webpack"
現在可以使用 npm run dev 執行命令。