vue3_vite_project

基于 Vue3 + Vite 搭建的前端工程化项目演示模板

环境准备

• 开发环境：Node.js v16.14.2 + npm v8.3.2
• 开发工具：Visual Studio Code or WebStorm
• 源代码管理：Git
• npm镜像：npm config set registry https://registry.npmmirror.com

  技术栈

  技术栈	描述
  Vue	渐进式 JavaScript 框架
  Vite	新一代前端开发与构建工具
  Element Plus	基于 Vue 3，面向设计师和开发者的组件库
  Pinia	符合直觉的 Vue.js 状态管理库
  vue-router	Vue.js 的官方路由管理库
  Sass	CSS 预处理器
  VueUse	基于 Vue 组合式 API 的实用工具集
  Axios	用于浏览器和 Node.js 的基于 Promise 的 HTTP 请求库
  Echarts	一个基于 JavaScript 的开源可视化图表库
  Eslint	可配置的 JavaScript 检查器
  Prettier	代码格式化工具

  项目构建

  #创建项目npm create vite#安装依赖npm install#启动项目npm run dev#构建项目npm run build

  到这一步，如果能成功运行项目，恭喜你！一个项目的基本框架已经搭建完成！

  整理项目结构

  主要是让项目工程更加感觉清晰

        
  App
    

  删除 src/style.css 文件

  删除 src/main.js 中引入的 style.css 文件

  使用 Git 管理源代码

  #Git仓库初始化git init#添加所有文件到版本库git add .#提交所有文件到版本库git commit -m "feat: 项目初始化完成"#新建 dev 分支，并切换到 dev 分支git checkout -b dev

  本地代码仓库初始化完成，之后的开发工作都在当 dev 分支上进行

  根据技术栈提供的文档，完成项目搭建

  安装 Element Plus 组件库

  #安装 Element Plusnpm install element-plus

  引入 Element Plus 组件库并使用测试安装结果

  # src/main.jsimport { 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) # 新增：使用 Element Plus 组件库app.mount('#app')

  测试安装结果

        
  App
      button  

  当按钮能正常显示时，说明安装成功

  安装 Vue Router 路由管理库

  #安装 Vue Routernpm install vue-router

  在项目的 src 目录下新建一个 views 目录，然后在 views 目录下新建两个页面，用于路由跳转。

  在项目的 src 目录下新建一个 router 目录，然后在 router 目录下新建一个 index.js 文件，该文件会作为 Vue Router 的入口文件，该文件内容如下

  // src/router/index.jsimport {createRouter, createWebHistory} from "vue-router";const router = new createRouter({    history: createWebHistory(),    routes: [        {            path: "/login",            name: "Login",            component: () => import("../views/login/index.vue"),        },        {            path: "/dashboard",            name: "Dashboard",            component: () => import("../views/dashboard/index.vue"),        },    ]})export default router

  在 src/main.js 文件中引入 Vue Router，并使用 Vue Router

  // src/main.js// ...import router from './router' // 新增app.use(router) // 新增：使用 Vue Router// ...

  修改 App.vue 文件，添加路由跳转

  • 首页
  • 登录

  访问首页和登录页，查看路由是否正常跳转

  router-link 和 router-view 是 Vue Router 的两个核心组件，router-link 是用来实现路由跳转，router-view 是用来显示路由对应的内容。

  安装 Pinia 状态管理库

  #安装 Pinianpm install pinia

  在项目的 src 目录下新建一个 store 目录，然后在 store 目录下新建一个 index.js 文件，该文件会作为 Pinia 的入口文件

  // src/store/index.jsimport {createPinia} from 'pinia'const pinia = createPinia()export default pinia

  在 src/main.js 文件中引入 Pinia，并使用 Pinia

  // src/main.js// ...import pinia from './store' // 新增app.use(router) // 新增：使用 Pinia// ...

  在 src/store 目录下创建一个 modules 目录，然后在 modules 目录下创建一个 user 状态管理对象，用于管理整个项目的用户登录状态

  // src/store/modules/user.jsimport {defineStore} from 'pinia'import {ref} from 'vue'const useUserStore = defineStore('user', () => {    const userInfo = ref({})    const loginStatus = ref(false)    const token = ref('')    /**     * 登录     */    function handleLogin() {        return new Promise((resolve, reject) => {            if(Math.random() > 0.8){                loginStatus.value = true                token.value = String(new Date().getTime())                userInfo.value = {                    name: 'admin',                    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80',                }                resolve('登录成功')            }else {                reject('登录失败')            }        })    }    /**     * 退出登录     */    function handleLogout() {        return new Promise((resolve) => {            loginStatus.value = false            token.value = ''            userInfo.value = {}            resolve()        })    }    return {        userInfo,        loginStatus,        token,        handleLogin,        handleLogout    }})export default useUserStore

  在登录页面，使用 Pinia 获取用户状态管理对象，并调用登录方法

  import useUserStore from '../../store/modules/user'const userStore = useUserStore()import {ElMessage } from 'element-plus'/** * 登录 */function login() {  userStore.handleLogin().then((res) => {    ElMessage.success(res)  }).catch(err => {    ElMessage.error(err)  })}/** * 退出登录 */function loginOut() {  userStore.handleLogout().then(() => {    ElMessage.success('退出登录成功')  }).catch(err => {    ElMessage.error(err)  })}  登 录  退出登录  
  当前登录状态：{{ userStore.loginStatus ? '已登录' : '未登录' }}
    

  • 用户名：{{ userStore.userInfo.name }}
  • 头 像：

  安装 Sass CSS 预处理器

  #安装 Sass，安装时需要添加 -D 参数，表示将 Sass 添加到开发依赖中，在打包过程中，Sass 会自动编译为 CSSnpm install sass -D

  在项目的 src 目录下新建一个 styles 目录，然后在 styles 目录下新建一个 variables.scss 文件，该文件存放全局的 Sass 变量

  //src/styles/variables.scss$success: #48C78E;$danger: #F28482;

  在首页测试 Sass 变量，在 src/views/dashboard/index.vue 文件中修改如下

    
  这是一个成功样式
    
  这是一个告警样式
  .success{  color:$success;}.danger{  color: $danger;}

  此时浏览器会提示 Undefined variable. ，因为我们需要在 vite.config.js 文件中引入该文件，才能使用 Sass 变量

  // vite.config.jsimport { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'export default defineConfig({    plugins: [vue()],    css: {        // CSS 预处理器        preprocessorOptions: {            // 定义全局 SCSS 变量            scss: {                javascriptEnabled: true,                additionalData: "@use '/src/styles/variables.scss' as *;",            },        },    },})

  查看页面会显示成功和告警样式，表示 Sass 变量已经正常工作了

  安装 VueUse 工具库

  #安装 VueUsenpm i @vueuse/core

  在 src/views/dashboard/index.vue 文件中，使用 VueUse 的 useMouse 方法，获取当前鼠标实时位置

  import {useMouse} from '@vueuse/core'const {x,y} = useMouse()  
  这是一个成功样式
    
  这是一个告警样式
    
  当前鼠标位置：X:{{ x }}、Y:{{ y }}
  .success{  color:$success;}.danger{  color: $danger;}

  页面上会实时显示鼠标的位置，表示 VueUse 工具库已经正常工作了，需要使用其它函数，可以参考 VueUse 文档

  安装 Axios 网络请求库

  #安装 Axiosnpm install axios

  在 src 目录下新建一个 utils 目录，然后在 utils 目录下新建一个 request.js 文件，在该文件中，可以在发起请求前向请求头中添加一些请求头等信息

  // src/utils/request.jsimport axios from  'axios'const request = axios.create({    baseURL: 'http://xxx.xxx.xxx.xxx // 请求的后端接口地址})/** * 请求拦截器 */request.interceptors.request.use(config => {    console.log('请求参数：',config)})/** * 响应拦截器 */request.interceptors.response.use(response => {    console.log('响应参数：',response)})export default request

  在 src 目录下新建一个 api 目录，然后在 api 目录下新建一个 user.js 文件，在该文件中，封装一些用户相关的接口

  import request from "../utils/request";/** * 获取验证码 * @param checkKey */export function getCodeInfo(checkKey) {    return request({        method: "get",        url: `/xxx/xxx/${checkKey}`,    });}

  回到登录页面，测试获取验证码接口，修改如下：

  import {getCodeInfo} from '../../api/user'import {onMounted, ref} from "vue";const captchaInfo = ref('')onMounted(() => {  getCodeInfo(new Date().getTime()).then(({data}) => {    captchaInfo.value = data.result  })})  

  • 验证码：

  页面上成功显示了验证码，表示 Axios 工具库已经正常工作了，之后其它 API 接口都统一放到 src/api 目录下统一管理

  安装 Echarts 图表库

  #安装 Echartsnpm install echarts

  在 src/views/dashboard/index.vue 文件中，使用 Echarts 的 init 方法，初始化一个图表

  import * as echarts from 'echarts';import {onMounted, ref} from "vue";const chartRef = ref(null)let echartClient = nullonMounted(() => {  initChart()})function initChart() {  echartClient =  echarts.init(chartRef.value)  echartClient.setOption({    tooltip: {},    xAxis: {      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']    },    yAxis: {},    series: [      {        name: '销量',        type: 'bar',        data: [5, 20, 36, 10, 10, 20]      }    ]  })}  .chart-box{  width: 600px;  height: 400px;}

  页面上可以看到一个柱状图，表示 Echarts 工具库已经正常工作了

  安装 Eslint 代码检查工具

  #安装 Eslint 及相关插件npm install eslint -Dnpm install eslint-config-airbnb-base -Dnpm install eslint-define-config -Dnpm install eslint-plugin-import -Dnpm install eslint-plugin-vue -D

  在项目更目录下新建一个 .eslintrc.js 文件，配置如下：

  // .eslintrc.jsconst { defineConfig } = require("eslint-define-config");module.exports = defineConfig({  root: true,  env: {    browser: true,    node: true,    jest: true,    es6: true,  },  plugins: ["vue"],  parser: "vue-eslint-parser",  parserOptions: {    ecmaVersion: "latest",    sourceType: "module",    allowImportExportEverywhere: true,    ecmaFeatures: {      jsx: true,    },  },  extends: [    "eslint-config-airbnb-base",    "eslint:recommended",    "plugin:vue/vue3-essential",    "plugin:vue/vue3-recommended",    "plugin:vue/vue3-strongly-recommended",    "plugin:import/recommended",    "plugin:import/errors",    "plugin:import/warnings",    // ".eslintrc-auto-import.json", // 解决 Eslint 提示 no-undef 错误    "prettier",    "plugin:prettier/recommended",  ],  /**   * 规则说明：off 或 0 - 关闭规则；warn 或 1 - 打开规则作为警告（不影响退出代码）；error 或 2 - 打开规则作为错误（退出代码将为 1）   */  rules: {    // 不使用制表符    "prettier/prettier": 2,    // 强制使用分号    semi: [2, "always"],    // 强制使用双引号    quotes: [2, "double"],    // 解决最后一个逗号    // "comma-dangle": [2, "never"],    // 关闭默认参数应为最后一个    "default-param-last": 0,    // 禁止未使用的变量    "no-unused-vars": 1,    // 关闭组件命名规则    "vue/multi-word-component-names": 0,    // 禁止使用多余的包    "import/no-extraneous-dependencies": 0,    // 确保在导入路径内一致使用文件扩展名    "import/extensions": 0,    // 确保导入指向可以解析的文件/模块    "import/no-unresolved": 0,    // 首选默认导出导入/首选默认导出    "import/prefer-default-export": 0,    // 要求使用 let 或 const 而不是 var    "no-var": 2,    // 禁止使用 new 以避免产生副作用    "no-new": 1,    // 禁止变量声明与外层作用域的变量同名    "no-shadow": 0,    // 禁用 console    "no-console": 0,    // 禁止标识符中有悬空下划线    "no-underscore-dangle": 0,    // 禁止在可能与比较操作符相混淆的地方使用箭头函数    "no-confusing-arrow": 0,    // 禁用一元操作符 ++ 和 --    "no-plusplus": 0,    // 禁止对 function 的参数进行重新赋值    "no-param-reassign": 0,    // 禁用特定的语法    "no-restricted-syntax": 0,    // 禁止在变量定义之前使用它们    "no-use-before-define": 0,    // 禁止直接调用 Object.prototypes 的内置属性    "no-prototype-builtins": 0,    // 禁止可以在有更简单的可替代的表达式时使用三元操作符    "no-unneeded-ternary": 2,    // 禁止重复模块导入    "no-duplicate-imports": 2,    // 禁止在对象中使用不必要的计算属性    "no-useless-computed-key": 2,    // 禁止不必要的转义字符    "no-useless-escape": 0,    // 禁用 continue 语句    "no-continue": 0,    // 强制使用一致的缩进    indent: [2, 2, { SwitchCase: 1 }],    // 强制使用骆驼拼写法命名约定    camelcase: 0,    // 强制类方法使用 this    "class-methods-use-this": 0,    // 要求构造函数首字母大写    "new-cap": 2,    // 强制一致地使用 function 声明或表达式    "func-style": 0,    // 强制一行的最大长度    "max-len": 0,    // 要求 return 语句要么总是指定返回的值，要么不指定    "consistent-return": 0,    // 强制switch要有default分支    "default-case": 2,    // 强制剩余和扩展运算符及其表达式之间有空格    "rest-spread-spacing": 2,    // 要求使用 const 声明那些声明后不再被修改的变量    "prefer-const": 2,    // 强制箭头函数的箭头前后使用一致的空格    "arrow-spacing": 2,    // 只强制对象解构，不强制数组解构    "prefer-destructuring": [2, { object: true, array: false }],    // 禁止在对象中使用不必要的计算属性    "no-unused-expressions": 0,  },});

  修改 package.json 文件，在 scripts 中添加 "lint": "eslint --ext .js,.vue --fix src" ，运行 npm run lint 命令，会自动修复所有代码问题

  安装 Prettier 代码格式化工具

  #安装 Prettier 及相关插件npm install -D prettiernpm install -D eslint-plugin-prettier

  在项目根目录下新建一个 .prettierrc.cjs 文件，配置如下：

  module.exports = {  // JSX 中的右尖括号是否换行，默认false  jsxBracketSameLine: false,  // 文件末尾是否换行，默认true  endOfLine: "auto",  // 换行符类型 (lf|crlf|cr;默认lf)  rangeStart: 0,  // 单个属性是否换行，默认false  singleAttributePerLine: false,  // 是否使用双引号，默认true  doubleQuote: true,  // 是否使用单行注释，默认false  experimentalTernaries: false,  // (x)=>{},单个参数箭头函数是否显示小括号。(always:始终显示;avoid:省略括号。默认:always)  arrowParens: "always",  // 开始标签的右尖括号是否跟随在最后一行属性末尾，默认false  bracketSameLine: false,  // 对象字面量的括号之间打印空格 (true - Example: { foo: bar } ; false - Example: {foo:bar})  bracketSpacing: true,  // 是否格式化一些文件中被嵌入的代码片段的风格(auto|off;默认auto)  embeddedLanguageFormatting: "auto",  // 指定 HTML 文件的空格敏感度 (css|strict|ignore;默认css)  htmlWhitespaceSensitivity: "css",  // 当文件已经被 Prettier 格式化之后，是否会在文件顶部插入一个特殊的 @format 标记，默认false  insertPragma: false,  // 在 JSX 中使用单引号替代双引号，默认false  jsxSingleQuote: false,  // 每行最多字符数量，超出换行(默认80)  printWidth: 120,  // 超出打印宽度 (always | never | preserve )  proseWrap: "preserve",  // 对象属性是否使用引号(as-needed | consistent | preserve;默认as-needed:对象的属性需要加引号才添加;)  quoteProps: "as-needed",  // 是否只格式化在文件顶部包含特定注释(@prettier| @format)的文件，默认false  requirePragma: false,  // 结尾添加分号  semi: true,  // 使用单引号 (true:单引号;false:双引号)  singleQuote: false,  // 缩进空格数，默认2个空格  tabWidth: 2,  // 元素末尾是否加逗号，默认es5: ES5中的 objects, arrays 等会添加逗号，TypeScript 中的 type 后不加逗号  trailingComma: "es5",  // 指定缩进方式，空格或tab，默认false，即使用空格  useTabs: false,  // vue 文件中是否缩进  和  标签，默认 false  vueIndentScriptAndStyle: false,};

  修改 package.json 文件，在 scripts 中添加 "prettier": "prettier --write src/**/*.{vue,js,jsx,ts,tsx,json,css,scss,md}" ，运行 npm run prettier 命令，会自动格式化所有代码

  性能优化及打包策略

  配置 Element Plus 按需导入

  #安装插件npm install -D unplugin-vue-components unplugin-auto-import

  修改 vite.config.js 文件，添加了 vue, vue-router, @vueuse/core 相关函数自动导入配置

  自动导入 src/**/components 目录下的组件，无需在页面中手动导入组件，添加了路径别名，@ 默认指向 src 目录，导入模块的时候可以直接使用 import xxx from "@/xxx/xxx" 形式

  // vite.config.jsimport { 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 { resolve } from "path";const pathSrc = resolve(__dirname, "src");export default defineConfig({  plugins: [    vue(),    // 自动导入    AutoImport({      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等      imports: ["vue", "vue-router", "@vueuse/core"],      resolvers: [        // 自动导入 Element Plus 相关函数        ElementPlusResolver(),      ],      eslintrc: {        enabled: true, // 解决 Eslint 提示 no-undef 错误      },      // 配置文件位置 (false:关闭自动生成)      dts: resolve(__dirname, "src/types/auto-imports.d.ts"),    }),    Components({      resolvers: [        // 自动导入 Element Plus 组件        ElementPlusResolver(),      ],      // 指定自定义组件位置(默认:src/components)      dirs: ["src/**/components"],      // 配置文件位置 (false:关闭自动生成)      dts: resolve(__dirname, "src/types/components.d.ts"),    }),  ],  resolve: {    // 导入文件时省略文件扩展名    extensions: [".js", ".ts", ".vue", ".json", "es"],    // 配置路径别名    alias: { "@": pathSrc },  },  // ...});

  删除 src/main.js 文件中之前引入的 Element Plus 的代码

  // src/main.jsimport { createApp } from "vue";// import ElementPlus from "element-plus";  // 删除import router from "./router";import pinia from "./store";// import "element-plus/dist/index.css";  // 删除import App from "./App.vue";const app = createApp(App);app.use(router);app.use(pinia);// app.use(ElementPlus); // 删除app.mount("#app");

  删除 src/views/login/index.vue 中的 import { ElMessage } from "element-plus"; 代码，现在所有与 Element Plus 相关的代码都被自动导入了，无需再手动引入。

  修改 .eslintrc.cjs 文件中 extends 项，添加 ".eslintrc-auto-import.json" 配置，解决 Eslint 提示 no-undef 错误

  # ...extends: [# ...  ".eslintrc-auto-import.json", # 解决 Eslint 提示 no-undef 错误]# ...

  按需导入 Echarts 图表库

  在 src/utils 文件夹下创建 echarts.js 文件，把需要用到的图表组件导入到该文件中，在需要使用 Echarts 的地方直接导入该文件，这样就可以按需导入 Echarts 图表库了

  // src/utils/echarts.js// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。import * as echarts from "echarts/core";// 引入柱状图图表，图表后缀都为 Chartimport { BarChart } from "echarts/charts";// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Componentimport {  TitleComponent,  TooltipComponent,  GridComponent,  DatasetComponent,  TransformComponent,} from "echarts/components";// 标签自动布局、全局过渡动画等特性import { LabelLayout, UniversalTransition } from "echarts/features";// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步import { CanvasRenderer } from "echarts/renderers";// 注册必须的组件echarts.use([  TitleComponent,  TooltipComponent,  GridComponent,  DatasetComponent,  TransformComponent,  BarChart,  LabelLayout,  UniversalTransition,  CanvasRenderer,]);export default echarts;

  修改 src/views/dashboard/index.vue 文件，引入 src/utils/echarts.js 文件，这样就可以按需导入 Echarts 图表库了

  // import * as echarts from "echarts"; // 删除import echarts from "@/utils/echarts"; // 新增// ...

  打包静态资源优化

  #安装插件npm install terser -D

  修改 vite.config.js 文件，添加了 terser 配置，打包时会自动压缩 js 文件，配置了 build.rollupOptions 将打包后的静态资源按文件类型进行分类

  import { defineConfig } from "vite";// ...export default defineConfig({ // ...  // 预览模式配置  preview: {    port: 8081,    open: true,  },  // 开发模式配置  server: {    https: false, // 是否开启 https    port: 8080, // 端口号    host: "0.0.0.0", // 监听所有地址    open: true, // 服务启动时是否自动打开浏览器    cors: true, // 允许跨域    proxy: {}, // 自定义代理规则  },  // 构建配置  build: {    chunkSizeWarningLimit: 2000, // 消除打包大小超过500kb警告    minify: "terser", // Vite 2.6.x 以上需要配置 minify: "terser", terserOptions 才能生效    terserOptions: {      compress: {        keep_infinity: true, // 防止 Infinity 被压缩成 1/0，这可能会导致 Chrome 上的性能问题        drop_console: true, // 生产环境去除 console        drop_debugger: true, // 生产环境去除 debugger      },      format: {        comments: false, // 删除注释      },    },    rollupOptions: {      output: {        // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值        entryFileNames: "js/[name].[hash].js",        // 用于命名代码拆分时创建的共享块的输出命名        chunkFileNames: "js/[name].[hash].js",        // 用于输出静态资源的命名，[ext]表示文件扩展名        assetFileNames: (assetInfo) => {          const info = assetInfo.name.split(".");          let extType = info[info.length - 1];          // console.log('文件信息', assetInfo.name)          if (/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/i.test(assetInfo.name)) {            extType = "media";          } else if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(assetInfo.name)) {            extType = "img";          } else if (/\.(woff2?|eot|ttf|otf)(\?.*)?$/i.test(assetInfo.name)) {            extType = "fonts";          }          return `${extType}/[name].[hash].[ext]`;        },      },    },  },});

  开启 Gzip 压缩

  #安装插件npm install vite-plugin-compression -D

  修改 vite.config.js 文件，添加了 vite-plugin-compression 插件

  import { defineConfig } from "vite";// ...import viteCompression from "vite-plugin-compression";export default defineConfig({  plugins: [    // ...    viteCompression(),  ],// ...});

  在 Vite 构建项目时开启 Gzip 压缩后，为了确保 Nginx 能够正确处理并返回 Gzip 压缩后的文件，你需要在 Nginx 服务器上进行相应的配置

  http {    gzip on;    gzip_static on; # 开启静态gzip功能，优先返回预压缩的.gz文件    server {        listen 8080;        server_name localhost;        location / {              root /usr/share/nginx/html/dist; # 替换为你的实际项目部署目录              index  index.html index.htm;              try_files $uri $uri/ /index.html;              # 指定如果存在预压缩文件，则优先返回 .gz 文件              gzip_static always;        }        error_page   500 502 503 504  /50x.html;        location = /50x.html {            root   html;        }    }}

  在这个配置中，Nginx会在接收到请求时首先查找是否存在对应的.gz预压缩文件，如果存在则直接返回该文件，否则会返回原始未压缩的文件。

  确保Vite构建时生成的预压缩文件与原始文件位于同一目录下，并且命名规范遵循Nginx的预期（即与原始文件同名，但扩展名为.gz）。同时，在重启Nginx服务后使新配置生效。