建立一個VUE專案，正式開發之前要做的配置~
阿新 • • 發佈：2021-07-02
一、使用vue-cli腳手架建立一個專案，根據我們開發所需生成固定的檔案目錄（可配置）。
二、建立好專案之後，還並不能開始真正的開發，我們需要做一些開發前的準備，比如請求的axios封裝，多環境的地址配置，解決本能地開發跨域等等，做好準備，在後續開發中會有一勞永逸的感覺哦~。
1、多環境的地址配置
- 根據啟動命令Vue會自動載入對應的環境，同時其會讀取相對應的環境配置檔案。
- 在package.json檔案中配置好不同環境的打包執行命令
"scripts": {
"dev": "npm run serve", // 本地執行，環境為development
"serve": "vue-cli-service serve",
"build": "vue-cli-service build", // 打生產包 會去讀取 .env.product的配置
"build:test": "vue-cli-service build --mode test", // 打測試包 會去讀取 .env.test的配置
"lint": "vue-cli-service lint"
},
- 在專案根目錄下以.env開頭建立不同環境下的地址配置檔案，檔案裡可以配置相應的地址。
2、跨域處理和一些基本配置
在專案根目錄建立vue.config.js檔案（腳手架幫我們封裝好了一套webpack配置，我們有需要的話疊加就好了，不用再寫一遍基本配置）
（1）本地開發跨域：通過proxy代理真實請求的地址
（2）配置檔案快捷路徑： 通過alias配置快捷
（3）配置全域性樣式：需要先下載對應的外掛，這裡用了less，需要先下載less， less-loader，style-resources-loader，vue-cli-plugin-style-resources-loader這四個外掛（少下載都會導致樣式無效哦~）
const path = require('path')
const devServerConfig = {
proxy: {
'/my-web': {
target: process.env.url, // 需要代理的後端地址
changeOrigin: true,
secure: false,
},
},
port: 8080,
}
module.exports = {
devServer: devServerConfig,
pluginOptions: {
'style-resources-loader': {
preProcessor:
3、axios的封裝
在src目錄下建立一個api資料夾（名字可以自定義）
// httpError.js 公共錯誤提示的js const ErrorMap = new Map([ [400, '請求錯誤'], [401, '未授權，請重新登入'], [403, '拒絕訪問'], [404, '請求錯誤，未找到該資源'], [405, '請求方法未允許'], [408, '請求超時'], [500, '伺服器端出錯'], [501, '網路未實現'], [502, '網路錯誤'], [503, '服務不可用'], [504, '網路超時'], [505, 'http版本不支援該請求'], ]) export const getErrorMessage = (status) => { if (ErrorMap.has(status)) { return ErrorMap.get(status) } else { return '連線錯誤，請聯絡管理員' } }
（1）使用一：將每個請求都寫成獨立的請求函式，元件中引用呼叫。
優點：多個地方呼叫，如果介面有變動，直接改這個函式即可（比如請求方法、介面路徑等發聲改變）
// http.js import axios from 'axios' import Vue from 'vue' import router from '@/router' import { getErrorMessage } from '@assets/js/httpError' const Axios = axios.create({ baseURL: '/my-web', timeout: 5000, }) // 新增請求攔截器 Axios.interceptors.request.use(req => { let token = localStorage.getItem('_a') token && (req.headers.Authorization = token) return req }, err => { return Promise.reject(err) }) // 響應攔截器 Axios.interceptors.response.use(res => { if (res.data.code === '0') { return { data: res.data.data, response: res, } } else { return Vue.prototype.$message.error(res.data.message) } }, err => { let status if (err && err.response) { status = err.response.status err.message = getErrorMessage(status) Vue.prototype.$message.error(err.message) } if (status === 401) { router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }) } return Promise.reject(err) }) export default Axios
// home.js import http from './http' // 獲取主頁資訊 export const getHomeInfo = () => http({ url: '/home/info', method: 'get', }) // xxx功能介面 export const xxxx = () => http({ url: '/home/xxx', method: 'get', })
...
// vue檔案中呼叫請求函式 <script> import { getHomeInfo } from '@api/home' export default { mounted() { this.getData() }, methods: {
async getData () { let { data } = await getHomeInfo() } }, }
</script>
（2）使用方法二：在第一種axios封裝的基礎上，再針對不同型別請求封裝，api檔案只維護請求介面的url
優點：需要改變請求路徑時，只需改動url的配置檔案
// http.js import axios from 'axios' import Vue from 'vue' import router from '@/router' import { getErrorMessage } from '@assets/js/httpError' const Axios = axios.create({ baseURL: '/my-web', timeout: 5000, }) // 新增請求攔截器 Axios.interceptors.request.use(req => { let token = localStorage.getItem('_a') token && (req.headers.Authorization = token) return req }, err => { return Promise.reject(err) }) // 響應攔截器 Axios.interceptors.response.use(res => { if (res.data.code === '0') { return { data: res.data.data, response: res, } } else { return Vue.prototype.$message.error(res.data.message) } }, err => { let status if (err && err.response) { status = err.response.status err.message = getErrorMessage(status) Vue.prototype.$message.error(err.message) } if (status === 401) { router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }) } return Promise.reject(err) }) // 封裝的請求函式 function request(url, methods, params, option = {}) { let headers if (option.headers) headers = option.headers return Axios({ url, methods, headers, data: ['POST', 'PUT'].includes(methods) ? params : null, params: ['GET', 'DELETE'].includes(methods) ? params : null, }) } // 暴露給vue檔案使用的請求方法 export const getData = (url, params, option) => { return request(url, 'GET', params, option) } export const postData = (url, params, option) => { return request(url, 'POST', params, option) } export const putData = (url, params, option) => { return request(url, 'PUT', params, option) } export const deleteData = (url, params, option) => { return request(url, 'DELETE', params, option) }
// url.js export default { login: '/login', homeInfo: '/home/info', ... }
有兩張方式去呼叫請求：
- 在vue檔案中直接引入url
<script> import url from '@api/url' import { getData } from '@api/http' export default { mounted() { this.getHomeInfo() }, methods: { async getHomeInfo () { // url.homeInfo：介面地址 let { data } = await getData(url.homeInfo) console.log(24, data) } }, } </script>
- 在Vue原型上掛在url，vue檔案中直接獲取到this.$url.xxx介面
// main.js檔案中加入以下程式碼，將url掛在到vue例項上 import url from './api/url' Vue.prototype.$url = url // vue 檔案中 <script> import { getData } from '@api/http' export default { mounted() { this.getHomeInfo() }, methods: { async getHomeInfo () { // 直接通過vue拿到url let { data } = await getData(this.$url.homeInfo) console.log(24, data) } }, } </script>
看個人習慣選擇要那種~
3、路由的處理
- 可以將路由按照頁面結構拆分成多個檔案引入，便於維護（建議）
- 也可以直接在頁面中寫完全部路由
import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) // 解決重複點選相同路由控制檯報錯問題 const VueRouterPush =VueRouter.prototype.push VueRouter.prototype.push = function push (to) { return VueRouterPush.call(this, to).catch(err => err) } const routes = [ { path: '/', name: 'Home', component: Home }, ] router.beforeEach((to, from, next) => { // 進入每個路由前會先進這個函式，一般對身份的驗證，路由頁面的驗證可以放在這裡 }) const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router
4、配置eslint