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

项目预览

环境准备

	名称	备注
开发工具	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单个使用

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

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

5.2 unicode 引用

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

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

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

1. 点击在线链接，生成unicode引入代码
   
2. 新建/src/styles/iconfont.scss, 在index.scss中引入
   
3. 再在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;
}

4. 复制内容到项目
   

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

5. 显示
   

5.3 font-class 引用

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

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

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

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

1. 点击在线链接，生成css引入代码
   
   2.在index.scss中引入
   
2. 使用

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

5.3 Sysmbol引用

Sysmbol引入支持颜色

1. 点击在线链接，生成Sysmbol
   

2.在main.ts中引入

3. 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 + ';height:' + size"
  >
    <use :xlink:href=