从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: false
      enabled: false,
      storage: sessionStorage, // 可以是 localStorage, sessionStorage 或 window.localStorage
      key: "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>