參考視頻
1.使用npm搭建vite項(xiàng)目,會(huì)自動(dòng)搭建vue3項(xiàng)目
npm create vite@latest
yarn create vite
2.手動(dòng)搭建vue3項(xiàng)目
- 創(chuàng)建一個(gè)項(xiàng)目名稱的文件夾
- 執(zhí)行命令：npm init -y 快速的創(chuàng)建一個(gè)默認(rèn)的包信息
- 安裝vite: npm i vite -D
-D開(kāi)發(fā)環(huán)境的依賴
- 安裝vue,現(xiàn)在默認(rèn)是vue3. 執(zhí)行命令: npm i vue -D/-S都可以
- 創(chuàng)建index.html文件，src=“入口js文件” ，添加id="app"掛載點(diǎn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./src/main.js"></script>
</body>
</html>
- 創(chuàng)建src目錄下的js入口文件main.js
- 創(chuàng)建App.vue組件，并定義路由出口
<template>
<router-view /> <!-- 定義路由出口 -->
</template>
- 在main.js文件中引入App.vue文件
import { createApp } from "vue";
import App from './App.vue';
const app = createApp(App);
app.mount('#app');
-
由于html文件中不能跑App.vue文件，需要安裝一個(gè)插件：執(zhí)行命令 npm i @vitejs/plugin-vue -D ,如果npm run dev不報(bào)錯(cuò)不需要安裝
-
配置vite.config.js文件，如果npm run dev不報(bào)錯(cuò)不需要配置以下代碼
import { defineConfig } from "vite";
import Vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [Vue()]
})
3.在vite+vue3項(xiàng)目中使用vue-router和pinia
- 安裝vue-router,執(zhí)行命令： npm i vue-router -D
- src目錄下創(chuàng)建router.js文件
import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
routes: [],
history: createWebHistory()
})
export default router;
然后需要在入口js文件中掛載路由
入口main.js文件中
import { createApp } from "vue";
import App from './App.vue';
import router from './modules/router.js'; // 導(dǎo)入路由
const app = createApp(App);
app.use(router); // ----掛載路由----
app.mount('#app');
- 安裝pinia 執(zhí)行命令: npm i pinia -D
- 創(chuàng)建pinia.js文件
import { createPinia } from "pinia";
const pinia = createPinia();
export default pinia;
還需要在入口main.js文件中掛載使用pinia
import { createApp } from "vue";
import App from './App.vue';
import router from './modules/router.js';
import pinia from './modules/pinia.js'; // 引入pinia
const app = createApp(App);
app.use(router);
app.use(pinia); // ------掛載pinia------
app.mount('#app');
- 使用pinia
先創(chuàng)建一個(gè)store/counter.js文件
import { defineStore } from "pinia";
// defineStore第一個(gè)參數(shù)是它的id,
export const useCounterStore = defineStore('counter', {
state() {
return {
num: 1, // 初始值為1
}
},
actions: {
// 只有actions了
inc() {
this.num++;
}
}
})
然后在需要使用的組件里使用
<script setup>
import { useCounterStore } from "../stores/counter.js";
const counter = useCounterStore();
</script>
<template>
<div @click="counter.inc()">我是首頁(yè) {{ counter.num }}</div>
</template>
4.vite+vue3中使用按需加載
- 為了解決在一個(gè)文件中引入多個(gè)組件，安裝插件:unplugin-vue-components
npm i unplugin-vue-components -D
在vite.config.js文件中配置插件
import { defineConfig } from "vite";
import Vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite'; // 導(dǎo)入插件
export default defineConfig({
plugins: [Vue(), Components()] // -----掛載插件------
})
在需要使用的組件中：
<script setup>
// 安裝了unplugin-vue-components插件后，components中的組件可以不用引入直接使用
// import Common from "../components/Common.vue";
</script>
<template>
我是about頁(yè)面
<Common />
</template>
- 在element-plus中使用按需加載
在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'; // 配置element-plus, naiveUi
export default defineConfig({
plugins: [Vue(), Components({
resolvers: [ElementPlusResolver(), NaiveUiResolver()]
})]
})
還需再安裝element-plus:執(zhí)行命令： npm i element-plus -D然后就可以再組件中使用點(diǎn)擊一下 element-plusUI了
<el-button>element-plus按鈕</el-button>
如果上面配置了NaiveUiResolver,則需要安裝naive-ui,執(zhí)行命令:npm i naive-ui -D
在組件中使用naive-ui會(huì)自動(dòng)尋找依賴，不需要配置這些組件庫(kù)直接用就好了
<n-button>naive-ui按鈕</n-button>
- 安裝unplugin-auto-import插件可以不用import { ref } from ‘vue’;
npm i -D unplugin-auto-import
在vite.config.js文件中掛載插件文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-697442.html
import { defineConfig } from "vite";
import Vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import AutoImport from "unplugin-auto-import/vite";
import { ElementPlusResolver, NaiveUiResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
plugins: [
Vue(),
AutoImport({
imports: ['vue', 'vue-router', 'pinia']
}), // -------掛載插件-------需要imports值
Components({
resolvers: [ElementPlusResolver(), NaiveUiResolver()]
})]
})
在組件中使用：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-697442.html
<script setup>
// import { ref } from "vue"; // 安裝了插件后可以不用在導(dǎo)入ref
const counter = ref(100);
const inc = () => {
counter.value ++;
}
</script>
<template>
<div @click="inc">Common組件{{counter}}</div>
</template>
到了這里，關(guān)于vite搭建vue3項(xiàng)目的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
