2.1. vue.config.js配置

Vue CLI依賴於Webpack，但是Vue CLI是將Webpack中的配置隱藏起來了，如果我們對Webpack中的某些配置不滿意，如果我們確實想要修改CLI中Webpack的某個配置，可以通過vue.config.js。vue.config.js中的配置會和Vue CLI中Webpack的配置合併。

https://cli.vuejs.org/

遇到問題先從官方文件找答案

vue.config.js有三種配置方式：（終於把這點搞懂了！）

* 方式一：直接通過CLI提供給我們的選項來配置：（名稱和webpack中的可能不一樣，但是一一對應）
* 比如publicPath：配置應用程式部署的子目錄（預設是 `/`，相當於部署在 `https://www.my-app.com/`）；

* 方式三：通過chainWebpack修改webpack的配置：（對webpack中的相關配置進行覆蓋）
* 是一個函式，會接收一個基於 [webpack-chain](https://github.com/mozilla-neutrino/webpack-chain) 的config物件，可以對配置進行修改；

對比下面方式二的1和方式二的2以及方式三對別名的修改，因為方式二的第一種是和webpack的配置合併，而webpack中是有對src起別名為'@'，所以如下操作。但是方式二的2以及方式三是對webpack中相關配置進行覆蓋，所以需要拿到src，重新對它起別名，因此要獲取path，拿到絕對路徑（這裡又涉及到一個require的查詢規則

 1 const path = require(‘path’)
 2 
 3 
 4 module.exports = {
 5   // 配置方式二：
 6   configureWebpack: {
 7     resolve: {
 8       alias: {
 9         components: '@/components'
10       }
11     }
12   },
13   configureWebpack: (config) => {
14     config.resolve.alias = {
 
15       '@': path.resolve(__dirname, 'src'),
16       components: '@/components'
17     }
18   },
19   // 方式三：
20   chainWebpack: (config) => {
21     config.resolve.alias
22       .set('@', path.resolve(__dirname, 'src'))
23       .set('components', '@/components')
24   }
25 }

2.2. vue-router整合（怎麼這個步驟就記不住呢）

• 安裝vue-router的最新版本：

1 npm install vue-router@next

• 建立router物件：（在src下新建一個router資料夾，下面index.ts）

 1 import { createRouter, createWebHashHistory } from 'vue-router'
 2 import { RouteRecordRaw } from 'vue-router'
 3 
 4 const routes: RouteRecordRaw[] = [ #ts是有型別的哦！
 5 {
 6 path: '/',
 7 redirect: '/main'
 8 },
 9 {
10 path: '/main',
11 component: () => import('../views/main/main.vue')
12 },
13 {
14 path: '/login',
15 component: () => import('../views/login/login.vue')
16 }
17 ]
18 
19 const router = createRouter({
20 routes,
21 history: createWebHashHistory()
22 })
23 
24 export default router

• 安裝router 註冊路由：

1 import router from './router' #export default匯出的router 不需要括號
2 
3 createApp(App).use(router).mount('#app')

• 在App.vue中配置跳轉：

1 <template>
2 <div id="app">
3 <router-link to="/login">登入</router-link>
4 <router-link to="/main">首頁</router-link>
5 <router-view></router-view>
6 </div>
7 </template>

2.3. vuex整合

• 安裝vuex：

1 npm install vuex@next

• 建立store物件：（在src下面新建一個store資料夾，然後新建一個index.ts）

 1 import { createStore } from 'vuex'
 2 
 3 const store = createStore({
 4 state() {
 5 return {
 6 name: 'coderwhy'
 7 }
 8 }
 9 })
10 
11 export default store

• 安裝store 註冊：

1 import store from 'vuex'
2 createApp(App).use(router).use(store).mount('#app')

• 在App.vue中使用：

1 <h2>{{ $store.state.name }}</h2>

使用volar外掛對ts的檢測會更加嚴格，比如上面的$store在script中沒有宣告就會報錯，這裡可以

在shims-vue.d.ts中宣告一下：（不過因為我使用的是vetur外掛，所以就不需要。這兩個外掛的作用就是語法高亮 錯誤提示等）

1 declare let $store: any

2.4. element-plus整合（這部門直接看官網更好）

Element Plus，一套為開發者、設計師和產品經理準備的基於Vue3.0的桌面端元件庫：

* 相信很多同學在Vue2中都使用過element-ui，而element-plus正是element-ui針對於vue3開發的一個UI元件庫；
* 它的使用方式和很多其他的元件庫是一樣的，所以學會element-plus，其他類似於ant-design-vue、NaiveUI、VantUI都是差不多的；

安裝element-plus

1 npm install element-plus

2.4.1. 全域性引入

一種引入element-plus的方式是全域性引入，代表的含義是所有的元件和外掛都會被自動註冊：

1 import ElementPlus from 'element-plus'
2 import 'element-plus/dist/index.css'
3 
4 import router from './router'
5 import store from './store'
6 
7 createApp(App).use(router).use(store).use(ElementPlus).mount('#app')

---全域性引入（所有的元件全部整合）：優點：整合比較簡單 缺點：會全部打包
---區域性引入（按需引用）：優點：包會小一些

快速開始 | Element Plus (gitee.io)

官網按需引入的方法好像一直在該，這次按照它上面來居然沒成功，所以還是把過程記錄一下吧！

1 npm install -D unplugin-vue-components

修改vue.config.js的配置

1 const Components = require('unplugin-vue-components/webpack')
2 const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

然後就可以直接使用了，但是要注意，圖示比較特殊哦！

補充知識點

app.use()中可以傳入一個函式，也可以傳入一個物件。

傳入一個函式時，預設會自動執行這個函式，並且會把app傳入此函式。

傳入一個物件時，預設會去執行這個物件的install，在執行這個物件的install時也會預設傳入app

2.5. axios整合

• 安裝axios：

npm install axios

• 封裝axios：（為什麼要封裝？1、如果不封裝，各個檔案中都直接使用axios，那麼一旦axios不更新了或者升級了，我們就要改很多地方，維護起來很麻煩；2、在傳送網路請求時可能有很多共同的特性，比如像後臺管理系統這樣的專案一般除了登入介面之外，其他介面在進行請求時都需要攜帶token，每個token最好放在header裡面，再發送請求，既然每個請求都需要做這個操作，不如封裝起來，不然會有很多重複邏輯。）
• 封裝邏輯：（感覺自己突然頓悟了！！！）在src--service中建立一個index.ts作為service的出口檔案(其他地方需要使用只需匯入'./service'就可以了，不用加index.ts),在service--request中建立index.ts裡面封裝一個HYRequest類，如下。在src--service--index.ts中例項化HYRequest這個類，然後其他地方就可以直接使用例項.方法進行呼叫！
• 我們之前用的axios.get等等中的axios其實是axios例項
• 為什麼要選擇把所有的axios封裝到一個類中？如果有很多邏輯需要封裝，類是一個不錯的選擇，因為類具有更強的封裝性，類本身就具備封裝（還有繼承、多型）
• 封裝邏輯詳細描述：
  

1.大多數情況下專案是隻有一個base_url的，但是如果一個專案有兩個base_url呢？我們要匯出兩個new Request嗎？要知道axios是可以配置base_url的，也就是說我根本沒辦法區分誰是誰，那怎麼辦？可以在對axios進行封裝的時候根據不同的config就建立不同的axios例項

　　參照程式碼

2.6環境變數的配置

見32ppt