---

从0开始搭建Vue3项目

原创 已于 2026-01-22 23:07:29 修改 · 粉丝可见 · 102 阅读 · 0 · 0 GEO检测 · 编辑
文章链接：https://blog.csdn.net/hacker_51/article/details/149985646

目录

[TOC]

创建项目

pnpm create vue

按需填写即可。

项目目录和关键文件

配置 Husky 的代码检查工作流

1、初始化 husky 工具配置

pnpm dlx husky-init && pnpm i lint-staged -D && pnpm install

2、配置 暂存区eslint校验

package.json配置 lint-staged 命令

修改 .husky/per-commit文件

调整目录以及添加基础依赖

安装sass预处理器

pnpm add sass -D

vue-router4 路由代码解析

路由初始化

在 Vue3 CompositionAPI 中,

import { useRoute, useRouter } from 'vue-router'

获取路由对象

获取路由对象 router 使用 useRouter

const router = useRouter()

获取路由参数

获取路由参数 route 使用 useRoute

const route = useRoute()

createRouter 创建路由示例

配置 history 模式

1、history 模式：createWebHistory          地址栏不带 #

2、hash模式：createWebHashHistory      地址栏带 #

路由带前缀

引入Element Plus

官网： 一个 Vue 3 UI 框架 | Element Plus

pnpm add element-plus

按需自动导入配置

npm install -D unplugin-vue-components unplugin-auto-import

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

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

之后就可以直接使用组件。

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

Pinia 构建仓库和持久化

构建示例：

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
 
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }
 
  return { count, doubleCount, increment }
})

持久化配置

官网： Pinia Plugin Persistedstate

1、安装插件

pnpm add pinia-plugin-persistedstate -D

2、使用 main.ts

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

3、配置需要持久化的仓

Pinia仓库统一管理

思路图：

实现：

在main.ts中重新导入pinia

axios数据交互工具

1、安装axios

pnpm add axios

2、新建 utils/req.ts封装axios模块

import axios from 'axios'
import { ElMessage } from 'element-plus'
const baseIP = 'localhost:5173'
export const basePublicIP = 'localhost:9898'
 
const baseURL = `http://${baseIP}/api`
const request = axios.create({
    // TODO 1. 基础地址，超时时间
    baseURL,
    timeout: 10 * 1000,
    withCredentials: true
})
 
 
// 请求拦截器
request.interceptors.request.use(
    (config) => {
        // TODO 2. 携带token
        // const userStore = useUserStore()
        // if (userStore.token) {
        //     config.headers.Authorization = `${userStore.token}`
        // }
        return config
    },
    (err) => Promise.reject(err)
)
 
// 响应拦截器
request.interceptors.response.use(
    (res) => {
        // TODO 3. 处理业务失败
        // TODO 4. 摘取核心响应数据
        if (res.data.code === 200) {
            return res;
        }
        // 处理业务失败，给错误提示，抛出错误
        ElMessage({
            message: res.data.message,
            type: 'error',
            plain: true,
        })
        return res
    },
    (err) => {
        // TODO 5. 处理401错误
        return Promise.reject(err)
    }
)
 
export { baseURL, baseIP }
export default request;

路由守卫

路由守卫，用于控制路由的访问权限。

常用于对路由：捕获、中断、重定向

全局路由守卫

beforeEach()  路由改变前

afterEach()  路由改变后

路由独享守卫

beforeEnter()  路由进入前

组件路由守卫

beforeRouteEnter()        路由进入前

beforeRouteUpdate()        路由更新前

beforeRouteLeave()        路由离开前

示例：beforeEach( (to,from,next)=>{} )

router.beforeEach((to,from,next)=>{alert(`我来自于 ${form}，我要去 ${to}`)})