前言

由于需要为github上某个组织量身定制一个专属的宣传网站，因此独立搭建了一个vue3项目，使用并且学习到了一些比较新的技术，在这里分享一下搭建过程。项目全程使用yarn，为了保险一些。

兼容性注意：Vite需要 Node.js 版本 14.18+，16+，我这里只使用了14.18.0，但有些模板需要依赖更高的 Node 版本才能正常运行，当包管理器发出警告时，注意升级Node版本。

1. 搭建项目

使用vite初始化vite+vue+ts的项目，在vscode一个空文件夹的终端输入

yarn create @vitejs/app <project-name>

初始化过程中出现Select a framework 这一行，为选择框架的名字，这里选择 vue，出现Select a variant 这一行，为选择是否使用TypeScript，这里选择vue-ts。
接着，完成初始化，按照提供的命令行，进入项目，安装依赖：

cd  <project-name>

yarn

运行项目

yarn dev

出现 Local: http://127.0.0.1:5173/ ，则运行成功。

2. 路由配置

安装vue-router

yarn add vue-router@4

在src下新建router文件夹，作为vue-router的配置目录。此目录下再新建index.ts文件，编辑内容如下：

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";

// 配置路由信息
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Home",
    component: () => import("../views/Home.vue"),
  },
  {
    path: "/about",
    name: "About",
    component: () =>import("../views/About.vue"),
}
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router

在src下新建一个views文件夹，作为项目界面开发目录。参考router中的配置可知，在views目录下新建home目录并新建About.vue，编辑文件如下：

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "About",
  data() {
    return {
      msg: "Hello Vue 3.0 + Vite!",
    };
  },
  setup() {},
});
</script>

在main.ts中引入vue-router

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
 
const app = createApp(App);
app.use(router).mount("#app");

在App.vue中使用vue-router

<template>
  <div>
    <router-view />
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: "Home",
  setup() {
    return {};
  },
});
</script>
  
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

路由配置完成

3.Element Plus按需引入

由于需要项目轻量，内存较小，因此使用按需引入中的自动导入，是官网推荐的做法。

安装ElementPlus组件库和导入组件插件

yarn add element-plus -S

yarn add -D unplugin-vue-components unplugin-auto-import

-S 等同于--save，保存在package.json文件中，是在dependencies（生产环境）下，是项目运行时的依赖，就是程序上线后仍需要的依赖；

-D 等同于--save-dev，也保存在package.json文件中，是在devDependencies（开发环境）下，是只在开发中需要的依赖，上线后不需要。

在 vite.config.ts 文件中添加如下代码(和 src 目录平级)

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

局部引入icon 图标，需要单独安装

yarn add @element-plus/icons-vue -S

在main.ts中加入

import { PictureRounded, Message } from "@element-plus/icons-vue";

// 全局注册图标
app.component("PictureRounded", PictureRounded);
app.component("Message", Message);

4. Element Plus自定义主题色

默认的蓝色太大众了，为了官网的美观，和开发的方便，换了个紫色的主题色。

项目使用了 SCSS，可以直接修改 Element Plus 的样式变量。这里举例 light.scss 文件内容：

// 拓展：在sass中，@forward 相当于中转站，通过@forward引入scss文件并将引入scss文件中的变量、混合、函数等抛出，当其他scss文件用@use引入此模块时可使用，一般在开源项目中使用较多；
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": #747bff,
    ),
  ),
  $fill-color: (
    'blank': #f9fafc,
  ),
  $bg-color:(
    '': #f9fafc,
  ),
  $text-color: (
    // "primary": #424242,
    "regular": #3c3c43eb,
  )
);

项目在按需导入时自定义主题，因此在vite.config.ts文件中，需要使用 scss.additionalData 来编译所有应用 scss 变量的组件。

import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 你也可以使用 unplugin-vue-components
// import Components from 'unplugin-vue-components/vite'
// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// 或者使用 unplugin-element-plus
import ElementPlus from 'unplugin-element-plus/vite'

// vite.config.ts
export default defineConfig({
  resolve: {
    alias: {
      '~/': `${path.resolve(__dirname, 'src')}/`,
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "~/styles/element/light.scss" as *;`,
      },
    },
  },
  plugins: [
    vue(),
    // use unplugin-vue-components
    // Components({
    //   resolvers: [
    //     ElementPlusResolver({
    //       importStyle: "sass",
    //       // directives: true,
    //       // version: "2.1.5",
    //     }),
    //   ],
    // }),
    // 或者使用 unplugin-element-plus
    ElementPlus({
      useSource: true,
    }),
  ],
})

完整的代码文件：github.com/Mangomilkhh…

具体可参考官网链接：element-plus.org/zh-CN/guide…

5. Element Plus增加暗黑模式切换

暗黑模式，官方推荐使用 useDark，可以自行实现切换

1.在src/styles/文件夹下创建 dark.scss;

@forward "element-plus/theme-chalk/src/dark/var.scss" with (
  $colors:(
           //这里定义在暗黑模式下 primary 的颜色，其他同理
          "primary": ("base": green),
  )
);
 
@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;

2.在mian.ts 中引入 dark.scss;

import "~/styles/dark.scss";

3.在App.vue 中，引入usedark方法；

<template>
  <div>
    <span @click.stop="toggleDark()">暗黑模式</span>
    <el-switch size="small" v-model="isDark" />
  </div>
</template>
<script setup lang="ts">
import { useDark, useToggle } from '@vueuse/core'
 
const isDark = useDark()
const toggleDark = useToggle(isDark)   
  
</script>

原文链接：blog.csdn.net/gsy44556677…

（@use、@forward用法）

6. Vue 3中使用Less

yarn add less less-loader

blog.csdn.net/weixin_4357…

7. 增加国际化

element-plus.org/zh-CN/guide…

注意⚠

- 修改打印地址为localhost

vite升级到3或以上，打印地址将不再是localhost，而是127.0.0.1，vite.config.js中设置 dns.setDefaultResultOrder('verbatim')即可解决。

参考链接：juejin.cn/post/720063…

- 配置vite别名（@代替src）

在vue开发时，我们习惯用~或者@代替src，但是vite默认是不识别src的，所以需要配置别名

下载@types/node包

yarn add @types/node --save-dev（或npm i @types/node --save-dev）

再配置vite.config.ts。

 
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' // 引入resolve
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  ...
// 配置resolve
  resolve:{
    alias:[
      {
        find:'@',
        replacement:resolve(__dirname,'src')
      }
    ]
  }

配置tsconfig.json （如果创建项目时选的时js，则没有这个文件，可以跳过此配置）

{
  "compilerOptions": {
    "target": "ESNext",
    ...
    "noEmit": true,
    // 配置以下代码
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

参考链接： blog.csdn.net/Capture_ter…

项目要用rem单位才方便适配各种分辨率桌面。

后面也可以卸载less，都用scss

8. 项目源码地址

github.com/Mangomilkhh…

Vue 3 + Element Plus + Vite+ TypeScript搭建专属网站最全教程

前言