看了網上有很多搭建vue專案的demo，但是不是已經年久失修的專案就是很簡單的demo，那些只能做新手參考並不能直接拿來用。我近兩年中已經參與了六七個vue專案的開發，包含PC端、客戶端、手機端，其中獨立負責的vue專案主要為微信公眾號的開發。而在每個專案中，我都會取長補短的去搭建自己的專案，經驗總是一個一個坑走過來的嘛。現在我就分享一個vue架子的搭建，可用於大型專案結構清晰便於維護。其中包含公共元件的封裝，axios服務/路由，vuex，自定義指令/過濾器，rem適配，css前處理器，UI庫，使用node去編輯專案中的工具。（本教程，適用於對vue基礎有一定了解的童鞋）

如果你能一步一個腳印跟著教程去趟坑，就一定能學會。但是我認為，一個人最重要的不是技術而是思維，因為技術你可以看文件去問度娘，但是思維這東東卻需要你的腦袋瓜子夠靈活並且需要一定的專案經驗。我希望，本教程能給你帶去的而不僅僅是一點點技術。（如果以下教程有更完美的方案，歡迎留言/期待）

專案地址 gitHub：https://github.com/susuGirl/vue-project

技術：vue-cli vue-router vue axios stylus git lodash

 

npm install vue ：安裝vue

npm install —global vue-cli ： 全域性安裝 vue-cli

vue init webpack vue-project ：建立一個基於 webpack 模板的新專案，專案名 vue-project 可自定義

測試工具暫時不需要，但是ESLint檢測程式碼，你們可以選擇要或者不要。我選擇留下，並且下面會配置只檢測vue檔案不檢測js檔案，否則其他專案的js檔案也會受到影響，一片飄紅慘不忍睹…...

 

出現以下結果，代表專案新建完成。

cd vue-project 開啟專案

npm install 安裝依賴

npm run dev 執行專案

 

 

然後可以開啟你的編輯器，下載ESLint外掛

vscode配置：首選項/設定/配置

{

"editor.tabSize": 2,

"prettier.tabWidth": 2, // 設定Tab縮排距離

"eslint.enable": true,

"eslint.autoFixOnSave": true, // 儲存時自動格式化

"eslint.run": "onType",

"eslint.options": {

    "extensions": [".vue"] // 只檢測vue結尾的檔案，不新增js檔案，避免其他專案的js檔案也收影響一片飄紅

},

"eslint.validate": [

    { "language": "vue", "autoFix": true }

]

}
 

surprise 現在就已經搭建完一個簡單的vue專案了，現在訪問就能看到以下專案：

 

 

but 還遠遠不夠哦，辣麼，我們繼續…….

 

本喵習慣用git，所以以下我會使用git將專案推送到我的gitHub專案上。不需要的童鞋們可以忽略這一步，繼續往後走即可。

git init

git status

git add *

git commit -m 'feat:init project and init git ‘

git checkout -b develop master

 

然後吶我們來打包一個試試看吧，輸入命令 npm run build 進行打包

如果有童鞋打包報錯：

Tip: built files are meant to be served over an HTTP server.

 Opening index.html over file:// won't work.

• npm run dev是開發環境, npm run build是生產環境, 在開發環境完成程式碼和測試, 之後用生產環境生成程式碼

• 因為vue-cli的預設配置中, publishPath是用絕對目錄, 所以dist資料夾裡的檔案必須放在伺服器的根目錄, 如果想本地開啟, 可以在npm run build完成之後執行命令：

• sudo npm install -g http-server 該命令只需執行一次，安裝後就無需重複安裝

然後你會發現專案中多了dist檔案，裡面的static檔案就是你專案原本的static檔案，這是一個不會被壓縮打包的檔案而且在根目錄下。

裡面還有一個html頁面，辣麼你現在嘗試去網頁開啟它（比如說找到該資料夾雙擊開啟），是不是發現頁面一片空白一臉懵逼？那就對了。想解決這個問題，我們就開始webpack的基本配置吧。

最後先在src資料夾下面新建幾個新的空資料夾，便於後續操作，至於作用，且聽下文分析：

 

webpack 基本配置

啊哈哈～你想多了，該專案腳手架已經全幫你配好了，如果沒有特殊要求就不用配了，但是還是可以手動配置一點點意思意思一下滴，比如解決以上bug

辣麼，現在請開啟 build資料夾下的 webpack.base.conf.js 檔案：

 

 

