從0開始搭建一個vue項目

為毛要寫這個呢，主要是閑得蛋疼和不想接手一些一涉及把線下接口改到線上接口就要全部vue檔案各種找(url全局)，和vuex的store.js裡面放完全部的資料，一頁一千多行的見過沒。

其實這章主要講如何讓項目好管理點和防止接手人拿刀上你家喝茶，是擺脫菜雞通往初級的必經之路。

1、vue init webpack 你的項目名，建立一個webpack模闆的vue項目。拿到項目先别急着碼代碼，先把使用環境搭建好先，把axios、vuex、element之類需要安裝的庫安裝好先。

npm install axios
           

2、vue的連結去除#号：去路由的index.js檔案那把mode: 'history'這句加上去，但是這個需要運維的配合

https://blog.csdn.net/weixin_41224029/article/details/88687977

export default new Router({ 
    mode: 'history', 
    routes: [{ path: '/', redirect: 'Index' }]
}]
           

3、全局url設定：這類一定要做的，不然别的方法也行。不然後端讓你把url從線上切到線下測試，你一個個頁面找一個個改？

連結：https://blog.csdn.net/chaosama/article/details/97135359

再配合axios網絡請求封裝，這樣的話如果請求頭需要帶什麼參數的話就不需要重複擷取值重複寫。

https://blog.csdn.net/chaosama/article/details/106498006

4、vue登入過期重定向和請求攔截器：下面連結的内容選做

  （1）登入過期重定向：如果你的項目登入過期了需要回到登入頁面，這個就需要做。

  （2）請求封裝：如果你的請求需要在headers裡面加上token之類的東西，就做這個。

  （3）請求攔截器：如果請求需要攔截下來做檢測的話就做這個。

連結：https://blog.csdn.net/chaosama/article/details/100175084

5、vuex的使用與部署：如果要用到vuex，最好做下這個

連結：https://blog.csdn.net/chaosama/article/details/100174743

6、到index.html添加網站小圖示，當然，你的本地得先有這個ico檔案

<link rel="shortcut icon" type="image/x-icon" href="./../images/favicon.ico" target="_blank" rel="external nofollow" >
           

 7、初始化樣式表，簡單來說就是去除預設樣式，像那些為什麼寫網頁總會留邊啊，li總會有個點跟着的問題都可以通過初始化樣式表解決，可以去除你不少的麻煩。

https://blog.csdn.net/chaosama/article/details/100569671

8、自适配，：https://blog.csdn.net/chaosama/article/details/106519133

      但該插件已經停止更新，且多人聯合開發時容易出狀況，建議使用rem與vh vw

9、切換新頁面時傳回螢幕頂部(建議做)

//main.js
router.afterEach((to, from) => {
  window.scrollTo(0, 0)
})
           

10、當你儲存登入狀态時決定用localStorage的時候需要注意安全性問題；而當使用sessionStorage的時候則需要在App.vue裡面做好一個檢驗登入狀态為null而傳回登入頁面的判斷，是為防止使用者關掉浏覽器然後從連結進入導緻的頁面請求缺少token無法加載。

現在基本搭建好了，剩下的就隻是@的部署和webpack的部署之類的，這個我就不多贅述，畢竟文章不少；而assets與static檔案夾應該用哪個來放檔案呢：百度下assets與static，他們說得更詳細。