一、vite2.0+vue3.0+ts 建立、配置

個人公眾號文章地址
個人github倉庫地址

1、Vite 建立 vue3 專案：

1.1、npm 常用命令

1、npm 檢視版本號

npm view 包 version —— 檢視最新版本號
npm view 包 version ——檢視所有版本號

2、npm 下載指定版本號

npm install --save-dev 包@版本號
npm install 包@版本號

1.2、vite1.0：

yarn create vite-app <project name>

1.3、vite2.0：

(需要 node 版本>12.0.0)建立專案：vscode 要安裝 volar 外掛(禁用 vue2.0 的外掛 vetur，會衝突)
 

1、常用命令：

npm init vite@latest

npm init @vitejs/app 專案名
yarn create @vitejs/app 專案名

2、快速新建：

npm init @vitejs/app 專案名 --template vue-ts

1、
2、
3、
4、yarn 安裝依賴，啟動服務

問題：
    1、webpack編譯慢（修改一點東西都會把全部檔案重新編譯）
    2、如果想用vue2，則使用vite-plugin-vue2外掛

2、基於ts的專案基礎配置

2.1、配置 ts 識別vue檔案,在專案根目錄新增shim.d.ts檔案:

declare module "*.vue" {
    import { Component } from "vue";
    const component: Component;
    export default component;
}
 

檔案中即可使用ts語法糖：<script setup lang="ts"></script>

2.2、配置router路由

1、yarn add vue-router@next
2、在專案src目錄下面新建router目錄，然後新增index.ts檔案
    ⚠️：一定要使用解構匯出方法，按照官方文件的會報錯
3、將router引入到main.ts中,修改main.ts檔案

2.3、配置狀態管理：vuex / pinia

1、yarn add vuex@next
2、在專案src目錄下面新建store目錄，並新增index.ts檔案
外掛：vuex-persistedstate
 

2.4、配置axios

1、yarn add axios / npm install --save axios vue-axios
2、在專案src目錄下面新建utils/http目錄，並新增axios.ts檔案

2.5、配置less

1、yarn add less less-loader --dev（建議安裝在本地依賴，沒必要裝全域性環境）
2、檔案中使用：<style lang="less" scoped></style>

2.6、配置path模組【import {resolve} from "path"】

1、安裝依賴：yarn add @types/node --dev
2、vite.config.ts檔案中配置：
    resolve: {
        alias: {
             "@": resolve(__dirname, "src"),
             },

        },

二、vue常用知識點

1、v-if 和 v-for 的優先順序

2.x ：v-for > v-if
3.x ：v-for < v-if

2、v-for 中的 Ref 陣列

2.x ：自動把ref填充內容
3.x ：需要通過 :ref="方法名" 手動新增

3、$children

2.x ：訪問當前例項的子元件
3.x ：$children 被移除，通過ref來訪問子元件

4、setup組合API

資料響應區別：
    2.x ：Object.defineProperty
        1、不能監聽陣列的變化
        2、必須遍歷物件的每一個屬性

    3.x ：Proxy——不需要遍歷
        （相當於2.x中的data）
        1、 ref——簡單型別（需要data.value操作資料）
        2、reactive——複雜型別


setup語法糖外掛：unplugin-auto-import
    yarn add unplugin-auto-import -D
    文件地址
    無需引入api（eg：import {ref……} from 'vue'）

5、toRefs是vue3.x的資料解構，用es6解構會消除proxy的資料響應

6、watch:{}

vue2.x
    方法1——改變了才會監聽: 監聽的值( newVal , oldVal ){}
    方法2——配置監聽：
        監聽的值:{
            handler( newVal , oldVal ){},
            immediate:true, // 是否獲取初始化的值
            deep:true, // 深度監聽——物件這類複雜型別的值
            }



vue3.x —— 立即監聽也可以用watchEffect（相當於： immediate:true）
    1、單個監聽：
        watch(監聽的值, (newVal, oldVal) => { console.log(newVal, oldVal); }, { immediate:true,} )

    2、多個監聽：
        watch([val1  , val2,...], (newVal, oldVal) => { console.log(newVal, oldVal); }, });

    3、監聽物件的key值：
        watch(()=>obj.key, (newVal, oldVal) => { console.log(newVal, oldVal); })

7、computed

8、父子元件

vue2.x
    父傳子：props
    子傳父：$emit
    兄弟：eventBus……

vue3.x
    父傳子：defineProps
    子傳父：defineEmits
    兄弟：mitt（emit、on）

9、插槽（父template、子slot）

1、匿名插槽：會把slot內容都無腦展示出來
2、具名插槽：通過name來進行判斷哪些內容展示，哪些不展示
3、作用域插槽：可以父子之間傳遞資料
4、動態插槽：template可以用變數控制name的具名插槽

10、teleport傳送——可以自己選擇傳送到某個標籤下【不容易受到定位的影響】

11、動態元件：

<component :is="變數"></component>
markRow(元件名)——可以繞過proxy

12、非同步元件（提升效能）

1、懶載入：元件按需引入（看到元件才載入）
    官方：defineAsyncComponent
    外掛：vueuse

2、axios返回的資料：
    <Suspense>
        <template #default>非同步載入的元件</template>
        <template #fallback>載入中</template>
        </Suspense>


3、打包會被分包處理：非同步元件有單獨的js檔案，是從主體js檔案分包出來的

13、Mixin：混入——複用功能

14、Provide / Inject ——依賴注入——可以忽略父子/父孫的多層級來傳遞資料

Provide（提供）—— provide('名',data)
Inject（接收）——const num=inject('名')