基於vue-cli3.0的項目工程從新構建空白版，拿來即用

寫在前面

使用vue框架開發時，不少人會選擇vue官方提供的cli腳手架，最新的cli已經更新到3.0徹底無配置，只需下載就能方便的使用vuecli構建的項目工程，但基礎的cli並不能知足正常的項目開發，在開發中咱們須要根據本身的習慣和業務功能而添加些基礎功能。

我在vuec-li3的基礎之上從新作了些構建，分爲pc，移動兩版，主要區別是移動版添加了分辨率適配，本項目爲空白版，拿來即用，省卻每次手動構建項目工程！！

GitHub查看項目內容 https://github.com/wwenj/vueC...

PC

• pc版安裝了elementUI作統一UI展現
• 安裝scss寫樣式

移動

• 移動端適配：本項目使用vw單位統一對分辨率作適配，在vuecli工程裏，根據大漠的《如何在Vue項目中使用vw實現移動端適配》用webpack中作配置。

基礎配置

• svg組件：

  文件在src/icons/中，組件在component公共組件中封裝用於svg展現組件，用作小icon的展現，svg保存在icons/下，使用時組件中調用<svg-icon icon-class="iconName"/>便可

• css樣式：

  在src/style/中，全局公共樣式，初始化樣式。

• 路由與vuex

  對vue router和vuex作了相同的模塊化處理，在router/和store/中統一寫路由和vuex相關信息，可按功能分模塊引入

• 請求攔截與封裝

  1. 使用axios作請求，在src/request/http.js中作了封裝，用axios攔截器對請求和響應作統一攔截，處理每次請求的token信息或者響應狀態碼
  2. 對axios請求進行簡單封裝get，post請求，統一傳參，響應後傳回一個promise對象，在src/request/api.js中將每一個接口封裝，對外暴露請求改接口的方法名，返回一個promise，組件中直接調用api.js中的方法名便可
• 工具類

  在src/utils/中，對經常使用枚舉值、全局組件註冊、經常使用類功能模塊作模塊化封裝

• vue.config.js

  vuecli3隱藏全部配置，添加新配置項目中新建vue.config.js文件，本項目在其中加了一些經常使用配置，文件夾的別名，代理，打包路徑等

• Eslint

  eslint使用默認規則，在vscode編輯器中配合eslint插件的保存自動修復功能，每次保存後會按照eslit規則自動修復

• 目錄結構

  src/views文件下寫業務模塊，src/components寫公共基礎組件

寫在結尾

本項目只是根據本身開發習慣整理的一套基於vuecli3的從新構建項目，爲了讓開發更方便，清晰，每次寫新項目，我的項目，寫demo下載即用，比較方便，若有問題歡迎指教

GitHub查看項目內容 https://github.com/wwenj/vueC...