基於VUE的前端框架搭建

先上git地址：https://github.com/summercloud/vue-admin

配置思路

配置npm

這裏不贅述

配置eslint

• npm安裝eslint以及eslint相關模塊；
• 編寫.eslintrc配置文件，在rules中編寫校驗規則；
• 在.eslintignore中設置須要忽略的文件;
• package.json的scripts中設置校驗命令;其中test命令用於跑eslint校驗，校驗文件的路徑在lint中配置

"test": "npm run lint",
"lint": "eslint src/**",

• lint:fix命令用於跑eslint自動修復，會自修復代碼中的簡單的編寫錯誤

"lint:fix": "eslint --fix src/**"

安裝webpack和webpack-dev-server

注：webpack-dev-server是一個小型的nodejs express服務器，使用webpack-dev-middleware中間件來爲webpack打包生成的資源文件提供web服務。

• npm安裝webpack，webpack-dev-server；
• 配置webpack.config.js文件，詳細請見代碼中webpack.config.js文件，註釋寫的很詳細了。
• 在npm run build命令中經過NODE_ENV=production標記生產環境，在webpack.config.js配置文件中設置，若是爲生產環境則進行代碼壓縮。

配置babel

• 在webpack.config.js中配置es6解析器babel
• 在loaders中對全部的js文件都進行babel-loader的解析
• 並配置.babelrc文件，preset字段是在爲babel解析作預設，告訴babel須要使用相關的預設插件來解析代碼，plugins字段就是用來配置使用babel相關的插件的。這樣在運行webpack的同時全部的es6代碼會通過babel編譯成爲瀏覽器可運行的js代碼。

熱模塊加載

熱模塊加載是指代碼自動同步開發過程當中的全部修改。

• 在package.json的scripts中設置啓動webpack-dev-server的命令,"dev": "webpack-dev-server --content-base ./ --inline --hot" 其中./爲webpack-dev-server讀取文件的根目錄。
• 在webpack.config.js中的output中publicPath爲靜態文件的文件夾，若是源代碼有變動，熱模塊替換的代碼會在此文件夾的相應路徑中替
• 添加--inline命令，inline模式用於瀏覽器自動刷新頁面，而且在webpack.config.js文件中配置devServer中的inline參數爲true；
• 運行在inline模式中啓用熱模塊替換，需在命令行中加入--hot參數，並在webpack.config.js的plugins中加入new webpack.HotModuleReplacementPlugin()語句。

其餘文件解釋器

• 在webpack.config.js中配置vue文件解析器，官網有詳細教程
• 在webpack.config.js中配置ivew文件解析器，官網有詳細教程
• 在webpack.config.js中配置除了js之外的其餘文件的加載器，例如css、html、png等。

調試工具

• 調試工具devtool，並設置值爲source-map，這樣咱們就能夠在瀏覽器中直接調試咱們的源碼，在控制檯的sources下，點開能夠看到webpack://目錄。

git中項目分析

• /dist/index.html 爲頁面總入口
• 入口文件有兩個，index.js和vendors.js，index包含整個項目邏輯代碼的入口，vendors則是打包全部工具庫的入口與代碼邏輯無關。
• index使整個項目的入口，其中配置了路由，而且混入mixin中的方法到全局的VUE中，mixin包含一些通用的方法，例如$_request等。全部new的VUE對象都包含這些方法。
• index中定義了根組件app，此後的全部頁面顯示組件都是根組件的子組件。其中app中渲染的內容來自app.vue，app.vue中定義了頁面的架構。
• store文件夾裏用vuex作狀態管理，定義了一系列的全局狀態，並在index.js中注入根組件app中 util中的routes定義了項目的路由
• css文件夾中的common文件中定義一些工具類以及皮膚類等；util中定義一些對iview修改的類；
• 使用iview組件庫進行開發，使用手冊詳見：https://www.iviewui.com/components/grid