工程目錄結構：
image.png
在01-filter工程文件下打開命令行一喘，輸入命令npm run dev，運行結果如下：
image.png
好了陨仅，接下來我們來看看我們做了哪些工作津滞。
- 下載安裝nodejs，打開官網https://nodejs.org/en/灼伤，在downloads菜單欄下根據(jù)你所運行系統(tǒng)情況下載触徐。
- 配置nodejs，找到環(huán)境變量-系統(tǒng)環(huán)境變量-path狐赡，在變量值尾部追加;D:\web_soft\node.js\撞鹉，當然這是我的nodejs根目錄。
- 選擇代碼編輯環(huán)境颖侄，我使用的是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
