專案開發流程
前言:人生所謂的成功，就是堅持把一件事情做到極致
在開發專案的程序中，每個人寫代碼的格式都是不一樣，為了代碼規范，會開啟eslint（嚴格）規范，幫助檢測代碼是否規范，如果不規范，自動按著既定的規范格式化，在搭建腳手架之前，要在編輯器安裝eslint插件，配置編輯器的自動保存eslint格式，然后在首選項打開設定json里進行配置，用eslint的規范來檢測檔案，比如js檔案，
首先，要搭建腳手架 ，因為eslint版本的不同，可以手動自己下載插件進行配置，腳手架搭建成功后，
要在package.json檔案中的devDependencies里面配置eslint版本，配置完成后，重新下載依賴庫，然后在根目錄下創建一個vue.config.js檔案進行配置 lintOnSave改成"warning"，還要在根目錄下創建一個.eslintrc.js檔案進行代碼規范的配置，這樣eslint規范就配置完成啦，
在一個專案中，還要進行多環境變數的配置，首先要在package.json 里的 scripts 配置 serve stage build來執行不同的環境,然后在根目錄下新建以.env開頭的三個檔案，這三個檔案分別是，開發環境，測驗環境，生產環境，在三個檔案中，只定義了基礎的變數，我們要統一在src下新建config的env.環境名.js里進行管理，然后在config檔案下的index.js中匯出，在src下創建一個http檔案夾，有index.js檔案封裝axios，首先匯入axios，在創建axios實體，配置攔截器，請求攔截器和回應攔截器，在匯出axios實體，還要根據環境不同引入不同baseApi地址，在創建axios實體的請求介面換成引入的地址介面，
專案中需要進行請求介面，為了避免麻煩，方便日后維護，在src下新建一個api檔案夾，有api.js檔案先引入axios的實體，然后封裝api介面，然后注冊介面，呼叫即可，
在做移動端的專案時候，要安裝vantui組件方便布局，vantui我使用的是按需引入的形式，所以，還要安裝一個組件是 babel-plugin-import -D的組件，編譯的程序中將import的寫法自動轉化為按需引入的方式，然后在babel.config.js中，進行配置，在單健一個vant.js檔案，在檔案中先引入vue實體，在引入要使用的組件，利用import引入，然后使用組件vue.use（組件名），還要在main.js里引入vant.js以及css樣式，這樣就可以按需引入的形式來使用vantui，
移動端專案，樣式是需要手動寫的，為了節省時間加快效率可以對sass封裝，先創建一個global.scss檔案做一下樣式清除，和公共的一些樣式美化，在創建一個mixins.scss檔案存放一些比如清除浮動或者多行文本溢位的公用樣式，這些都是每個專案會用到的東西，所以配置好了放入專案中直接進行呼叫即可，
最后還需要進行移動端適配，主流的有rem和vm兩種，在這個專案中我用的是rem，先下載lib-flexible postcss-plugin-px2rem這兩個插件，然后創建vue.config.js檔案進行配置，最后在main.js 檔案中匯入： import “lib-flexible/flexible”;就可以用啦，
專案中，常用的組件
1.回傳頂部組件
2.上拉加載更多組件
3.吸頂效果組件
4.搜索組件
7.優化
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/244819.html
標籤：其他
上一篇：2020書單總結~