Vue3项目搭建流程

一、环境搭建

1. 安装Node.js和npm

确保你已经安装了Node.js和npm。可以从Node.js官网下载并安装最新版本的Node.js，npm会自动随Node.js一起安装。

2.安装pnpm包管理器

pnpm 包管理器 - 创建项目：比同类工具快 2倍 左右、节省磁盘空间… https://www.pnpm.cn/

安装方式：

npm install -g pnpm

创建项目：

pnpm create vue

二、项目创建

使用create-vue创建Vue3项目

create-vue是Vue官方新的脚手架工具，底层切换到了 vite （下一代前端工具链），为开发提供极速响应

前置条件 - 已安装16.0或更高版本的Node.js

1. 使用npm包创建vue3项目

执行如下命令，这一指令将会安装并执行 create-vue创建项目

npm init vue@latest

2. 使用pnpm包创建vue3项目（推荐）

执行如下命令，这一指令将会安装并执行 create-vue创建项目

pnpm create vue

安装依赖

根据绿色提示命令逐条执行即可完成依赖的安装并启动项目

cd vue3-demo

pnpm install

pnpm dev

项目创建完成后，项目目录结构如下：

my-vue-app
├── node_modules/       // 项目依赖
├── public/             // 公共静态资源
│   └── index.html      // 入口HTML文件
├── src/                // 源码目录
│   ├── assets/         // 静态资源
│   ├── components/     // Vue组件
│   ├── App.vue         // 根组件
│   ├── main.js         // 项目入口文件
├── .gitignore          // Git忽略文件
├── babel.config.js     // Babel配置
├── package.json        // 项目配置文件
└── README.md           // 项目说明文件

三、项目搭建

一般项目搭建流程

1. 创建项目

通常做如下选择：

TypeScript: 提供静态类型检查，提高代码的健壮性和可维护性。

JSX: 通常在 Vue 项目中不使用 JSX，因此选择 No。

Vue Router: 必须的，因为这是一个单页面应用。

Pinia: 用于管理全局状态，适合中大型项目。

Vitest: 用于编写单元测试，确保每个组件和函数的正确性。

Cypress: 用于端到端测试，模拟用户行为，确保整个应用的功能正常。

ESLint: 保持代码一致性和高质量，减少错误。

Prettier: 用于美化代码

2. 安装依赖与项目启动

3. ESLint & prettier 配置代码风格

环境同步

（1）安装插件 ESlint，开启保存自动修复

（2）禁用插件 Prettier，并关闭保存自动格式化

安装和禁用完插件后需要配置以下代码：vscode点击设置，打开设置json

// ESlint插件 + Vscode配置 实现自动格式化修复
"editor.codeActionsOnSave": {
    "source.fixAll": true
},
"editor.formatOnSave": false,

如图所示：

配置文件 .eslintrc.cjs

1. prettier 风格配置 https://prettier.io

   1. 单引号

   2. 不使用分号

   3. 每行宽度至多80字符

   4. 不加对象|数组最后逗号

   5. 换行符号不限制（win mac 不一致）

2. vue组件名称多单词组成（忽略index.vue）

3. props解构（关闭）

在.eslintrc.cjs文件中配置以下代码：

  rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 单引号
        semi: false, // 无分号
        printWidth: 80, // 每行宽度至多80字符
        trailingComma: 'none', // 不加对象|数组最后逗号
        endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
      }
    ],
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
      }
    ],
    'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验
    // 💡 添加未定义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了支持下一个章节演示。
    'no-undef': 'error'
  }

如图所示：

4. 配置代码检查工作流

基于 husky 的代码检查工作流，确保提交的代码符合规范

husky 是一个 git hooks 工具 ( git的钩子工具，可以在特定时机执行特定的命令 )

（1）husky 配置

1. git初始化：打开终端，执行命令 git init （这里需要在vscode中打开Git Bash终端，而不是powershell）

