一.搭建一个Vite 项目

兼容性注意

Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

首先安装vite 以下是安装方式

使用 NPM:

$ npm create vite@latest

使用 Yarn:

$ yarn create vite

使用 PNPM:

$ pnpm create vite

第二步通过命令行安装想要的模板

1.个性化模板

通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:

npm create vite@latest my-vue-app --template vue

npm create vite@latest my-vue-app -- --template vue

yarn create vite my-vue-app --template vue

pnpm create vite my-vue-app --template vue

查看 create-vite 以获取每个模板的更多细节：vanilla，vanilla-ts，vue，vue-ts，react，react-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts。

完善项目结构

在src目录下面创建这些文件夹

文件名	用途
api	存放请求相关文件
layout	布局
plugins	插件
composables	组合式 API 抽离方法
router	路由
store	仓储
styles	公共样式
utils	工具函数
views	路由页面

第三方库集成

安装 [vue-router]

npm i vue-router

根目录初始化路由实例

在router文件夹下创建index.ts文件

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

const routes: RouteRecordRaw[] = [
  {
    path: "/",
    name: "home",
    component: () => import("@/view/home/index.vue"),
  },
];

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

export default router;

将路由表注册到main.ts

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";

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

配置路径别名

安装类型依赖

npm i @types/node -D

二、修改vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"), // 路径别名
    },
    extensions: [".js", ".json", ".ts"], // 使用路径别名时想要省略的后缀名，可以自己 增减
  },
  plugins: [vue()],
});

修改tsconfig.json

"compilerOptions": {
        ...
        "baseUrl": ".", // 用于设置解析非相对模块名称的基本目录，相对模块不会受到baseUrl的影响
        "paths": { // 用于设置模块名到基于baseUrl的路径映射
            "@/*": ["src/*"]
        }
        ...
 }

结果：可以加@ 使用啦具体效果看上面路由表信息

引入element plus

官网在这

配置官网有，这里不做过多赘述

用法#

完整引入#

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

Volar 支持#

如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

# 自定义主题颜色，全局修改组件样式

vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";

// https://vitejs.dev/config/
export default defineConfig({
  /* 路径别名 */
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"), // 路径别名
    },
    extensions: [".js", ".json", ".ts"], // 使用路径别名时想要省略的后缀名，可以自己 增减
  },

  /* 修改element-plus主题 */
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/css/elementplus.scss" as *;`,
      },
    },
  },

  plugins: [vue()],
});

src/assets/css/elementplus.scss 文件名称和目录，这个可以自定义，和上面vite配置对上就行。

全局主题色，变量从node_modules，element-plus/theme-chalk/src/common/var.scss这个里边找组件样式覆盖，变量从chrome调试工具里边找，var()包裹的，按照那个来

@use "sass:map";
//全局主题色
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #005BAD,
    ),
    'success': (
      'base': #00A85A,
    ),
    'warning': (
      'base': #F6AD55,
    ),
    'danger': (
      'base': #DC3C3A,
    ),
  )
);
//修改组件样式变量
:root{
  --el-box-shadow-light:0px 0px 8px 0px rgba(0,91,173,0.22);
  
  .el-card{
    --el-card-border-radius:8px;
  }
  .el-table{
    --el-table-header-bg-color:#0E6EB8;
    --el-table-header-text-color:#FFFFFF;
  }
}

集成tailwindcss

安装 tailwindcss 及其对等依赖项，然后生成 tailwind.config.js 和 postcss.config.js 文件。tailwind.config.js

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

将路径添加到 tailwind.config.js 文件中的所有模板文件。

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

将 Tailwind 每个图层的 @tailwind 指令添加到 ./src/index.css 文件中。

@tailwind base;
@tailwind components;
@tailwind utilities;

使用

<template>
  <div class="bg-[teal]">home页面</div>
  <el-button type="primary">去ts专区</el-button>
</template>
<script setup lang="ts"></script>

