Vue3 + Vite+ Element-Plus + TypeScript 搭建系统

Vue3+Vite+Element-Plus+TS搭建系统实践

原创

已于 2023-12-24 21:37:25 修改 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #javascript #前端

于 2023-12-04 23:08:44 首次发布

本文介绍了如何使用Vue3、Vite、Element-Plus和TypeScript搭建一个前端项目，包括项目初始化、配置别名、按需引入组件、整合SVG图标、Pinia状态管理、环境变量、跨域处理、Axios请求库以及国际化设置等关键步骤，详细讲解了每个环节的实现方法和注意事项。

文章目录

项目预览

环境准备

	名称	备注
开发工具	vscode	版本: 1.84.2（可使用其他版本）
开发环境	node	node版本: v16.6.1（可使用其他版本）

项目开发

1. 项目初始化

项目使用vite，按照 ❤ vite官网项目初始化说明，执行以下步骤：

npm init vite@latest blog-system --template vue-ts

blog-system: 自定义的项目名称
vue-ts: vue + typescript 模板的标识，查看create-vite来获取每个模板的更多细节：vanilla，vanilla-ts, vue, vue-ts，react，react-ts，react-swc，react-swc-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts，solid，solid-ts，qwik，qwik-ts

项目初始化完成后，进入项目，安装依赖后启动：

  cd blog-system
  npm install
  npm run dev

项目预览：
在这里插入图片描述
项目目录：

2. src路径设置别名

相对路径别名配置，使用 @ 代替 src

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

const pathSrc = path.resolve(__dirname, "src");

// https://vitejs.dev/config/
export default defineConfig({
   
   
  plugins: [vue()],
  resolve: {
   
   
    alias: {
   
   
      "@": pathSrc,
    },
  },
});

import path from ‘path’
编译器报错: TS2307: Cannot find module ‘path’ or its corresponding type declarations.

npm install @types/node --save-dev

使用：

<script setup lang="ts">
// import HelloWorld from "./components/HelloWorld.vue"; 
import HelloWorld from "@/components/HelloWorld.vue";
</script>

3. unplugin按需引入

Element Plus 官方文档中推荐按需自动导入的方式，首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件。

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

插件名	概念	自动导入对象
unplugin-auto-import	按需自动导入API	ref，reactive,watch,computed 等API
unplugin-auto-import	按需自动导入组件	Element Plus 等三方库和指定目录下的自定义组件

vite.config.ts设置配置

import {
   
    defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";

const pathSrc = path.resolve(__dirname, "src");

// https://vitejs.dev/config/
export default defineConfig({
   
   
  plugins: [
    vue(),
    AutoImport({
   
   
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ["vue"],
      eslintrc: {
   
   
        enabled: true, // 是否自动生成 eslint 规则，建议生成之后设置 false
        filepath: "./.eslintrc-auto-import.json", // 指定自动导入函数 eslint 规则的文件
      },
      dts: path.resolve(pathSrc, "types", "auto-imports.d.ts"), // 指定自动导入函数TS类型声明文件路径
    }),
    Components({
   
   
      dts: path.resolve(pathSrc, "types", "components.d.ts"), // 指定自动导入组件TS类型声明文件路径
    }),
  ],
  resolve: {
   
   
    alias: {
   
   
      "@": pathSrc,
    },
  },
});

.eslintrc.cjs - 自动导入函数 eslint 规则引入（后续添加eslint时）

"extends": [
    "./.eslintrc-auto-import.json"
],

tsconfig.json - 自动导入TS类型声明文件引入

{
   
   
  "include": ["src/**/*.d.ts"]
}

效果：
在这里插入图片描述

4. 引入Element UI Plus

npm install element-plus --save

修改vite.config.ts，
加入resolvers: [ElementPlusResolver()],

// https://vitejs.dev/config/
export default defineConfig({
   
   
  plugins: [
    vue(),
    AutoImport({
   
   
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ["vue"],
      eslintrc: {
   
   
        enabled: true, // 是否自动生成 eslint 规则，建议生成之后设置 false
        filepath: "./.eslintrc-auto-import.json", // 指定自动导入函数 eslint 规则的文件
      },
      // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
      dts: path.resolve(pathSrc, "types", "auto-imports.d.ts"), // 指定自动导入函数TS类型声明文件路径
      // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
      resolvers: [ElementPlusResolver()],
    }),
    Components({
   
   
      // 自动导入 Element Plus 组件
      resolvers: [ElementPlusResolver()],
      dts: path.resolve(pathSrc, "types", "components.d.ts"), // 指定自动导入组件TS类型声明文件路径
    }),
  ],
  resolve: {
   
   
    alias: {
   
   
      "@": pathSrc,
    },
  },
});

项目中使用组件和提示信息（无需再次引入）

<script setup lang="ts">
ElMessage({
     
     
  message: h("p", null, [
    h("span", null, "Message can be "),
    h("i", {
     
      style: "color: teal" }, "VNode"),
  ]),
});
</script>

<template>
  <div>
    <el-input placeholder="Please input" />
  </div>
</template>

<style scoped>
</style>

5. 整合svg图标（iconfont）

iconfont官网

5.1 icon单个使用

创建账号并登陆
下载文件到本地
引入静态图片到项目中

<img src="图片路径" />

5.2 unicode 引用

unicode是字体在网页端最原始的应用方式，特点是：

兼容性最好，支持ie6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。
但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

选择图标进入购物车，后进入自己的管理页面
iconfont管理

点击在线链接，生成unicode引入代码
新建/src/styles/iconfont.scss, 在index.scss中引入
再在iconfont.scss中定义iconfont的样式

.iconfont {
   
   
  font-family: "iconfont" !important;
  font-size: 1.2rem;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

复制内容到项目

    <i class="iconfont">&#xe6a8;</i>
    <p>使用元素不限制i，div，span等标签都可以</p>
    <p>在iconfont.scss中定义iconfont的样式, 我们需要使用这个样式，所以需要加上这个class</p>
    <p>复制的代码放在标签中间</p>

显示

5.3 font-class 引用

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

与unicode使用方式相比，具有如下特点：

兼容性良好，支持ie8+，及所有现代浏览器。

相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
不过因为本质上还是使用的字体，所以多色图标还是不支持的。

点击在线链接，生成css引入代码

2.在index.scss中引入
使用

    <i class="iconfont icon-lianxiwomen"></i>

在这里插入图片描述

5.3 Sysmbol引用

Sysmbol引入支持颜色

点击在线链接，生成Sysmbol

2.在main.ts中引入
在这里插入图片描述

svg组件封装

<!-- src/components/SvgIcon/index.vue -->
<script setup lang="ts">
const props = defineProps({
   
   
  prefix: {
   
   
    type: String,
    default: "icon",
  },
  iconClass: {
   
   
    type: String,
    required: false,
  },
  color: {
   
   
    type: String,
  },
  size: {
   
   
    type: String,
    default: "1em",
  },
});

const symbolId = computed(() => `#${
     
     props.prefix}-${
     
     props.iconClass}`);
</script>

<template>
  <svg
    aria-hidden="true"
    class="svg-icon"
    :style="'width:' + size +

最低0.47元/天解锁文章