vue+webpack專案環境搭建說明
1、安裝node.js環境
根據需求下載32位或64位安裝包-node.js官網去下
https://nodejs.org/en/
檢視是否安裝成功
cmd -》
node -v 檢視node
npm -v 檢視npm
顯示node和npm的版本號則安裝成功
2、安裝vue\vue-cli
#全域性安裝 vue-cli腳手架
npm intall --global vue-cli
安裝成功結果如下
檢視vue是否安裝完成:vue --version
3、建立webpack專案-cmd下輸入
#建立一個基於webpack模板的新專案
vue init webpack my-project (my-project是建立的專案名)
安裝過程中會有一些配置資訊需要選擇
Project name 輸入專案名稱
Project description 描述
Install vue-router? 可以輸入Y確定也可以後期再安裝,隨意選擇
Use ESLint to lint your code? 這是做程式碼檢測的,用來統一風格,現在我們的專案裡都有用它,根據需求確定要不要用它,Y/N
除了以上幾個其它有Y/N提示的都輸入N沒有的直接回車
安裝成功如下圖:
#安裝依賴
cd my-project
npm install
#執行專案
npm run dev
執行成功如下圖:
此時可開啟瀏覽器輸入http://localhost:8080
成功即可看到如下頁面
以上則成功建立一個vue+webpack的專案
前端開發工具推薦:webstorm或VS code
以下是專案裡可能用到的外掛:
1、安裝路由(如果建立時選擇了Y則不用再次安裝)
npm install vue-router --save-dev
2、安裝axios跨域請求(代替ajax進行資料請求)
npm install axios
3、vuex(狀態管理---用來處理共享資料)
npm install vuex --save
4、babel- polyfill(es6語法回退,用來相容IE的)
npm install --save-dev babel-polyfill
5、element(目前專案採用的前端框架)
npm i element-ui -S
6、echarts(做圖表,折線圖柱狀圖餅圖)
npm install echarts --save
7、clean-webpack-plugin(清除dist資料夾中重複的檔案,打包時使用)
npm install --save-dev clean-webpack-plugin
8、專案打包
npm run build