如圖配置好之後，重新執行打包 npm run build 命令，再次開啟dist檔案裡的html頁面就能正常顯示啦。

至於下面順手配置的東東，是為了後面在專案中 import 引入檔案時，可以不用寫相對路徑，栗子：

將 src/router/index.js 檔案裡的 import HelloWorld from  ‘@/components/HelloWorld’ （@代表src）改成 import HelloWorld from  ‘components/HelloWorld’  然後飄紅了四不四？別緊張，npm run dev 重新跑一下專案，然後就恢復如初了四不四？

發現這麼寫也可以的原因就是剛剛配置的 'components': resolve('src/components') 

如果我們什麼都沒有沒有配置 實際上我們應該這麼寫 import HelloWorld from '../components/HelloWorld.vue’相對路徑

 

有時候，後臺叔叔們需要我們前端頁面去除錯他們的介面，然後我又懶得陪他們浪費時間。這裡教你們一個偷懶的方法，開啟 config/index.js檔案，如圖配置：port 埠號 你可以自己配置一個也可以不動，預設8080，host如圖改成 0.0.0.0，重啟專案。

 

然後開啟你的控制檯輸入ifconfig，獲取到你本地電腦的ip地址

 

然後將位址列的 0.0.0.0 改成你電腦的IP，現在你把這個連結地址複製貼上扔給後臺小哥哥他們就可以自己去玩啦，就不用再來佔用你的電腦螢幕啦。前提是你的電腦得開著這個專案，因為他們訪問的是你電腦的連結哦。

 

路由配置/錯誤路由配置/路由重定向/導航守衛

如圖新建資料夾以及 index.vue 檔案

 

 

 

然後是 router/index.js 檔案：

 

完全看不懂？？？辣麼你去把官方文件從頭到尾看一遍可好？/摸摸頭

官方文件：https://router.vuejs.org/zh/guide/

一眼秒懂？？？惹不起惹不起，向大神致敬，如果有更好的idea請指教！！！/立正

似懂非懂？？？辣麼～咳咳～我們繼續：但是建議先移駕去gitHub拉取一下專案點點看效果再來：https://github.com/susuGirl/vue-project

其實吧這真不難，無非就是父子路由的巢狀，錯誤路由重定向，以及路由元資訊和導航守衛。你們可以在導航欄隨意改一些路由地址或者隨便輸路由地址看一下效果。

我就說一下導航守衛 beforEach 進入路由之前的神操作吧。這個地方呢很容易造成死迴圈或者卡住不走了，不走了很簡單就是 next() 的問題，路由不知道是繼續往前走呢還是往其他方向走所以就懵逼了乾脆不走了，所以你要用next告訴它下一步怎麼走。但是死迴圈呢就是各種判斷的問題了，尤其大型專案中因為各種狀態的問題if越多越容易疏忽。

以上栗子，本喵做了個登入判斷，比如說購物網站淘寶，下單的時候是需要你登入的，未登入就無法下單。這個時候就有些頁面需要登入判斷有些頁面則不需要，以上栗子是根據路由元資訊meta裡checkLogin布林值的狀態來判斷該頁面是否需要檢測登入狀態，為true說明該頁面需要已登陸狀態。而 logined 則代表登入狀態，正常專案中是由後臺介面給你返回的登入狀態，這裡就用布林值寫死了，你可以改變true/false來看看頁面的效果。

meta 裡的title，是為了通過 document.title 來動態設定網頁標題的。

 

 

 

服務 axios

npm install axios // 官網 https://www.kancloud.cn/yunye/axios/234845

npm install qs // 處理URL，qs.parse()將URL解析成物件，qs.stringify()將物件序列化成URL形式

 

如圖新建以下檔案

env的功能是為了方便位址列直接切換環境，開發時我們用的是後臺的測試介面，上線時用的是線上介面，栗子：

測試環境：http://0.0.0.0:8082/#/entry/entryIndex

切換到

正式環境：http://0.0.0.0:8082/?env=online/#/entry/entryIndex

 

配置以及使用方法：

 

 

以上整個 services 檔案，複製貼上到任何專案中都能使用（支援axios的），例如react專案，我直接複製貼上過去什麼都不用改動照樣使用。

具體解釋看這篇文章 axios服務封裝，可用於任何支援axios的專案中，包括react和vue都可通用。get/post請求，以及併發請求。以及導航欄隨意切換測試/正式環境

未完待續......