参考视频
npm create vite@latest
yarn create vite
<!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>
<template>
<router-view /> <!-- 定义路由出口 -->
</template>
import { createApp } from "vue";
import App from './App.vue';
const app = createApp(App);
app.mount('#app');
由于html文件中不能跑App.vue文件,需要安装一个插件:执行命令 npm i @vitejs/plugin-vue -D ,如果npm run dev不报错不需要安装
配置vite.config.js文件,如果npm run dev不报错不需要配置以下代码
import { defineConfig } from "vite";
import Vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [Vue()]
})
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'; // 导入路由
const app = createApp(App);
app.use(router); // ----挂载路由----
app.mount('#app');
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');
import { defineStore } from "pinia";
// defineStore第一个参数是它的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()">我是首页 {{ counter.num }}</div>
</template>
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'; // 导入插件
export default defineConfig({
plugins: [Vue(), Components()] // -----挂载插件------
})
在需要使用的组件中:
<script setup>
// 安装了unplugin-vue-components插件后,components中的组件可以不用引入直接使用
// import Common from "../components/Common.vue";
</script>
<template>
我是about页面
<Common />
</template>
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:执行命令: npm i element-plus -D然后就可以再组件中使用点击一下 element-plusUI了
<el-button>element-plus按钮</el-button>
如果上面配置了NaiveUiResolver,则需要安装naive-ui,执行命令:npm i naive-ui -D
在组件中使用naive-ui会自动寻找依赖,不需要配置这些组件库直接用就好了
<n-button>naive-ui按钮</n-button>
npm i -D unplugin-auto-import
在vite.config.js文件中挂载插件
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()]
})]
})
在组件中使用:
<script setup>
// import { ref } from "vue"; // 安装了插件后可以不用在导入ref
const counter = ref(100);
const inc = () => {
counter.value ++;
}
</script>
<template>
<div @click="inc">Common组件{{counter}}</div>
</template>