- 新建并初始化項目（npm int -y）,安裝webpack，webpack-cli webpack-dev-server
安裝eslint，eslint-plugin-vue，配置eslint語法檢測文件.eslintrc.js
2.安裝vue:
npm i vue --save
3.dist下建立index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="build.js"></script>
</head>
<body>
</body>
</html>
- src目錄下新建兩個文件
util.js
module.exports = function say() {
console.log('hello world');
}
main.js
var say = require('./util');
say();
- 新建webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/main.js', // 項目的入口文件，webpack會從main.js開始，把所有依賴的js都加載打包
output: {
filename: 'build.js' // 打包后的文件名
},
devServer: {
contentBase:path.resolve(__dirname,"dist"),
historyApiFallback: true,
overlay: true
}
};
- 修改package.josn
"scripts": {
"dev": "webpack-dev-server --open --hot",
"build": "webpack --progress --hide-modules"
},
執(zhí)行npm run dev可以調試，熱更新打開，但是不會生成目標js
發(fā)布前執(zhí)行npm run build,生成目標js發(fā)布引入vue
main.js
import Vue from 'vue';
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
index.html
注意script的位置，一定要在div#app后面，否則打包時會提示找不到id為app的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="build.js"></script>
</body>
/*script也可以放這里*/
</html>
- 修改webpack.config.js文件
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/main.js', // 項目的入口文件，webpack會從main.js開始，把所有依賴的js都加載打包
output: {
filename: 'build.js' // 打包后的文件名
},
devServer: {
contentBase:path.resolve(__dirname,"dist"),
historyApiFallback: true,
overlay: true
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
};
'vue$': 'vue/dist/vue.esm.js'這一句給vue起一個別名，否則引入vue需要這樣寫：
import Vue from 'vue/dist/vue.esm.js';
- 支持css
安裝css-loader vue-style-loader
配置loader，匹配后綴名為css的文件,然后分別用css-loader，vue-style-loader去解析
解析器的執(zhí)行順序是從下往上(先css-loader再vue-style-loader)
注意：因為我們這里用vue開發(fā)，所以使用vue-style-loader，其他情況使用style-loader
css-loader使得我們可以用模塊化的寫法引入css,vue-style-loader會將引入的css插入到html頁面里的style標簽里
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}
]
}
我們現(xiàn)在來試下
在src目錄下新建style目錄，style目錄里新建common.css
body {
background: #fed;
}
main.js
import './style/common.css';
發(fā)現(xiàn)css樣式有用了
- 引入圖片資源
安裝圖片加載器
npm i file-loader --save-dev
webpack.config.js添加一個loader：
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: 'img/[name].[ext]?[hash]'
}
}
如果圖片沒法顯示，嘗試在options下加入esModule: false,以支持commonjs的require
所有圖片文件打包后放在目標文件夾的img目錄下，加入圖片是a.png，會生成類似：
a.png?a548e59f576077ea5f6a1ab3b9df1cd7"
方便更新時取消緩存
main.js
import Vue from 'vue';
import "./style/common.css"
Vue.component('my-component', {
template: '<img :src="url" />',
data() {
return {
url: require('./img/icon_bindap.png')
}
}
})
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{message}}
<my-component/>
</div>
</body>
<script src="build.js"></script>
</html>
上面例子中是把vue放入到js中，使用 Vue.component 來定義全局組件
在實際項目里，更推薦使用單文件組件，把組件放到一個單獨的.vue文件中
