从0到1，搭建vue3项目

将vite.config.js文件中的Components修改为如下形式：

 Components({resolvers: [// 配置Element Plus采用saas样式配色系统ElementPlusResolver({ importStyle: 'sass' }),],})

2自动导入定制化样式文件进行样式覆盖

export default defineConfig(({ command, mode }) => {// ...return {//...css: {preprocessorOptions: {scss: {// 按需导入自定义主题additionalData: `@use "@/styles/themeVar.scss" as *;`}}},}
})

5.4 测试

修改配置后，执行npm run dev重启，info按钮的主题色修改为绿色了：

六reset.scss  整合到vue3中

测试：

reset.scss

*,
*::before,
*::after {box-sizing: border-box;margin: 0;font-weight: normal;
}html {box-sizing: border-box;width: 100%;height: 100%;line-height: 1.5;tab-size: 4;text-size-adjust: 100%;
}body {width: 100%;height: 100%;margin: 0;font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB","Microsoft YaHei", "微软雅黑", Arial, sans-serif;line-height: inherit;-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;text-rendering: optimizelegibility;
}html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font: inherit;vertical-align: baseline;box-sizing: border-box; /* Ensure padding and borders are included in element sizes */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;
}
body {line-height: 1;
}
ol, ul {list-style: none;
}
blockquote, q {quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {content: none;
}
table {border-collapse: collapse;border-spacing: 0;
}
/* 使表格兼容safari，不错位 */
.el-table__body {width: 100%;table-layout: fixed;
}

七 整合svg

通过 vite-plugin-svg-icons 插件整合 Iconfont 第三方图标库实现本地图标

八整合 Pinia

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。

参考：Pinia 官方文档

8.1安装依赖

npm install pinia
npm install pinia-plugin-persistedstate // 持久化插件

8.2 数据持久化

import { createPinia } from "pinia"
import piniaPluginPersistedstate from "pinia-plugin-persistedstate"const pinia = createPinia()
pinia.use(piniaPluginPersistedstate) // 数据持久化export default pinia

8.3main.ts 引入 pinia

// src/main.ts
import { createPinia } from "pinia";
import App from "./App.vue";createApp(App).use(createPinia()).mount("#app");

8.3定义 Store

根据 Pinia 官方文档-核心概念 描述 ，Store 定义分为选项式和组合式 , 先比较下两种写法的区别：

至于如何选择，官方给出的建议 ：选择你觉得最舒服的那一个就好 。

这里选择组合式，新建文件 src/store/counter.ts

// src/store/counter.ts
import { defineStore } from "pinia"export const useCounterStore = defineStore("counter",() => {const count = ref(0)const doubleCount = computed(() => count.value * 2)function increment() {count.value++}function decrement() {count.value--}return {count,doubleCount,increment,decrement}},{persist: {// 不需要持久化，配置项 persist: falseenabled: false,storage: sessionStorage, // 可以是 localStorage, sessionStorage 或 window.localStoragekey: "counter_key" // 状态的键名}}
)

父组件

<!-- src/App.vue -->
<script setup lang="ts">
import HelloWorld from "@/components/HelloWorld.vue";import { useCounterStore } from "@/stores/counter.ts";
const counterStore = useCounterStore();
</script><template><h1 class="text-3xl">vue3-element-admin-父组件</h1><el-button type="primary" @click="counterStore.increment">count++</el-button><HelloWorld />
</template>

子组件

<!-- src/components/HelloWorld.vue -->
<script setup lang="ts">
import { useCounterStore } from "@/stores/counter.ts";
const counterStore = useCounterStore();
</script><template><el-card  class="text-left text-white border-white border-1 border-solid mt-10 bg-[#242424]" ><template #header> 子组件 HelloWorld.vue</template><el-form><el-form-item label="数字："> {{ counterStore.count }}</el-form-item><el-form-item label="加倍："> {{ counterStore.double }}</el-form-item></el-form></el-card>
</template>

效果预览

九环境变量

Vite 环境变量主要是为了区分开发、测试、生产等环境的变量 

 参考： Vite 环境变量配置官方文档

env配置文件

项目根目录新建 .env.development 、.env.production

• 开发环境变量配置：.env.development

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
VITE_APP_TITLE = 'vue3-element-admin'
VITE_APP_PORT = 3000
VITE_APP_BASE_API = '/dev-api'

• 生产环境变量配置：.env.production

VITE_APP_TITLE = 'vue3-element-admin'
VITE_APP_PORT = 3000
VITE_APP_BASE_API = '/prod-api'

十反向代理解决跨域

跨域原理

浏览器同源策略: 协议、域名和端口都相同是同源，浏览器会限制非同源请求读取响应结果。

本地开发环境通过 Vite 配置反向代理解决浏览器跨域问题，生产环境则是通过 nginx 配置反向代理 。

vite.config.ts 配置代理

表面肉眼看到的请求地址: http://localhost:3000/dev-api/api/v1/users/me

真实访问的代理目标地址: http://vapi.youlai.tech/api/v1/users/me

十一 vue-router 静态路由

11.1安装 vue-router

npm install vue-router@next

 11.2全局注册路由实例 

// main.ts
import router from "@/router";app.use(router).mount('#app')

11.3路由实例

•  views中创建DemoView.vue。Home

•  创建路由实例

import { createRouter, createWebHistory } from "vue-router"
import HomeView from "@/views/HomeView.vue"const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: "/",name: "home",component: HomeView},{path: "/demo",name: "demo",// route level code-splitting// this generates a separate chunk (About.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import("../views/DemoView.vue")}]
})export default router

11.4测试

src/App.vue

<script setup lang="ts">
onMounted(() => {console.log("hello world1");
});
</script><template><el-config-provider :locale="zhCn"><header><div class="wrapper"><nav><RouterLink to="/">Home</RouterLink> <span>|</span><RouterLink to="/demo">demo</RouterLink></nav></div></header><RouterView /></el-config-provider>
</template><style scoped></style>