集成pinia

官网在这

安装pinia

用你喜欢的方式安装pinia

yarn add pinia
or
npm install pinia

注册pinia文件夹

在你的src目录下新建store文件夹，具体目录树如下：

在index文件地下去进行pinia的实例化

import { createPinia } from "pinia";
// 创建pinia实例
const pinia = createPinia();

// 这里默认导出
export default pinia;

回到`main.ts`文件下导出，并注册到全局

...
import pinia from "./store";
app.use(pinia)
...

具体如下：

回到user文件，定义你的第一个state

代码及注释如下：

import { defineStore } from "pinia";

export const useStore = defineStore("user", {
  // 定义全局状态
  state() {
    return {
      token: null, //这里定义token，为后面储存准备
    };
  },

  /* --------它们接收state作为第一个参数---------- */
  /**
   * 取值器
   * 注意vue3取消了对getters的缓存
   * 它们只是您调用的函数。然而，你可以在getter本身中缓存一些结果，这是不常见的，但更高效
   */
  getters: {
    GETTOKEN(state) {
      return state.token;
    },
  },
  /**
   * 存值器
   */
  actions: {
    SETTOKEN(val: any) {
      /* 将传入的value赋值给state状态 */
      this.token = val;
    },
  },
});

export default useStore;

到这里，你的pinia就可以使用了，回到你需要的页面内，

定义两个按钮进行测试：

...
  <el-button type="primary" @click="setPinia">setPinia</el-button>
  <el-button type="primary" @click="getPinia">getPinia</el-button>
...

导入你的state,并进行实例化

import useStore from "@/store/user";

const user = useStore();

分别为两个按钮绑定事件：

...
const setPinia = () => {
  user.SETTOKEN("我是一条token");
};

const getPinia = () => {
  const getToken = user.GETTOKEN;
  console.log(getToken);
};
...

可以看到点击setPinia后再点击getPinia,控制台如下：

# 数据持久化储存

有时候我们需要，将state存储到本地，那我们又不想每次的手动存储

那么我们就可以依赖一个`pinia`的插件 pinia-plugin-persistedstate

用你喜欢的方法安装：

yarn add pinia-plugin-persistedstate

or

npm i pinia-plugin-persistedstate

将它导入并注册到你的/store/index.ts下

import persistedstate from 'pinia-plugin-persistedstate';
...
pinia.use(persistedstate);

并且在你的state状态下将 persist设为 true

...
 // 将会同步当前store中的所有数据到本地存储，依赖 pinia-plugin-persistedstate 插件
  persist: true,

此时再点击那两个按钮，就会在你的本地存储下看到

配置环境变量

1. 环境变量使用场景

区分不同的环境。在Vite中，我们可以使用环境变量来管理不同环境下的配置。

环境变量就是在不同的环境中使用不同的变量值。可以用.env文件来定义环境变量，再通过 import.meta.env来使用定义的环境变量。

Vite支持使用.env文件来配置环境变量，不同的环境可以使用不同的.env文件来管理配置。当做全局变量使用。用来判断是开发或者测试环境，展示不用的页面、按钮等等。

.env指的是文件名而不是后缀名，它是一种放置在Vue根目录下的文件，它的特殊之处在于文件名的约定，我们在启动服务、构建项目时会根据文件的名称来进行匹配，常用的有两种形式： .env 和 .env.[mode]

这里的[mode]是模式的意思，我们可以使用一些自定义的命名方式来命名定义模式，例如有4种不同的环境需要定义，分别是开发、测试、预发、生产，我们就可以定义4中模式

.env.development
.env.test
.env.stage
.env.production

其中 development 和 production 是Vite中的两种默认的模式，当我们通过vite指令在本地启动服务时，会默认加载.env.development中的变量，而通过vite build进行打包时，会默认加载.env.produciton文件中的变量。

