Vue3 从0到1搭建前端基础框架 - 01

​

一、创建一个 Vue 应用

1.基于 vite 创建 具体操作如下（点击查看[官方文档])

## 1.创建命令
npm create vue@latest
## 2.具体配置
## 配置项目名称
√ Project name: vue3-test
## 是否添加TypeScript支持
√ Add TypeScript?  Yes
## 是否添加JSX支持
√ Add JSX Support?  No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development?  Yes
## 是否添加pinia环境
√ Add Pinia for state management?  Yes
## 是否添加单元测试
√ Add Vitest for Unit Testing?  No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality?  Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting?  Yes

然后创建了一个基础文件

浏览器访问 localhost:5173 预览

二、Element Plus 引入

1.执行 npm install element-plus --save [（点击查看[官方文档])]

自动导入

 首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
`npm install -D unplugin-vue-components unplugin-auto-import`    
然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

vite.config.ts - 自动导入配置

先创建好 /src/types 目录用于存放自动导入函数和组件的TS类型声明文件，再进行自动导入配置
// vite.config.ts

import { fileURLToPath, URL } from 'node:url'

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

三、SVG 图标引入

1.安装依赖
npm install -D fast-glob 和 npm install -D vite-plugin-svg-icons

2.创建 src/assets/SVG 目录 , 放入从 Iconfont 复制的 svg 图标

3.vite.config.ts 配置插件

export default ({ command, mode }: ConfigEnv): UserConfig => {
  return {
    plugins: [
      vue(),
      AutoImport({
        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
        imports: ['vue'],
        resolvers: [ElementPlusResolver()],
        eslintrc: {
          enabled: true, // 是否自动生成 eslint 规则，建议生成之后设置 false
          filepath: './.eslintrc-auto-import.json' // 指定自动导入函数 eslint 规则的文件
        },
        dts: path.resolve(pathSrc, 'types', 'auto-imports.d.ts')
      }),
      Components({
        resolvers: [ElementPlusResolver()],
        dts: path.resolve(pathSrc, 'types', 'components.d.ts') // 指定自动导入组件TS类型声明文件路径
      }),
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), 'src/assets/SVG')],
        // 指定symbolId格式
        symbolId: 'icon-[dir]-[name]'
      })
    ],

    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    }
  }
}

4.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="symbolId" :fill="color" />
  </svg>
</template>

<style scoped>
.svg-icon {
  display: inline-block;
  outline: none;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
  fill: currentColor; /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
  overflow: hidden;
}
</style>

5.组件测试

<template>
 <el-button type="info"><svg-icon icon-class="xing"/>SVG</el-button>
</template>

四、引入SCSS

1.安装依赖
npm i -D sass

2.创建 variables.scss 变量文件，添加变量 $bg-color定义，注意规范变量以‘$ `开头

// src/style/variables.scss 
$font-color:#242424;

3.配置导入 SCSS 全局变量文件

// vite.config.ts
css: {
    // CSS 预处理器
    preprocessorOptions: {
        //define global scss variable
        scss: {
            javascriptEnabled: true,
            additionalData: `@use "@/styles/variables.scss" as *;`
        }
    }
}

4.测试 style 标签使用SCSS全局变量

<style lang="scss" scoped>
.box {
 color: $font-color;
}
</style>

5.导入的 SCSS 全局变量在 TypeScript 不生效的，需要创建一个以 .module.scss 结尾的文件

// src/style/variables.module.scss
// 导出 variables.scss 文件的变量
:export{
   fontColor: $font-color;
}

<script setup lang="ts">
  import variables from "@/styles/variables.module.scss";
</script>

<template>
  <div style="width:100px;height:100px" :style="{ 'background-color': variables.fontColor }" />
</template>

五、 Pinia

1. 执行 npm install pinia [（点击查看[官方文档])
   注意：如果在第一步 此选项是yes 就不需要在引入Pinia

 // 是否添加pinia环境
√ Add Pinia for state management?  Yes

六、配置环境变量

1.项目根目录新建 .env.development 、.env.production

注：环境变量 要依据现实情况配置，比一定只有两个，因为有的公司还有测试环境，但配置都是一样的，只不过是换个名字

开发环境变量配置：.env.development

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
## 开发环境
NODE_ENV='development'
# 代理前缀
VITE_APP_BASE_API = '/dev-api'

生产环境变量配置：.env.production

## 生产环境
NODE_ENV='production'
# 代理前缀
VITE_APP_BASE_API = '/prod-api'

2.环境变量智能提示
新建 src/types/env.d.ts文件存放环境变量TS类型声明
注：TS的作用，参数有了TS类型声明 基本都会有提示

// src/types/env.d.ts
interface ImportMetaEnv {
  /**
   * 应用标题
   */
  VITE_APP_TITLE: string
  /**
   * 应用端口
   */
  VITE_APP_PORT: number
  /**
   * API基础路径(反向代理)
   */
  VITE_APP_BASE_API: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

七、规范

1.代码统一规范
参考文章： 【vue3-element-admin】ESLint+Prettier+Stylelint+EditorConfig 约束和统一前端代码规范

Eslint： JavaScript 语法规则和代码风格检查；
Stylelint: CSS 统一规范和代码检测；
Prettier：全局代码格式化。

2.Git 提交规范
参考文章：[【vue3-element-admin】Husky + Lint-staged + Commitlint + Commitizen + cz-git 配置 Git 提交规范] (https://blog.csdn.net/u013737132/article/details/130191363)