2. 初始化 husky 工具配置 https://typicode.github.io/husky/：在终端执行如下命令：

pnpm dlx husky-init && pnpm install

执行完成后会在项目目录生成一个.husky文件夹

3. 修改 .husky/pre-commit 文件

pnpm lint

如下图所示：

问题： 默认进行的是全量检查，耗时问题，历史问题。

解决： 使用暂存区eslint校验，保证每次新写的代码符合规范，之前老项目没有使用elsint则不去管

（2）lint-staged 配置

1. 安装（依然在Git Bash终端执行此命令）

pnpm i lint-staged -D

如图所示：

2. 配置 package.json

{
  // ... 省略 ...
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  }
}

{
  "scripts": {
    // ... 省略 ...
    "lint-staged": "lint-staged"
  }
}

如图所示：

3. 修改 .husky/pre-commit 文件

pnpm lint-staged

流程总结

1. git初始化：打开终端，执行命令 git init （这里需要在vscode中打开Git Bash终端，而不是powershell）

2. 初始化 husky 工具配置 https://typicode.github.io/husky/：在终端执行如下命令：

pnpm dlx husky-init && pnpm install

执行完成后会在项目目录生成一个.husky文件夹

3. 安装 lint-staged （依然在Git Bash终端执行此命令）

pnpm i lint-staged -D

4. 配置 package.json

{
  // ... 省略 ...
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  }
}

{
  "scripts": {
    // ... 省略 ...
    "lint-staged": "lint-staged"
  }
}

5. 修改 .husky/pre-commit 文件

pnpm lint-staged

5. 调整项目目录

默认生成的目录结构不满足我们的开发需求，所以这里需要做一些自定义改动。主要是两个工作：

• 删除初始化的默认文件
• 修改剩余代码内容
• 新增调整我们需要的目录结构
• 拷贝初始化资源文件，安装预处理器插件

（1）删除文件

删除文件：src/assets文件夹下的所有文件；src/components 文件夹下的所有文件；src/stores 文件夹下的所有文件（可选，保持结构整洁可以删除，不删除也不会有影响）；src/views 文件夹下的所有文件

如下图框中所示：

（2）修改内容

src/router/index.js 只保留如下代码：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: []
})

export default router

如图所示：

src/App.vue 只保留如下代码：

<script setup></script>

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<style scoped></style>

src/main.js 只保留如下代码：

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.mount('#app')

（3）新增目录结构

新增需要目录 api utils

（4）拷贝初始化资源文件，安装预处理器插件

将项目需要的全局样式 和 图片文件，复制到 assets 文件夹中, 并将全局样式在main.js中引入

import '@/assets/main.scss'

• 使用sass需要安装 sass 依赖

pnpm add sass -D

6. 引入 element-ui 组件库

官方文档： https://element-plus.org/zh-CN/

• 安装

$ pnpm add element-plus

自动按需导入：

1. 安装插件

pnpm add -D unplugin-vue-components unplugin-auto-import

2. 然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

...
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    ...
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ]
})

配置后的代码如下：

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'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  base:'/',
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

如下图所示：

3. 直接使用

<template>
  <div>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    ...
  </div>
</template>

彩蛋： 默认 components 下的文件也会被自动注册~

7. Pinia - 构建用户仓库 和 持久化

官方文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

1. 安装插件 pinia-plugin-persistedstate

pnpm add pinia-plugin-persistedstate -D

2. main.js中增加插件导入代码

import persist from 'pinia-plugin-persistedstate'
...
app.use(createPinia().use(persist))

3. 配置 stores/user.js（假设这里需要新建user模块）

import { defineStore } from 'pinia'
import { ref } from 'vue'

// 用户模块
export const useUserStore = defineStore(
  'big-user',
  () => {
    const token = ref('') // 定义 token
    const setToken = (t) => (token.value = t) // 设置 token

    return { token, setToken }
  },
  {
    persist: true // 持久化
  }
)

