m0_74825447
m0_74825447

手把手完成前端Vue3 + Vite项目工程化搭建

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

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

整理项目结构

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

删除 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 Plus
npm install element-plus

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

# src/main.js

import { 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')

测试安装结果

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

安装 Vue Router 路由管理库
#安装 Vue Router
npm install vue-router

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

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

// src/router/index.js
import {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 状态管理库
#安装 Pinia
npm install pinia

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

// src/store/index.js
import {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.js
import {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 获取用户状态管理对象，并调用登录方法
安装 Sass CSS 预处理器
#安装 Sass，安装时需要添加 -D 参数，表示将 Sass 添加到开发依赖中，在打包过程中，Sass 会自动编译为 CSS
npm install sass -D

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

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

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

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

// vite.config.js
import { 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 工具库
#安装 VueUse
npm i @vueuse/core

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

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

安装 Axios 网络请求库
#安装 Axios
npm install axios

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

// src/utils/request.js
import 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}`,
    });
}

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

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

安装 Echarts 图表库
#安装 Echarts
npm install echarts

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

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

安装 Eslint 代码检查工具
#安装 Eslint 及相关插件
npm install eslint -D
npm install eslint-config-airbnb-base -D
npm install eslint-define-config -D
npm install eslint-plugin-import -D
npm install eslint-plugin-vue -D

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

// .eslintrc.js
const { 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 prettier
npm 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 文件中是否缩进