1.新建并初始化项目（npm int -y）,安装webpack，webpack-cli webpack-dev-server
安装eslint，eslint-plugin-vue，配置eslint语法检测文件.eslintrc.js
2.安装vue:
npm i vue --save3.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>
4.src目录下新建两个文件
util.js
module.exports = function say() {
console.log('hello world');
}main.js
var say = require('./util');
say();5.新建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 } };
6.修改package.josn
"scripts": {
"dev": "webpack-dev-server --open --hot",
"build": "webpack --progress --hide-modules"
},7.执行npm run dev可以调试，热更新打开，但是不会生成目标js
发布前执行npm run build,生成目标js发布
8.引入vue
main.js
import Vue from 'vue';
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});9.
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}}
</div>
<script src="build.js"></script>
</body>
/*script也可以放这里*/
</html>10.修改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需要这样写：
11.支持css
安装css-loader vue-style-loader
配置loader，匹配后缀名为css的文件,然后分别用css-loader，vue-style-loader去解析
解析器的执行顺序是从下往上(先css-loader再vue-style-loader)
注意：因为我们这里用vue开发，所以使用vue-style-loader，其他情况使用style-loader
css-loader使得我们可以用模块化的写法引入css,vue-style-loader会将引入的css插入到html页面里的style标签里
module: {
rules: [
{
test: /.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}
]
}我们现在来试下
在src目录下新建style目录，style目录里新建common.css
body {
background: #fed;
}main.js
import './style/common.css';发现css样式有用了
12.引入图片资源
安装图片加载器
npm i file-loader --save-dev
webpack.config.js添加一个loader：
{ test: /.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: 'img/[name].[ext]?[hash]' } }
所有图片文件打包后放在目标文件夹的img目录下，加入图片是a.png，会生成类似：
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文件中，参考：