工程目录结构：
image.png
在01-filter工程文件下打开命令行，输入命令npm run dev，运行结果如下：
image.png
好了，接下来我们来看看我们做了哪些工作。
- 下载安装nodejs，打开官网https://nodejs.org/en/，在downloads菜单栏下根据你所运行系统情况下载。
- 配置nodejs，找到环境变量-系统环境变量-path，在变量值尾部追加;D:\web_soft\node.js\，当然这是我的nodejs根目录。
- 选择代码编辑环境，我使用的是webstrom，下载地址：https://www.jetbrains.com/webstorm/download/；软件使用期30天，自行破解。
- 使用国内npm下载插件
- 配置npm config set registry https://registry.npm.taobao.org
- 下载插件，附上依赖
"devDependencies": {
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.4",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.30.1",
"less": "^2.7.2",
"less-loader": "^4.0.5",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"vue-loader": "^13.0.4",
"vue-template-compiler": "^2.4.2",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1"
},
"dependencies": {
"axios": "^0.16.2",
"mint-ui": "^2.2.9",
"vue": "^2.4.2",
"vue-resource": "^1.3.4",
"vue-router": "^2.7.0"
}
- 配置本项目01-filter的启动，见首图01-filter下面的package.json
{
"scripts": {
"dev" : "..\\node_modules\\.bin\\webpack-dev-server --inline --hot --open --port 8888",
"build": "webpack"
}
}
5.启动项目
image.png
