手把手教你搭建一個Vue項目，包含axios服務，vuex，公共組件/指令/過濾器/服務等

看了網上有很多搭建vue項目的demo，但是不是已經年久失修的項目就是很簡單的demo，想着自己也搭了很多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’相對路徑

如果我們想在手機上實時調試我們的項目，比如說安裝了vConsole。這裏教你們一個偷懶的方法，打開 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 來動態設置網頁標題的。