閱讀目錄
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 運行命令。