vue 構建和部署

普通的搭建方式（安裝指令）

安裝Node.js

• 檢查node是否已安裝，終端輸入 node-v

會使用命令行（安裝）

• npm install vue-cli - 首先安裝 vue-cli
• vue init webpack - 建立項目
• npm install - 安裝依賴
• npm install axios - 安裝axios請求
• npm install vuex --save - 安裝 vuex
• npm install vue-router - 安裝路由
• npm install karma - 安裝單元測試的環境
• npm install jquery --save-dev - 第三方庫

經常使用命令

• npm run dev - 運行建立的項目
• npm run build - 運行打包命令
• npm run unit - 進行單元測試
• npm run e2e - 進行端測試

項目結構

• build - webpack配置文件
• config/index.js - 主要項目配置
• src/
  • main.js - 應用入口文件
  • App.vue - 主應用程序組件
  • components - ui組件
  • assets - 模塊資源（由webpack處理）
• static - 純靜態資源（直接賦值）
• test
  • unit - 單元測試
  • e2e - e2e測試
• babelrc - babel 配置
• postcssrc.js - postcss配置
• eslintrc.js - eslint 配置
• editorconfig - editor 配置
• index.html - index.html模板
• package.json - 構建腳本和依賴關係（安裝的和應用的命令）

vue常見的前端UI庫

• Mint UI
• 項目主頁：http://mint-ui.github.io/#!/zh-cn
  • demo：http://elemefe.github.io/mint-ui/#/
  • GitHub地址：https://github.com/ElemeFE/mint-ui
  • 中文文檔地址：http://mint-ui.github.io/docs/#!/zh-cn
• VUX（移動端）
• 項目文檔：https://vux.li/#/
• github地址：https://github.com/airyland/vux
• 移動端採用vux的單頁面應用：https://github.com/rumengkai/vue-spa.git