当前，也可以通过在指令后面加上--mode 模式名的方式来明确的指定一个环境变量文件进行加载，例如构建测试环境可以通过vite build --mode test来处理。

除此之外，我们在各个环境中的通用配置，可以直接写到以.env命名的文件中，.env文件中的变量在任何模式下都可以加载，但需要注意的是，.env文件下的变量优先级是低于.env.[mode]文件的，也就是说，如果有相同的变量，.env文件中的变量会被覆盖掉。

2. 创建.env文件

首先，我们需要在项目的根目录下创建.env文件。.env文件中可以定义各种环境变量，例如API的地址、端口号等等。以下是一个简单的.env文件示例

NODE_ENV=development
VITE_APP_DEV = 'dev-api'
VITE_APP_URL = 'http://192.168.0.0.1/api'

注意：在vite中环境变量必须以VITE开头

3. 在应用程序中使用环境变量

要在Vite的应用程序中使用环境变量，我们可以使用import.meta.env对象来访问它们。例如，在组件中可以使用以下方式访问VITE_APP_TITLE环境变量：

3.1. 输出结果（开发环境）：

集成iconify

图标库地址在这

iconify是一个矢量图标库，包含使用 Dave Gandy 制作的超过370中矢量字体图标，可以使Android应用开发者免于制作多种适用于不同屏幕大小尺寸的图片，从而提高开发者工作效率。你也可以结合elementui-plus使用，最后感谢antfu大佬提供的vite插件。

下载插件

pnpm add -D unplugin-icons

安装完整集合

pnpm add -D @iconify/json

说明：@iconify/json（~120MB）包括Iconify中的所有图标集，因此您可以安装一次并根据需要使用其中任何图标（只有您实际使用的图标才会捆绑到生产版本中）。

去vite.config.ts 配置如下

...
import Icons from "unplugin-icons/vite";
...

 plugins: [
    vue(),
   
     Icons({
      scale: 1, // 缩放比 相对1em
      autoInstall: true, // 自动安装
      compiler: "vue3", // 编译方式
    }),
  ],

开启使用时自动安装

下载插件依赖

yarn add -D unplugin-vue-components

完整配置如下：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

import Icons from "unplugin-icons/vite";
/* 自动安装组件 */
import IconsResolver from "unplugin-icons/resolver";
import Components from "unplugin-vue-components/vite";

// https://vitejs.dev/config/
export default defineConfig({
 plugins: [
    vue(),
    Components({
      resolvers: [
        IconsResolver({
          // icon的前缀 组件使用{prefix}-{collection}-{icon} eg:i-ep-search
          // enabledCollections:['ep']  这是可选的，默认启用 Iconify 支持的所有集合，ep指的是element_ui的图标库
          // alias: { park: 'icon-park' } 集合的别名
          prefix: "i",
        }),
      ],
    }),
    Icons({
      scale: 1, // 缩放比 相对1em
      autoInstall: true, // 自动安装
      compiler: "vue3", // 编译方式
    }),
  ],
});

使用

记得加前缀 i-

 <el-button type="primary" @click="setPinia">
      <i-carbon-accessibility />
      setPinia
 </el-button>
 <el-button type="primary" @click="getPinia">
     <i-flat-color-icons:like />
      getPinia
 </el-button>

效果图

在项目中使用jsx/tsx

相信 react 的伙伴对于 jsx/tsx 都不陌生吧，现在在 vue3 中也可以使用 jsx/tsx 语法拉。

安装插件（@vitejs/plugin-vue-jsx）

vite官方提供了官方的插件来支持在vue3中使用jsx/tsx，直接安装就行。

js
复制代码
yarn add @vitejs/plugin-vue-jsx -D
复制代码

安装完之后在vite.config.ts中插入一下代码

js
复制代码
import vueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig({
  plugins: [
    vueJsx(),
  ]
})

复制代码

配置完就可以在项目中使用jsx/tsx啦

vite + vue3 + ts及相关配置搭建企业级项目