0、安装淘宝镜像
$ npm install -g cnpm –registry=https://registry.npm.taobao.org
1、 npm初始化
$ npm init
2、 webpack配置
主要需要配置babel,把es6预处理为es5,配置文件如下:
const path = require('path');
module.exports = {
entry: './app/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: 'public'
},
module: {
rules: [{
test: /\.js$/,
exclude: [
path.resolve(__dirname,"node_modules")
],
loader: "babel-loader",
options: {
presets: ["es2015"]
}
}]
}
}
3、 安装webpack
$ cnpm install –save-dev webpack
4、 安装webpack-dev-server
$ cnpm install –save-dev webpack-dev-server
5、 修改package.json文件配置,开启端口监听
"scripts": {
"server": "webpack-dev-server --content-base ./ --port 8080"
},
6、安装babel依赖
$ cnpm install –save-dev babel-core
$ cnpm install –save-dev babel-loader
$ cnpm install –save-dev babel-preset-es2015
7、 安装指定版本vue
$ cnpm install –save vue@1
至此,所有环境配置完成
文档结构图如下:
└ root
│ └ app
│ │ └ main.js
│ └ node_modules
│ │ └ *.js
│ └ index.html
│ └ package.json
│ └ webpack.config.js
8、 运行项目
$ npm run server
恭喜你,通过 CLI 配置最基本的 vue 环境你已经完成了!