1.下載安裝node和npm
node下載地址:https://nodejs.org/zh-cn/download/
node安裝會默認裝好npm
驗證安裝:
node -v
npm -v
2.參考vue官網,初始化一個vue項目
vue官網:https://cn.vuejs.org/v2/guide/installation.html
初始化項目步驟:
2.1 全局安裝 vue-cli
npm install –global vue-cli
2.2 創建一個基於 webpack 模板的新項目
vue init webpack my-project
2.3 安裝依賴，走你
cd my-project
npm install
npm run dev
3.安裝一些常用包
3.1 css包
npm install bootstrap # 響應式編程框架
npm install fontawesome # 圖標字體庫
bootstrap官網:http://v3.bootcss.com/
fontawesome官網:http://fontawesome.dashgame.com/
3.2 ui框架包
ui框架包二選一就行
npm i element-ui -S
或者
npm install iview
element-ui官網:http://element-cn.eleme.io/#/zh-CN/component/installation
iview官網:https://www.iviewui.com/docs/guide/install
3.3 安裝mock
前後端分離，前端通過mock開發，無需等待後端接口開發好了再開發
npm install mockjs
3.4 安裝異步編程框架axios
axios用來與後端接口做ajax交互請求用的
npm install axios
axios-mock-adapter用來配合mock開發,mockjs可監聽api請求是否可用，如不可用則返回mock測試數據
npm install axios-mock-adapter
3.5 vue中支持jsx語法
用elementui就需要安裝下面這些包
npm install babel-helper-vue-jsx-merge-props
npm install babel-plugin-syntax-jsx
npm install babel-plugin-transform-vue-jsx
然後在.babelrc文件中的plugins加上”transform-vue-jsx”
4.項目目錄規劃
用一張圖來展示
5.腳手架項目
github地址:https://github.com/xiaoping1988/ping-vue-admin
此項目是我用vue+elementui開發的一個後臺系統模板，可作爲腳手架工程用
demo地址:https://xiaoping1988.github.io/index.html