如何做屬于自己的領(lǐng)券網(wǎng)站長安seo排名優(yōu)化培訓(xùn)
?
目錄
開始
創(chuàng)建一個 Vite 項目
項目結(jié)構(gòu)
/src/main.js
index.html
package.json
vite.config.js
Vite 項目中使用 vue-router
Vite 組件的“按需引入”
傳統(tǒng)的方式引入一個組件
傳統(tǒng)方式引入帶來的問題
解決辦法（配置 按需引入 插件）
示例：elementPlus、naive-ui?按需引入
Vite vue API 的按需引入
傳統(tǒng)方式使用 API
解決辦法（配置按需引入）
開始
創(chuàng)建一個 Vite 項目
a）在 vscode 中打開終端，輸入如下命令：
npm create vite@latestb）流程如下：
如果是第一次下載，他會詢問你下載 vite，輸入 y 即可
接著會詢問你給項目起什么名字.? 默認(rèn)為 vite-project
接下來我們選擇 Vue 即可.
接下來，會詢問你選擇 js 還是 ts.（本文以 js 為主）?
?
這樣，我們的項目就創(chuàng)建好了~
c）另外，以上步驟在 IDEA 中可以直接一步到位...
d）如果執(zhí)行 npm run dev 的時候出現(xiàn)如下錯誤：
說明 vue 依賴還有安裝
使用 npm i 命令來初始化安裝所有依賴即可（i 就是 install 的意思）
之后就可以觀察到項目中多出了 node_modules 文件（這個文件中存放的就是下載好的依賴），然后通過 npm run dev 就可以成功了
?
項目結(jié)構(gòu)
/src/main.js
在 Vue.js 項目中，main.js是項目的入口文件.
主要作用是初始化 Vue 應(yīng)用程序，并設(shè)置一些全局配置和選項.
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'createApp(App).mount('#app')
- ?import { createApp } from 'vue'：從 vue 包中導(dǎo)入 cteateApp 方法.? createApp 是 Vue3 中引入的一個新的 API，用于創(chuàng)建一個新的 Vue 應(yīng)用實例.
- import './style.css'：導(dǎo)入當(dāng)前項目下 style.css 文件. 通常是一個包含全局樣式的 CSS 文件.
- import App from './App.vue'：從./App.vue 文件中導(dǎo)入 App 組件.? App.vue 是 Vue 應(yīng)用程序的跟組件，通常包含了應(yīng)用程序的初始結(jié)構(gòu)和布局.
- createApp(App).mount('#app')：
- 使用 createApp(App) 創(chuàng)建了一個新的 Vue 應(yīng)用實例，并將 App 組件作為根組件。
- .mount('#app') 方法將 Vue 應(yīng)用實例掛載到 HTML 文件中 ID 為 app 的元素上.? 這意味著 Vue 將接管這個元素及其所有子元素，并根據(jù) App 組件的定義來渲染他們.
index.html
這個頁面為 Vue.js 的入口頁面
<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>
- ?<div id="app"></div>：這個元素通常作為 Vue 實例的掛載點.? Vue 實例會管理整個元素及其子元素（將來我們寫的一個個 vue 組件就會根據(jù) main.js 中的定義渲染到這個標(biāo)簽下）.
- <script type="module" src="/src/main.js"></script>：這里引入了一個 js 腳本，這個腳本中就包含了創(chuàng)建 和 掛載 Vue 實例的代碼.
package.json
package.json 文件用于描述項目元信息和依賴關(guān)系.
{"name": "vite1","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},"dependencies": {"vue": "^3.4.21"},"devDependencies": {"@vitejs/plugin-vue": "^5.0.4","vite": "^5.2.0"}
}
-
name: "vite1"
- 這是項目的名稱，叫做“vite1”。
-
private: true
- 這意味著這個項目是私有的，不應(yīng)該被發(fā)布到 npm 倉庫。這是一個安全措施，防止不小心將內(nèi)部或私有項目發(fā)布到公共倉庫。
-
version: "0.0.0"
- 這是項目的版本號，目前設(shè)置為“0.0.0”。在開發(fā)過程中，這個版本號會根據(jù)項目的更新情況進行遞增。
-
type: "module"
- 這意味著該項目使用 ES6 模塊。在 Node.js 中，如果一個項目被標(biāo)記為“module”，那么它可以使用 ES6 的 import 和 export 語法。
-
scripts:
- 這部分定義了幾個 npm 腳本，也就是 npm run xxx 命令，至于 xxx 是什么，可以是以下定義，也可以是自定義.??
- dev: 運行 vite 命令，這通常用于啟動開發(fā)服務(wù)器。
- build: 運行 vite build 命令，用于構(gòu)建生產(chǎn)版本的項目。
- preview: 運行命令 vite preview，用于預(yù)覽構(gòu)建后的項目。
- 自定義：例如 "foo":? "node index.js" ，當(dāng)我們使用 npm run foo ，就會通過 node 去執(zhí)行 index.js 文件.??
- 這部分定義了幾個 npm 腳本，也就是 npm run xxx 命令，至于 xxx 是什么，可以是以下定義，也可以是自定義.??
-
dependencies:
- 這部分列出了項目在生產(chǎn)環(huán)境中需要的依賴項。
- vue: "^3.4.21" 表示項目依賴于Vue.js框架，并且版本是3.4.21
- 這部分列出了項目在生產(chǎn)環(huán)境中需要的依賴項。
-
devDependencies:
- 這部分列出了項目在開發(fā)環(huán)境中需要的依賴項。
- @vitejs/plugin-vue: "^5.0.4" 是Vite的一個插件，用于支持Vue.js項目（如果沒有這個依賴，瀏覽器是不認(rèn)識 .vue 文件的，也就不會去編譯）。
- vite: "^5.2.0" 是構(gòu)建工具和開發(fā)服務(wù)器，它使現(xiàn)代Web開發(fā)變得更快
- 這部分列出了項目在開發(fā)環(huán)境中需要的依賴項。
vite.config.js
這是 Vite 的配置文件，作用如下：
- 定義插件：例如支持 Vue、React、CSS 預(yù)處理器等.
- 配置構(gòu)建選項：可以配置構(gòu)建時的各種選項，例如輸出目錄、資源公共路徑、別名等.
- 配置開發(fā)服務(wù)器：可以自定開發(fā)服務(wù)器配置，例如端口號、代理配置、CORS 配置等.
- ......
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],
})
- import { defineConfig } from 'vite'：defineConfig 函數(shù)用于定義 Vite 的配置對象，提供了類型檢查和自動補全等好處.
- import vue from '@vitejs/plugin-vue'：這個插件用于在 Vite 項目中支持 Vue3 組件開發(fā).
- export default defineConfig({
? plugins: [vue()],
})：defineConfig 函數(shù)用于接收一個配置對象作為參數(shù)，這個對象中，設(shè)置了 plugins 屬性.- plugins：是一個數(shù)組，用于列出 Vite 項目中使用的所有插件.? 這里我們添加了 vue() 插件實例，以支持 Vue3 組件的編譯和開發(fā).
Vite 項目中使用 vue-router
a）安裝 vue-router：
npm i vue-router -Di：install 的意思.?
-D：告訴 npm 將 vue-router 作為開發(fā)依賴添加到 package.json 文件中，而不是作為普通的依賴（dependency）.
可以觀察到 package.json 文件中開發(fā)環(huán)境依賴就有了 vue-router
?
b）配置 router：
在 src 文件下創(chuàng)建一個 modules/router.js 文件，用來配置路由
import { createRouter, createWebHistory } from "vue-router";const router = createRouter({routes: [],history: createWebHistory()
})export default router
接著在 main.js 文件中引入 router
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./modules/router.js";const app = createApp(App)
app.use(router) //一定要在掛在前 use
app.mount('#app')
c）使用：
例如創(chuàng)建?src/pages/Home.vue 文件，內(nèi)容如下：
<template>我是首頁
</template>
接著在 src/App.vue 中定義這個路由的入口
<template><router-view></router-view>
</template>
最后在? src/modules/router.js 文件中聲明這個路由
import { createRouter, createWebHistory } from "vue-router";const router = createRouter({routes: [{name: '首頁',component: () => import('../pages/Home.vue')}],history: createWebHistory()
})export default router
之后啟動項目，打開頁面就會發(fā)現(xiàn)一開始就在首頁的位置（如果不配置 path，默認(rèn)就是根目錄 / ）.
d）如果還有 其他 頁面：
創(chuàng)建 src/pages/About.vue 組件，內(nèi)容如下：
<template>這里是其他頁面
</template>
最后在? src/modules/router.js 文件中聲明這個路由
import { createRouter, createWebHistory } from "vue-router";const router = createRouter({routes: [{name: '首頁',component: () => import('../pages/Home.vue')},{name: '其他',path: '/about',component: () => import('../pages/About.vue')}],history: createWebHistory()
})export default router
效果如下：
Vite 組件的“按需引入”
傳統(tǒng)的方式引入一個組件
a）例如創(chuàng)建 /src/components/Foo.vue 組件，內(nèi)容如下：
<template>我是 Foo
</template>
b）當(dāng)你需要在其他組件中使用到該組件時，例如 在 Home.vue 組件中使用 Foo.vue 組件，那么你需要先 import 引入進來，再使用，如下：
<script setup>//1. 先引入import foo from "../components/Foo.vue"
</script><template><div>我是首頁</div><!-- 2. 再使用 --><foo />
</template>
c）頁面效果
傳統(tǒng)方式引入帶來的問題
可以想象這樣一個問題，如果將來在?Home.vue 中需要引入 成百上千 個組件呢，難道我們也要一個個手寫來引入么？
因此我們就想，有沒有什么辦法能讓他自己按需引入呢，這些 import 將來就不需要手動去寫的那種？
實際上是可以的，這里有一個插件可以實現(xiàn)：unplugin-vue-components?
GitHub - unplugin/unplugin-vue-components: 📲 On-demand components auto importing for Vue📲 On-demand components auto importing for Vue. Contribute to unplugin/unplugin-vue-components development by creating an account on GitHub.
https://github.com/antfu/unplugin-vue-components?
解決辦法（配置 按需引入 插件）
a）下載按需引入插件
npm i unplugin-vue-components -D
安裝完成后，可以在 package.json 文件中如下顯示
?
Ps：npm up 可以更新依賴~
b）在? vite.config.js 文件中配置 按需引入，如下：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//1.引入 "按需引入" 插件
import Components from 'unplugin-vue-components/vite'export default defineConfig({//2.配置插件plugins: [vue(), Components()],
})
Note：官方文檔中也告訴了你如何引入~
c）接下來你會發(fā)現(xiàn)，在 Home.vue 組件中使用 Foo.vue 組件，就可以不用寫 import 了~
<script setup>// import foo from "../components/Foo.vue"
</script><template><div>我是首頁</div><Foo />
</template>
示例：elementPlus、naive-ui?按需引入
Note：官方文檔中也有教你怎么引入（這里我們以 ElementPlus 為例）~
a）這里我們只需要在?vite.config.js 文件中引入 elementPlus 的解析器，然后把她交給 Components 按需引入插件即可.
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
//1.引入 ElementPlus 解析器
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({plugins: [vue(),//2.配置到 "按需引入" 中Components({resolvers: [ElementPlusResolver()]})],
})
b）安裝 element-plus
npm i element-plus -D
c）在 Home.vue 中使用 elementPlus 的按鈕
<script setup>
</script><template><div>我是首頁</div><el-button>我是 element-plus 中的按鈕</el-button>
</template>
d）效果如下
e）naive-ui 也同理
先通過 npm i naive-ui -D 進行安裝
接著在 vite.config.js 文件中配置，如下：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
//1.引入 NaiveUiResolver 解析器
import { ElementPlusResolver, NaiveUiResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({plugins: [vue(),//2.配置到 "按需引入" 中Components({resolvers: [ElementPlusResolver(), NaiveUiResolver()]})],
})
最后在 Home.vue 中使用，如下：
<script setup>
</script><template><div>我是首頁</div><el-button>我是 element-plus 中的按鈕</el-button><n-button>我是 naive-ui 中的按鈕</n-button>
</template>
效果如下：
Vite vue API 的按需引入
傳統(tǒng)方式使用 API
a）例如我們在 Home.vue 文件中使用 ref 寫了一個計數(shù)器（點擊按鈕，count++）.
<script setup>
import { ref } from 'vue'
const count = ref(1)
const countInc = () => count.value++</script><template><div>我是首頁</div><el-button @click="countInc">{{ count }}</el-button>
</template>
?將來只要用到 vue 中的 API 時就需要 import，也比較麻煩.? 因此我們就可以配置按需引入.
解決辦法（配置按需引入）
GitHub - unplugin/unplugin-auto-import: Auto import APIs on-demand for Vite, Webpack and RollupAuto import APIs on-demand for Vite, Webpack and Rollup - unplugin/unplugin-auto-importhttps://github.com/unplugin/unplugin-auto-import
a）安裝插件
npm i -D unplugin-auto-import
b）在 vite.config.js 中配置插件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver, NaiveUiResolver } from 'unplugin-vue-components/resolvers'
//1.引入 AutoImport
import AutoImport from 'unplugin-auto-import/vite'export default defineConfig({plugins: [vue(),//2.配置到插件中AutoImport({//3.配置需要自動導(dǎo)入的 API 庫imports: ['vue', 'vue-router']}),Components({resolvers: [ElementPlusResolver(), NaiveUiResolver()]})],
})
c）這樣就可以不用在 import 這些 API 了
<script setup>
// import { ref } from 'vue'
const count = ref(1)
const countInc = () => count.value++</script><template><div>我是首頁</div><el-button @click="countInc">{{ count }}</el-button>
</template>