webpack入坑之旅（五）加載vue單文件組件
這是一系列文章，此係列全部的練習都存在了個人github倉庫中vue-webpack，在本人有了新的理解與認識以後,會對文章有不定時的更正與更新。下面是目前完成的列表：css
- webpack入坑之旅（一）不是開始的開始
- webpack入坑之旅（二）loader入門
- webpack入坑之旅（三）webpack.config入門
- webpack入坑之旅（四）揚帆起航
- webpack入坑之旅（五）加載vue單文件組件
- webpack入坑之旅（六）配合vue-router實現SPA
須要什麼？
在通過前面的四個練習，相信已經對於webapck有了必定的瞭解，如今咱們就來一個綜合案例，進一步加深對於webpack的理解。html
首先咱們應該思考要解析.vue類型的文件，須要什麼樣的東西？應該按照什麼樣的步驟來？咱們應該怎麼去搭建這個項目？vue
開始
第一步：初始化項目目錄
咱們須要建立以下目錄及文件夾，最終目錄結構以下：node
|
1
2
3
4
5
6
7
8
9
10
11
|
- dist
//文件生成目錄
--
//自動生成
- node_module
//自動安裝
-- ...
- src
//文件入口
-- components
//組件存放
-- app.vue
//主.vue
-- main.js
//主.js
- index.html
//主.html
- package.json
//npm 配置
- webpack.cofig.js
// webpack配置
|
第二步：安裝項目依賴
若是你上面沒有建立package.json文件的話，能夠直接使用npm init來初始化咱們的package.json文件的配置。react
想要去編譯其餘的文件好比react，coffce等等，就必需要加載不少對應的loader。要想加載一個.vue文件。固然也是一樣的道理。
建議用npm install xxx-loader --save-dev這樣的命令一條一條的敲。在命令行中，會有提示，能夠幫助理解webpack的中的依賴管理關係。個人配置清單以下：
在實際項目中，json文件中不能出現註釋，在這裏爲了方便你們瞭解裏面設置項的含義，就直接使用註釋的方式加載後面了。jquery
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
{
"name": "05-five-vue", //項目名稱
"version": "1.0.0", //版本
"description": "vue+webapck", //描述
"main": "index.js", //主文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --inline"
},
//scripts指定了運行腳本命令的npm命令行縮寫，好比這是的start指定了運行npm run start時，所要執行的命令。
"dependencies": { //項目依賴
"vue": "^1.0.18"
},
"devDependencies": { //各類各樣的loader，用來解析想相應的文件格式。要解析vue而且完成相應的功能，這些基本都是必須的。
"autoprefixer-loader": "^2.0.0",
"babel": "^6.3.13",
"babel-core": "^6.3.21",
"babel-loader": "^6.2.0",
"babel-plugin-transform-runtime": "^6.3.13",
"babel-preset-es2015": "^6.3.13",
"babel-runtime": "^5.8.34",
"css-loader": "^0.16.0",
"file-loader": "^0.8.5",
"html-loader": "^0.3.0",
"node-sass": "^3.4.2",
"sass-loader": "^3.2.0",
"style-loader": "^0.12.3",
"url-loader": "^0.5.6",
"vue-html-loader": "^1.2.0",
"vue-loader": "^7.2.0",
"webpack": "^1.12.0",
"webpack-dev-server": "^1.14.0"
},
"author": "guowenfh", //做者
"license": "MIT", //開源協議
"keywords": [ //關鍵字
"vue",
"webpack"
]
}
|
若是你想省事的話，直接複製上面的devDependencies,dependencies字段，而且填寫到你的package.json文件中。而後運行npm install就會自動安裝全部的模塊以及依賴。webpack
第三步：配置webpack
文件已經設置好了，接下來就到了咱們關鍵的一步，配置webpack.config.js,清單以下：git
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
var path = require('path');
// NodeJS中的Path對象，用於處理目錄的對象，提升開發效率。
// 模塊導入
module.exports = {
// 入口文件地址，不須要寫完，會自動查找
entry:
'./src/main',
// 輸出
output: {
path: path.join(__dirname,
'./dist'),
// 文件地址，使用絕對路徑形式
filename:
'[name].js',
//[name]這裏是webpack提供的根據路口文件自動生成的名字
publicPath:
'/dist/'
// 公共文件生成的地址
},
// 服務器配置相關，自動刷新!
devServer: {
historyApiFallback:
true,
hot:
false,
inline:
true,
grogress:
true,
},
// 加載器
module: {
// 加載器
loaders: [
// 解析.vue文件
{ test:
/\.vue$/, loader: 'vue' },
// 轉化ES6的語法
{ test:
/\.js$/, loader: 'babel', exclude: /node_modules/ },
// 編譯css並自動添加css前綴
{ test:
/\.css$/, loader: 'style!css!autoprefixer'},
//.scss 文件想要編譯，scss就須要這些東西！來編譯處理
//install css-loader style-loader sass-loader node-sass --save-dev
{ test:
/\.scss$/, loader: 'style!css!sass?sourceMap'},
// 圖片轉化，小於8K自動轉化爲base64的編碼
{ test:
/\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},
//html模板編譯？
{ test:
/\.(html|tpl)$/, loader: 'html-loader' },
]
},
// .vue的配置。須要單獨出來配置，其實沒什麼必要--由於我刪了也沒保錯，不過這裏就留這把，由於官網文檔裏是能夠有單獨的配置的。
vue: {
loaders: {
css:
'style!css!autoprefixer',
}
},
// 轉化成es5的語法
babel: {
presets: [
'es2015'],
plugins: [
'transform-runtime']
},
resolve: {
// require時省略的擴展名，如：require('module') 不須要module.js
extensions: [
'', '.js', '.vue'],
// 別名，能夠直接使用別名來表明設定的路徑以及其餘
alias: {
filter: path.join(__dirname,
'./src/filters'),
components: path.join(__dirname,
'./src/components')
}
},
// 開啓source-map，webpack有多種source-map，在官網文檔能夠查到
devtool:
'eval-source-map'
};
|
請詳細查看這裏面的設置，我這裏都是很簡單的配置，在你的項目中，還能夠更進一步的對於入口文件和輸出文件進行更加深刻的定製。（注意：好像node-sass的包有問題，有不少人解析不了sass）es6
而且在這裏生成的css文件還會插到js中，有時咱們須要更進一步的把它獨立出來，而後在html中引入這時就會用到webpack的插件，在這裏先不說（由於我暫時沒用到，沒有試驗過，好像也不麻煩，能夠的話下篇再試試）github
第四步：編寫代碼
接下來就是咱們要展現的文件的編寫了，我直接把代碼貼上來了。
index.html：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack vue</title>
<style>
#app {
margin: 20px auto;
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="dist/main.js"></script>
</body>
</html>
|
這裏是main.js的內容：
|
1
2
3
4
5
6
7
8
9
|
//es6語法：
import Vue from "../node_modules/vue/dist/vue.min.js";//其實不用寫完，會自動查找。能夠直接寫import Vue from "vue";
//外部引入別的庫均可以用這樣的方式，好比jquery等。。
//引入咱們編寫的測試用vue文件。
import app from './components/app';
Vue.config.debug =
true;//開啓錯誤提示
new Vue(app);
|
這裏是app.vue：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<script>
//es6
export default {
el:
"#app",
//data:function(){}，下面是es6寫法
data () {
return {
name:
"guowenfh",
age:
"2q1"
}
}
}
</script>
<template>
<div>
<h1>姓名：{{name}}</h1>
<h2>{{age}}</h2>
</div>
</template>
<style lang="sass">
/*必定要加lang否則沒法編譯*/
/*測試一下對sass的編譯*/
$qwe:#098;
body{
h1{
color: red;
transform: translate(10%, 10%);/*測試自動添加前綴*/
}
h1:hover{
height:100px;
}
h2{
}
}
</style>
|
第五步：修改自動刷新設置
下面再單獨的再談一下關於自動刷新的實現，首先須要說明，在上一篇博客中的自動刷新實現，是有問題的。只能改變css樣式，使顏色進行變化。對於html裏面的內容改變時，瀏覽器並不會自動刷新。
注意點一：
首先咱們看到package.json中scripts字段中的"start": "webpack-dev-server --inline"。這裏若是按照網上的方法在後面再添加上--hot的話，只會對於app.vue中的<style>標籤內的css起效果。
注意點二：
由於咱們沒有加--hot，因此在webpack.cofig.js中須要對於devServer進行一些配置，以下：（主要是是hot設置爲了false）。
|
1
2
3
4
5
6
|
devServer: {
historyApiFallback:
true,
hot:
false,
inline:
true,
grogress:
true,
}
|
這樣設置了以後按下保存至關於按下了F5瀏覽器整個刷新。而不是局部刷新。（若是你實現了局部刷新，而且沒有其餘問題，那請教教我^_^）
注意點三：
注意package.json的loader安裝中的"vue-hot-reload-api": "^1.2.2"。它有多是致使你不能自動刷新的兇手(我如今都沒搞明白到底該安裝，仍是取消)
結束
步驟都走完了，由於在上面的package.json中已經進行了scripts項的配置。運行npm start，打開localhost:8080
能夠看到設置的背景色已經出來了,去改變一下背景顏色？data？template？
看看瀏覽器會不會自動刷新？
若是你按照個人步驟，而且，npm包安裝沒有錯誤的話，應該就能成功了。
不行的話，請再仔細對照去看看有什麼地方沒有編寫對吧！
- 1. webpack入坑之旅（五）加載vue單文件組件
- 2. Vue 單文件組件||Vue 單文件組件的基本用法||webpack 中配置 vue 組件的加載器|| 在 webpack 項目中使用 vue
- 3. webpack打包vue單文件組件
- 4. vue單文件組件2（webpack打包）
- 5. Vue之單文件組件
- 6. vue按需加載組件-webpack require.ensure
- 7. vue+webpack實現異步組件加載
- 8. webpack + vue 異步加載組件
- 9. vue按需加載組件-webpack require.ensure(轉)
- 10. webpack的單vue組件(.vue)加載sass配置
- 更多相關文章...
- • ASP AdRotator 組件 - ASP 教程
- • R XML 文件 - R 語言教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • SpringBoot中properties文件不能自動提示解決方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. No provider available from registry 127.0.0.1:2181 for service com.ddbuy.ser 解決方法
- 2. Qt5.7以上調用虛擬鍵盤(支持中文)，以及源碼修改(可拖動，水平縮放)
- 3. 軟件測試面試- 購物車功能測試用例設計
- 4. ElasticSearch（概念篇）：你知道的, 爲了搜索…
- 5. redux理解
- 6. gitee創建第一個項目
- 7. 支持向量機之硬間隔（一步步推導，通俗易懂）
- 8. Mysql 異步複製延遲的原因及解決方案
- 9. 如何在運行SEPM配置嚮導時將不可認的複雜數據庫密碼改爲簡單密碼
- 10. windows系統下tftp服務器使用
- 1. webpack入坑之旅（五）加載vue單文件組件
- 2. Vue 單文件組件||Vue 單文件組件的基本用法||webpack 中配置 vue 組件的加載器|| 在 webpack 項目中使用 vue
- 3. webpack打包vue單文件組件
- 4. vue單文件組件2（webpack打包）
- 5. Vue之單文件組件
- 6. vue按需加載組件-webpack require.ensure
- 7. vue+webpack實現異步組件加載
- 8. webpack + vue 異步加載組件
- 9. vue按需加載組件-webpack require.ensure(轉)
- 10. webpack的單vue組件(.vue)加載sass配置