后台项目

一、项目初始化

1.命令行创建vue3项目

使用命令行pnpm creat vue@latest创建vue3项目

然后根据提示选择自己想要的项目配置就创建好了。

2.配置环境变量

新建.env.development 和.env.production 文件。配置开发和生产环境对应的端口和接口地址等信息。环境变量要以VITE_开头。例如:

javascript

# 应用端口
VITE_APP_PORT=3000

# 代理前缀
VITE_APP_BASE_API=/dev-api

# 接口地址
VITE_APP_API_URL=https://api.youlai.tech # 线上
# VITE_APP_API_URL=http://localhost:8989 # 本地

# WebSocket端点
VITE_APP_WS_ENDPOINT=wss://api.youlai.tech/ws  # 线上
# VITE_APP_WS_ENDPOINT=ws://localhost:8989/ws  # 本地

# 是否启用 Mock 服务
VITE_MOCK_DEV_SERVER=false

一般是在vite.config.ts 获取使用。vite给我们提供了loadEnv(mode: string,envDir: string,prefixes: string | string[] = 'VITE_')方法加载 envDir 中的 .env 文件。默认情况下只有前缀为 VITE_ 会被加载，除非更改了 prefixes 配置。例如以下服务器配置:

process.cwd() 方法返回 Node.js 进程的当前工作目录。

typescript

import { defineConfig, loadEnv, ConfigEnv, UserConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
  const env = loadEnv(mode, process.cwd())
  return {
    // 服务器配置
    server: {
      port: Number(env.VITE_APP_PORT),
      proxy: {
        // 用环境变量里面的
        [env.VITE_APP_BASE_API]: {
          target: env.VITE_APP_API_URL,
          changeOrigin: true
        }
      }
    }
  }
})

3.使用UnoCSS

vue项目中安装以及配置参考：

https://unocss.nodejs.cn/integrations/vite

https://unocss.nodejs.cn/guide/config-file

注意点：

按照以上步骤安装unocss并引入presetIcons 后，还需要安装配置对应的图标包才能使用。

powershell

pnpm add -D @iconify-json/[the-collection-you-want]

pnpm add -D @iconify/json是一次性导入Iconify上所有图标集。但是比较大下载较慢，可以在下面两个网站选择合适的图标集，选择性的下载。

1. https://icones.js.org/ 这个网站的图标用法，例如:

markdown

#安装
pnpm add -D @iconify-json/quill

https://icon-sets.iconify.design/.例如：

markdown

#安装
pnpm add -D @iconify-json/ep

unocss图标使用规则：

markdown

<prefix><collection>-<icon>

<prefix><collection>:<icon>

#例如
<div class="i-quill-arrow-down"></div>
<div class="i-ep:add-location w-1em h-1em"></div>

前缀prefix我们也可以在vite配置文件中修改设置。更多细节参考unocss官网。

在vscode中，可以配合unocss插件使用。

4.引入element plus

4.1自动引入

unplugin-auto-import自动导入api，unplugin-vue-components 自动引入组件。

powershell

pnpm install element-plus

pnpm install -D unplugin-vue-components unplugin-auto-import

4.2 配置

typescript

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({
    // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ["vue", "pinia", "vue-router"],
    //解析器
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

AutoImport与Components下更多配置可参考github。

4.3 引入图标

1. 传统的方式

powershell


pnpm install @element-plus/icons-vue

然后在main.ts中导入所有图标并进行全局注册。也可以不全局注册，在单个组件中使用的时候再导入使用。

2. 使用自动引入

安装 unplugin-icons，用来将数千个图标作为组件访问。也与unplugin-auto-import 结合使用。

然后再vite配置文件中设置。

typescript

import { fileURLToPath, URL } from 'node:url'
import { defineConfig, ConfigEnv, UserConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite' //自动导入api
import Components from 'unplugin-vue-components/vite' //自动导入组件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import IconsResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
  return {
    plugins: [
      vue(),
      AutoImport({
        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
        imports: ['vue', 'pinia', 'vue-router'],
        resolvers: [
          ElementPlusResolver(),
          // 自动导入图标组件
          IconsResolver({
            prefix: 'Icon'
          })
        ],
        // 是否在 vue 模板中自动导入
        vueTemplate: true,
        // 指定自动导入函数TS类型声明文件路径
        dts: fileURLToPath(new URL('./types/auto-imports.d.ts', import.meta.url))
      }),
      Components({
        resolvers: [
          // 自动注册图标组件
          IconsResolver({
            enabledCollections: ['ep']
          }),
          ElementPlusResolver()
        ],
        // 指定自动导入组件TS类型声明文件路径
        dts: fileURLToPath(new URL('./types/components.d.ts', import.meta.url))
      }),
      Icons({
        autoInstall: true//在enabledCollections中填入图标集名称后将会自动安装
      })
    ],
  }
})

使用案例

vue


<el-button type="primary"><i-ep-delete />删除</el-button>

完整配置可以参考https://github.com/sxzz/element-plus-best-practices/blob/db2dfc983ccda5570033a0ac608a1bd9d9a7f658/vite.config.ts

5.引入sass

1.安装依赖

powershell


pnpm install -D sass

vite内置对sass语法的解析，暂时不需要安装sass-loader.

2.变量使用

我们可以单独新建一个存放变量的sass文件。例如variable.scss.

sass

$theme-color: green;
.test {
  background-color: pink;
}

1.全局使用

在vite中，我们可以在vite.config.ts文件的css选项中配置。

typescript

export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
  const env = loadEnv(mode, process.cwd())
  return {
    css: {
      // CSS 预处理器
      preprocessorOptions: {
        // 定义全局 SCSS 变量
        scss: {
          javascriptEnabled: true,
          additionalData: `@import "@/styles/variables.scss";`,
        }
      }
    }
  }
})

