新項目基于vue技術路線的開發
運用到的工具、框架或庫
- VueJS 2.x
- Vue-router
- axios
- Vuex
- Element UI 2.x(PC端組件庫)
- VUX(移動端組件庫)
- Babel
- Webpack 3
- Npm
開發流程
使用腳手架工具創建前端工程、后端工程，配置數據庫，導入示例數據。
根據項目實際需求，配置路由和菜單，準備各路由所對應的vue文件，vue文件內容為空白，待分配給項目成員實現。
在mock目錄下準備mock數據，設計好數據結構（控件需要的數據結構）和字段名（最好同數據庫中表結構字段名）
實現vue文件的界面部分，使用mockjs來攔截ajax請求，返回mock數據。
后端實現RESTful接口，并維護接口文檔（接口文檔推薦使用markdown格式）
注意事項
JS風格使用ECMAScript 6編碼風格，建議使用VSCode作為js/vue的編輯器，并安裝以下插件EditorConfig for VSCode , Prettier-Standard - JavaScript formatter , JavaScript Standard Style , stylefmt , Vetur，注意不要再安裝其他JS格式化工具以免沖突。
并且vscode的配置里要加下面的命令，防止格式化時自動加分號。
"prettier.singleQuote": true,
"prettier.semi": false,在開發界面時使用ElementUI提供的柵格系統（24列），對界面進行響應式布局，以便移動端訪問。
不要使用ElementUI提供的圖標組件，使用Font Awesome 圖標。
后端接口符合RESTful規范
注意后端返回前端的數據，字段名同數據庫中的字段名，并轉為小寫字母開頭的駝峰式命名，構造mock數據時也要注意這一點。
工程編譯時，source目錄下的lib、assets目錄下的文件會被直接復制到dist目錄下。
不要提交node_modules和dist目錄到svn工程里
寫接口的同事可維護markdown格式接口文檔，并利用gitlab wiki功能編寫接口文檔
為了便于維護，對話框、頁簽等如果里面的內容比較多（超過30行），要獨立成vue組件，盡量不要讓一個vue組件的代碼太多（超過500行超過20K）,盡量把vue文件里的js移到單獨的文件，便于使用編輯器的js校驗/js格式化功能。vue文件中css代碼行數較多時（超過50行），亦可將css移到單獨的css文件。模板部分要保持在vue文件里，以使用Vetur插件的模板語法校驗功能。
從后臺請求的數據有分頁的情況下，Request參數的約定：pageIndex 第幾頁（從第1頁開始）；pageSize 每頁返回多少行。Response中返回數據除了有列表外，還要有total供分頁條顯示總記錄數。特定的api也可以支持 startIndex 從第幾行記錄開始,count 返回多少行記錄。
新項目基于vue技術路線的實施
多環境打包部署配置-測試環境
一般使用vue-cli腳手架創建的vue工程中都會有一個打包的配置目錄build，其中對開發環境編譯運行和生產環境打包做了相關配置，如果需要自定義測試環境的打包，我們把build.js復制一份，改名為bulid.test.js作為測試環境打包的總入口，同時復制一份webpack.prod.conf.js---->webpack.test.conf.js，修改成測試環境的相應配置即可。最后在config/index.js中增加如下配置:
buildtest: {
index:path.resolve(__dirname, '../dist/index.html'),
assetsRoot:path.resolve(__dirname, '../dist'),
assetsSubDirectory:'static',
assetsPublicPath:'./',
productionSourceMap:true,
devtool:'#source-map',
productionGzip:false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport:process.env.npm_config_report
},
這里對幾個比較重要的配置做下說明：
assetsPublicPath：打包后引用的靜態資源位置，這里使用的是相對路徑，生產環境部署的時候如果需要把靜態資源部署到cdn上，這個配置改為所在cdn的絕對路徑即可。
productionSourceMap：打包以后是否保留源碼map，測試環境為了調試方便，這里選擇true，生產環境為了安全需要，建議配置成false。最終打包結果的區別在于是否有下圖中的map文件
測試環境配置完成以后，在package.json的scripts對象中增加
"buildtest": "nodebuild/build.test.js"
然后就可以使用npmrun buildtest命令來進行測試環境的打包了。
打包靜態資源問題
如果在打包的過程中想壓縮資源文件,可以開啟gzip壓縮功能(config/index.js文件)
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* Source Maps
*/
productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: true,
productionGzipExtensions: ['js', 'css', 'jpg', 'png'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
productionGzip：true|false，是否開始壓縮功能，開啟壓縮功能之后, 打包出來的成果物要小很多.
IE兼容性問題
Vue官方文檔有對IE兼容性的說明，因為 Vue 使用了IE8 無法模擬的 ECMAScript 5 特性。所以Vue不支持 IE8 及以下版本，它支持所有兼容ECMAScript 5 的瀏覽器。
在項目開發完成后，卻出現了IE11無法訪問的情況，具體報錯信息：
SCRIPT5022: [vuex] vuex requires a Promisepolyfill inthis browser.
造成這種現象的原因歸根究底就是瀏覽器對ES6中的promise無法支持，因此需要通過引入babel-polyfill來使我們的瀏覽器正常使用es6的功能，解決方案：
- 首先通過npm來安裝polyfill：
npm install babel-polyfill --save-dev
- 修改webpack.base.conf.js文件module.exports的配置：
entry: {
app: ['babel-polyfill','./src/main.js']
},
登錄狀態路由攔截
一般系統都會有對所有需要權限控制的路由進行攔截，確保登錄狀態下才能訪問某些路由這類需求。利用vue-router提供的鉤子函數beforeEach()可以很簡單的實現。
- 第一步：定義路由是否需要攔截
首先在定義路由的時候就需要多添加一個自定義字段requireAuth，用于判斷該路由的訪問是否需要登錄。
{
path:'/xxx,
meta: {
requireAuth:true, // 添加該字段，表示進入這個路由是需要登錄的
},
component:xxx,
redirect:'/xxx/xxx,
children: [{
meta: {
requireAuth:true,
},
path:xxx/',
component:xxx
}
}
- 第二步：使用鉤子函數beforeEach()攔截路由
// 全局導航鉤子
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) {
getCurrentUser().then((curUser)=>{//getCurrentUser是封裝的調用后臺http接口的promise接口
if (curUser) {
next();
} else {
next({
path:'/login',
query: {
redirect:to.fullPath //登錄頁面獲取該參數，在重新登錄后重定向到該路由
}
})
}
}).catch((err)=>{
next({
path:'/login',
query: {
redirect:to.fullPath
}
})
});
} else {
next();
}
})
每個鉤子方法接收三個參數：
to: Route: 即將要進入的目標 路由對象
from: Route: 當前導航正要離開的路由
next: Function: 一定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。
next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed （確認的）。
next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了（可能是用戶手動或者瀏覽器后退按鈕），那么 URL 地址會重置到 from 路由對應的地址。
next(‘/’) 或者 next({ path: ‘/’ }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。
