Vue项目初始化

webpack安装

npm install -g webpack//全局安装

npm install -g webpack-dev-server //安装调试工具

安装vue-cli

npm install -g vue-cli //全局安装vue-cli

vue init webpack projectName //项目名称

cd projectName //进入项目文件

npm install //初始化安装依赖

安装后会生成如下图的目录:

avatar

初始化依赖完成后,命令运行:npm run dev

ok


webpack.config.js的一些配置

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
var path = require('path');
module.exports = {
entry: ['./src/main.js'], //项目入口文件的路径,可以有多个文件
output: { //定义webpack输出的文件,这里设置了文件输出在dist文件夹下面的build.js
path: './dist',
publicPath:'./dist/',
filename: 'build.js'
},
//配置自动刷新,如果打开会使浏览器刷新而不是热替换
/*devServer: {
historyApiFallback: true,
hot: false,
inline: true,
grogress: true
},*/
module: {
loaders: [
//转化ES6语法
{
test: /\.js$/, //这里是匹配文件的正则
loader: 'babel', //这里是指定调用loader去处理对应文件类型
exclude: /node_modules/
},
//解析.vue文件
{
test:/\.vue$/,
loader:'vue'
},
//图片转化,小于8K自动转化为base64的编码
{
test: /\.(png|jpg|gif)$/,
loader:'url-loader?limit=8192'
}
]
},
vue:{
loaders:{
js:'babel' //loader来这里吧。
}
},
resolve: {
// require时省略的扩展名,如:require('app') 不需要app.js
extensions: ['', '.js', '.vue'],
// 配置简写,路径可以省略文件类型
alias: {
filter: path.join(__dirname, './src/filters'),
components: path.join(__dirname, './src/components')
}
}
}