Pinia - 配置仓库统一管理

（1）pinia 独立维护

- 现在：初始化代码在 main.js 中，仓库代码在 stores 中，代码分散职能不单一

- 优化：由 stores 统一维护，在 stores/index.js 中完成 pinia 初始化，交付 main.js 使用

（2）仓库 统一导出

- 现在：使用一个仓库 import { useUserStore } from ./stores/user.js 不同仓库路径不一致

- 优化：由 stores/index.js 统一导出，导入路径统一 ./stores，而且仓库维护在 stores/modules 中

1. 在stores下新建index.js文件，并新建modules文件，用于存放以后需要的各种模块。如下图所示：

2. 修改main.js文件，移除pinia相关代码，如下所示：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import pinia from './stores/index'
import './assets/main.scss'

const app = createApp(App)

app.use(pinia)
app.use(router)
app.mount('#app')

3. 编写index.js文件，如下所示：

//pinia 统一管理配置
import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(persist)

export default pinia

//统一导出设置
export * from './modules/user' // 相当于下面的两行
export * from './modules/company'
// import { useUserStore } from './modules/user'
// export{ useUserStore}

这样就可以在导入的时候直接使用如下的代码进行导入：

import { useUserStore } from '@/stores'

流程总结

1. 安装插件 pinia-plugin-persistedstate

pnpm add pinia-plugin-persistedstate -D

2. 在stores下新建index.js文件，并新建modules文件，用于存放以后需要的各种模块。
3. 修改main.js文件，移除pinia相关代码，如下所示：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import pinia from './stores/index'
import './assets/main.scss'

const app = createApp(App)

app.use(pinia)
app.use(router)
app.mount('#app')

4. 编写index.js文件，如下所示：

//pinia 统一管理配置
import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(persist)

export default pinia

//统一导出设置
export * from './modules/user' // 相当于下面的两行
export * from './modules/company'
// import { useUserStore } from './modules/user'
// export{ useUserStore}

8. 数据交互 - 请求工具设计

1. 创建 axios 实例

们会使用 axios 来请求后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址等)

一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中, 便于使用

1. 安装 axios

pnpm add axios

2. 新建 utils/request.js 封装 axios 模块

   利用 axios.create 创建一个自定义的 axios 来使用

   http://www.axios-js.com/zh-cn/docs/#axios-create-config

import axios from 'axios'

const baseURL = 'http://big-event-vue-api-t.itheima.net'

const instance = axios.create({
  // TODO 1. 基础地址，超时时间
})

instance.interceptors.request.use(
  (config) => {
    // TODO 2. 携带token
    return config
  },
  (err) => Promise.reject(err)
)

instance.interceptors.response.use(
  (res) => {
    // TODO 3. 处理业务失败
    // TODO 4. 摘取核心响应数据
    return res
  },
  (err) => {
    // TODO 5. 处理401错误
    return Promise.reject(err)
  }
)

export default instance

2. 完成 axios 基本配置

import { useUserStore } from '@/stores/user'
import axios from 'axios'
import router from '@/router'
import { ElMessage } from 'element-plus'

const baseURL = 'http://big-event-vue-api-t.itheima.net'

const instance = axios.create({
  baseURL,
  timeout: 100000
})

instance.interceptors.request.use(
  (config) => {
    const userStore = useUserStore()
    if (userStore.token) {
      config.headers.Authorization = userStore.token
    }
    return config
  },
  (err) => Promise.reject(err)
)

instance.interceptors.response.use(
  (res) => {
    if (res.data.code === 0) {
      return res
    }
    ElMessage({ message: res.data.message || '服务异常', type: 'error' })
    return Promise.reject(res.data)
  },
  (err) => {
    ElMessage({ message: err.response.data.message || '服务异常', type: 'error' })
    console.log(err)
    if (err.response?.status === 401) {
      router.push('/login')
    }
    return Promise.reject(err)
  }
)

export default instance
export { baseURL }