VUE-6-3 單檔案元件
1..vue檔案
.vue檔案，稱為單檔案元件，是Vue.js自定義的一種檔案格式，一個.vue檔案就是一個單獨的元件，在檔案內封裝了元件相關的程式碼：html、css、js .vue檔案由三部分組成：<template>、<style>、<script> <template> html </template> <style> css </style> <script> js </script>
2.vue-loader
瀏覽器本身並不認為.vue檔案，所以必須對.vue檔案進行載入解析，此時需要vue-loader
類似的loader還有許多，如：html-loader、css-loader、style-loader、babel-loader等
需要注意的是vue-loader是基於webpack的 3.vue單檔案元件例項
3.1建立專案
專案目錄如下
- node_module是webpack下載的多個庫；
- .babelrc:babel配置檔案，ES6如何轉換為ES5;
- App.vue是vue元件;
- index.html:基本展示內容
- main.js入口檔案
- package.json工程檔案，npm init --yes自動生成，並且之後自動新增依賴關係，下載了新的版本檔案，也會同步自動更新；
- webpack.config.js webpack配置檔案
3.2編寫App.vue
先編寫元件App.vue(需要<template> <style> <script>這幾個標籤)；
<template> <div id="itany"> <h1>welcome to itany</h1> </div> </template> <script> console.log(111); </script> <style > body{ background-color: #5bc0de; } </style>
3.3.安裝相關的模組
瀏覽器不識別vue檔案，所以需要下載vue-loader,vue-loader是基於webpack的；
下載下面這些模組的時候，如果是自己獨立開發專案，經常會碰到模組版本不相容的問題，此時就需要根據命令列的提示錯誤進行除錯；此處因為是學習，所以版本已知，安裝固定版本， cnpm install -D [email protected],如果事先已經安裝好，不用解除安裝，直接下載新的就會覆蓋掉，並且package.json裡面也會進行更新。
關於-S -D：
npm install module_name -S 即 npm install module_name --save 寫入dependencies
npm install module_name -D 即 npm install module_name --save-dev 寫入devDependencies
npm install module_name -g 全域性安裝(命令列使用)
npm install module_name 本地安裝(將安裝包放在 ./node_modules 下)
dependencies與devDependencies有什麼區別呢？
devDependencies 裡面的外掛只用於開發環境，不用於生產環境
dependencies 是需要釋出到生產環境的
cnpm install vue -S
cnpm install webpack -D
cnpm install webpack-dev-server -D
cnpm install vue-loader -D
cnpm install vue-html-loader -D
cnpm install css-loader -D
cnpm install vue-style-loader -D
cnpm install file-loader -D
cnpm install babel-loader -D
cnpm install babel-core -D
cnpm install babel-preset-env -D //根據配置的執行環境自動啟用需要的babel外掛
cnpm install vue-template-compiler -D //預編譯模板
合併：cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template-compiler3.4編寫main.js
一個JS檔案就是一個模組；
/*
* 使用ES6語法引入模組
*
* */
/*會自動從node_modules下載入模組*/
import Vue from 'vue'
/*同級目錄需要加./*/
import App from './App.vue'
new Vue({
el:'#app',
//註冊元件：以前的方式
// components:{
// 'my-app':App
// }
//新的方式，是一個render函式來渲染元件，等價於上一種方式,h是一個函式
render:function (h) {
return h(App);
}
});3.5編寫webpack.config.js
module.exports={
// 配置入口檔案
entry:'./main.js',
//出口檔案，叫什麼無所謂，一般都是叫build.js，以後用的都是build.js檔案，需要手動在index.html引入
output:{
path:__dirname,//專案根路徑
filename:'build.js'
},
// 配置模組載入器
module: {
rules:[
{
//凡是匹配.vue的檔案，都是用vue-loader
test:/\.vue$/,
//2.0必須寫全
loader:'vue-loader'
},
{
// 凡是匹配js結尾檔案，都用babel-loader載入，除了node_module目錄
test:/\.js$/,
loader:'babel-loader',
//排除node_modules裡面的JS
exclude:/node_modules/
}
]
}
}3.6編寫.babelrc檔案
/*只需要寫外掛，安裝的模組裡面，只有babel-preset-env是外掛，只寫env*/
{
"presets":[
["env",{"module":false}]
]
}3.7編寫package.json檔案
都是自己生成的
{
"name": "webpack-demo1",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev": "webpack-dev-server --open --hot --port 8800"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.3.4"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.5.2",
"css-loader": "^0.28.4",
"file-loader": "^0.11.2",
"vue-html-loader": "^1.2.4",
"vue-loader": "^13.0.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.3.4",
"webpack": "^3.0.0",
"webpack-cli": "^3.2.0",
"webpack-dev-server": "^2.5.0"
}
}
4.8執行測試
測試之前，要先修改package.json裡面的指令碼
scripts指令碼 --open:啟動之後開啟瀏覽器，--hot 熱載入，如果頁面改了，瀏覽器那邊自動重新整理，--port 指定埠號，預設8080
"scripts": {
"dev": "webpack-dev-server --open --hot --port 8800"
},然後使用 npm run dev
啟動的時候如果提示沒有指令碼的原因，可能是自己的程式碼沒有儲存；其他基本上全部屬於版本相容問題；
然後就可以在瀏覽器中看到自己編寫的<template><style>控制檯中的<script>
每種檔案的細節理解，還需要深入學習才可。