然后我们就可以在其他文件中直接使用变量。并且variable.scss中书写的样式可以全局使用并且生效的。

vue

<style lang="scss" scoped>
div{
  background-color: $theme-color;
}
</style>

2.单独引入使用

如果我们不使用vite配置文件这种方式，可以单独引入然后使用变量。

vue

<style lang="scss" scoped>
@import '@/styles/variables.scss';
div{
  background-color: $theme-color;
}
</style>

我试过了直接main.ts中引入变量文件，变量无法使用。

3.在js中获取变量

新建variables.module.scss文件，使用:export{}语法用来导出变量。(通过搜索知道:export{}属于css module语法，但具体文档描述我暂时没找到)。如果我们在vite.config.ts中已经全局配置引入了variables.scss文件，在variables.module.scss文件中直接使用$theme-color赋值即可。若没有，需要在variables.module.scss文件的顶部先引入变量文件@import '@/styles/variables.scss'; 。

sass

:export {
  themeColor: $theme-color;
}

然后我们在vue文件中使用。

typescript

<script setup lang="ts">
  import { RouterLink, RouterView } from 'vue-router'
  import HelloWorld from './components/HelloWorld.vue'
  import variables from '@/styles/variables.module.scss'
  console.log(variables.themeColor)//green
</script>
<template>
  <span :style="`color:${variables.themeColor}`">我是绿色的字</span>
</template>

然后就可以正常使用了。

4.其他

如果运行警告：

Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0. More info: https://sass-lang.com/d/legacy-js-api

可以在vite中添加配置项api: 'modern-compiler'。指定使用 sass API。

javascript

export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
  const env = loadEnv(mode, process.cwd())
  return {
    css: {
      // CSS 预处理器
      preprocessorOptions: {
        // 定义全局 SCSS 变量
        scss: {
          javascriptEnabled: true,
          additionalData: `@import "@/styles/variables.scss";`,
          api: 'modern-compiler'
        }
      }
    }
  }
})

另外的解决方法参考：https://cn.vitejs.dev/config/shared-options.html#css-preprocessoroptions

6.axios配置封装

安装axios 。首先我们要创建实例，配置axios，然后做请求拦截和响应拦截，统一处理错误

环境变量获取问题：https://vitejs.cn/vite3-cn/guide/env-and-mode.html#env-variables

vue3+ts商城项目

基础知识

组件使用

vue

后台项目

目录

一、项目初始化

1.命令行创建vue3项目

2.配置环境变量

3.使用UnoCSS

4.引入element plus

4.1自动引入

4.2 配置

4.3 引入图标

1. 传统的方式

2. 使用自动引入

5.引入sass

1.安装依赖

2.变量使用

1.全局使用

2.单独引入使用

3.在js中获取变量

4.其他

6.axios配置封装

7.动态路由

组件使用

后台项目 ​

目录 ​

一、项目初始化 ​

1.命令行创建vue3项目 ​

2.配置环境变量 ​

3.使用UnoCSS ​

4.引入element plus ​

4.1自动引入 ​

4.2 配置 ​

4.3 引入图标 ​

1. 传统的方式 ​

2. 使用自动引入 ​

5.引入sass ​

1.安装依赖 ​

2.变量使用 ​

1.全局使用 ​

2.单独引入使用 ​

3.在js中获取变量 ​

4.其他 ​

6.axios配置封装 ​

7.动态路由 ​

后台项目

目录

一、项目初始化

1.命令行创建vue3项目

2.配置环境变量

3.使用UnoCSS

4.引入element plus

4.1自动引入

4.2 配置

4.3 引入图标

1. 传统的方式

2. 使用自动引入

5.引入sass

1.安装依赖

2.变量使用

1.全局使用

2.单独引入使用

3.在js中获取变量

4.其他

6.axios配置封装

7.动态路由