欢迎光临
我们一直在努力
        找回密码
当前位置：171主机测评 > 服务器技术 > 正文

前端-Vue3项目创建以及初始化

2026-01-28 分类：服务器技术 阅读(39) 评论(0)

目录

一.安装pnpm

二.创建Vue3项目

      打开项目后有可能会提示：

三.修改eslint和prettier的配置

四.基于 husky 的代码检查工作流

五.调整项目的目录

六.引入 element-ui 组件库

七.Pinia – 构建用户仓库 和 持久化

八.配置axios

九.前端项目页面框架模板

一.安装pnpm

       

pnpm的安装https://blog.csdn.net/weixin_52159554/article/details/150926868?sharetype=blogdetail&sharerId=150926868&sharerefer=PC&sharesource=weixin_52159554&spm=1011.2480.3001.8118

二.创建Vue3项目

pnpm create vue

        进入创建好的项目路径，使用pnpm i安装项目依赖

pnpm i

        安装好依赖后使用pnpm dev查看项目是否创建成功

pnpm dev

        使用ctrl+鼠标右键点击链接进入网页，显示以下网页表明Vue3项目搭建成功。

        然后用Vscode打开项目：

      打开项目后有可能会提示：

        这个提示是 VSCode 在提醒你：                 你现在的项目是 Vue 3，而你启用了 Vetur 插件。                 不过在 Vue 3 项目中，官方推荐使用 Volar 插件来代替 Vetur。

        解决方法（推荐做法）：

  • 卸载或禁用 Vetur

    • 打开命令面板（Ctrl + Shift + P）。

    • 输入 “Extensions: Show Installed Extensions”。

    • 搜索 “Vetur”，点击 “Disable” 或 “Uninstall”。

  • 安装 Volar

    • 在扩展市场中搜索 “Volar”。

    • 全名是 “Vue Language Features (Volar)”。

    • Volar现在已经改名为Vue-office

    • 安装完成后，重启 VSCode。

  • （可选）安装 TypeScript Vue Plugin

    如果你的项目使用 TypeScript，请在 tsconfig.json 中添加：

    • {
      "compilerOptions": {
      "types": ["vue"]
      }
      }

    • 三.修改eslint和prettier的配置

            前端-配置Prettier与ESLint9https://blog.csdn.net/weixin_52159554/article/details/153408695?spm=1001.2014.3001.5501

    四.基于 husky 的代码检查工作流

            如果没有的话，需要先安装git：

                    Git-Git和TortoiseGit的安装以及使用https://blog.csdn.net/weixin_52159554/article/details/150977723

                    然后重启VScode。

            在项目中初始化git仓库：

    git init # 初始化 Git 仓库，会生成 .git

            使用git add和git commit备份代码：

            从上面的图片中可以看出，提交的代码明明有问题但是还是完成了代码的git，此时需要使用husky。

            husky 是一个 git hooks 工具 ( git的钩子工具，可以在特定时机执行特定的命令 )，这个工具会在commit之前检查代码中是否存在错误，如果存在错误是不会备份代码的，并且将错误原因告知。

    pnpm dlx husky-init && pnpm install

            修改 .husky/pre-commit 文件：

            完成上面步骤后，在备份代码：

            此时会提示代码有问题，无法完成备份。

            按照错误提示修改代码：

            使用了husky之后，备份代码的正确性得到了保障，但是在多人项目开发中，对于一整个项目来说，往往每个人都是开发其中的一部分，但是当需要备份我们这部分的时候，别人的代码有问题，如果此时使用了husky，那么所有代码都不能备份成功，此时需要：

    pnpm i lint-staged -D

            修改package.json文件中的代码：

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

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

            修改

    pnpm lint-staged

    五.调整项目的目录

                    创建全局样式文件：

                    在main.js文件中导入全局样式文件：

    • 安装 sass 依赖

      pnpm add sass -D

    六.引入 element-ui 组件库

           element-plus官网https://element-plus.org/zh-CN/guide/installation

            安装element-plus：

    pnpm add element-plus

            安装按需引入的插件：

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

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

                    全选复制粘贴就可以：

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

    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    import vueDevTools from 'vite-plugin-vue-devtools'

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

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

            配置好后，就可以在组件中使用element-plus提供的组件，而且不需要收到导入，安装的插件会自动在需要的导入：

    七.Pinia – 构建用户仓库 和 持久化

            安装persist插件：

    pnpm add pinia-plugin-persistedstate -D

            main.js:

    import './assets/main.scss'

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

    import App from './App.vue'
    import router from './router'
    import persist from 'pinia-plugin-persistedstate'
    const app = createApp(App)

    app.use(createPinia().use(persist))
    app.use(router)

    app.mount('#app')

             stores/user.js:

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

    export const useUserStore = defineStore(
    'userData',
    () => {
    const token = ref('')

    const setToken = (newToken) => {
    token.value = newToken
    }

    const clearToken = () => {
    token.value = ''
    }

    return {
    token,
    setToken,
    clearToken
    }
    },
    {
    persist: true
    }
    )

            pinia分离：

            index.js:

    import { createPinia } from 'pinia'
    import persist from 'pinia-plugin-persistedstate'

    const pinia = createPinia()

    pinia.use(persist)

    export default pinia

    export * from './modules/user'

            user.js:

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

    export const useUserStore = defineStore(
    'userData',
    () => {
    const token = ref('')

    const setToken = (newToken) => {
    token.value = newToken
    }

    const clearToken = () => {
    token.value = ''
    }

    return {
    token,
    setToken,
    clearToken
    }
    },
    {
    persist: true
    }
    )

            main.js:

    import './assets/main.scss'
    import { createApp } from 'vue'

    import pinia from './stores'

    import App from './App.vue'
    import router from './router'
    const app = createApp(App)

    app.use(pinia)
    app.use(router)

    app.mount('#app')

            app.vue

    <script setup>
    import { useUserStore } from './stores'

    const userStore = useUserStore()
    </script>

    <template>
    <div>
    {{ userStore.token }}
    <br />
    <el-button type="primary" @click="userStore.setToken('ssss')"
    >修改Token的值</el-button
    >
    <el-button type="primary" @click="userStore.clearToken"
    >删除Token的值</el-button
    >
    </div>
    </template>

    <style scoped></style>

    八.配置axios

            安装axios:

    pnpm add axios

            在utils文件夹中创建request.js,然后在文件中创建axios实例、请求拦截器和响应拦截器：

    // 导入用户状态管理（Pinia 中的 userStore）
    import { useUserStore } from '@/stores/user'
    // 导入 axios，用于发送 HTTP 请求
    import axios from 'axios'
    // 导入 vue-router 实例，用于在响应拦截中进行页面跳转
    import router from '@/router'
    // 导入 Element Plus 消息提示组件
    import { ElMessage } from 'element-plus'

    // 定义基础请求路径（接口域名）
    const baseURL = 'http://big-event-vue-api-t.itheima.net'

    // 创建 axios 实例，用于封装全局配置
    const instance = axios.create({
    baseURL, // 请求的基础路径
    timeout: 100000 // 超时时间（单位：毫秒），超过此时间将抛出错误
    })

    /* ——————– 请求拦截器 ——————– */
    instance.interceptors.request.use(
    (config) => {
    // 获取用户存储（Pinia）
    const userStore = useUserStore()

    // 如果用户已登录且存在 token，则在请求头中携带 Authorization
    if (userStore.token) {
    config.headers.Authorization = userStore.token
    }

    // 返回修改后的请求配置
    return config
    },
    (err) => Promise.reject(err) // 请求发送失败时直接抛出错误
    )

    /* ——————– 响应拦截器 ——————– */
    instance.interceptors.response.use(
    (res) => {
    // 当接口返回 code === 0 时，表示请求成功
    if (res.data.code === 0) {
    return res
    }

    // 否则弹出错误提示信息
    ElMessage({
    message: res.data.message || '服务异常',
    type: 'error'
    })

    // 将错误信息以 Promise.reject 抛出，便于外部捕获
    return Promise.reject(res.data)
    },
    (err) => {
    // 捕获接口异常（如 4xx / 5xx）
    ElMessage({
    message: err.response?.data?.message || '服务异常',
    type: 'error'
    })

    console.log(err) // 输出错误信息方便调试

    // 如果状态码为 401（未授权 / 登录过期），跳转回登录页
    if (err.response?.status === 401) {
    router.push('/login')
    }

    // 抛出错误对象
    return Promise.reject(err)
    }
    )

    // 默认导出封装好的 axios 实例
    export default instance
    // 同时导出基础路径，以便其他模块使用
    export { baseURL }

    九.前端项目页面框架模板

    <script setup>
    import {
    Management,
    Promotion,
    UserFilled,
    User,
    Crop,
    EditPen,
    SwitchButton,
    CaretBottom
    } from '@element-plus/icons-vue'
    import avatar from '@/assets/default.png'
    </script>

    <template>
    <!–active-text-color用来设置菜单高亮时的颜色 –>
    <!–:default-active 用来设置默认高亮 –>
    <!–router router选项开启后， el-menu-item的index就是点击会跳转的路径 –>
    <el-container class="layout-container">
    <el-aside width="200px">
    <div class="el-aside__logo"></div>
    <el-menu
    active-text-color="#fffd04"
    background-color="#14215f"
    :default-active="$route.path"
    text-color="#fff"
    router
    >
    <el-menu-item index="/article/channel">
    <el-icon><Management /></el-icon>
    <span>文章分类</span>
    </el-menu-item>
    <el-menu-item index="/article/manage">
    <el-icon><Promotion /></el-icon>
    <span>文章管理</span>
    </el-menu-item>
    <el-sub-menu index="/user">
    <template #title>
    <el-icon><UserFilled /></el-icon>
    <span>个人中心</span>
    </template>
    <el-menu-item index="/user/profile">
    <el-icon><User /></el-icon>
    <span>基本资料</span>
    </el-menu-item>
    <el-menu-item index="/user/avatar">
    <el-icon><Crop /></el-icon>
    <span>更换头像</span>
    </el-menu-item>
    <el-menu-item index="/user/password">
    <el-icon><EditPen /></el-icon>
    <span>重置密码</span>
    </el-menu-item>
    </el-sub-menu>
    </el-menu>
    </el-aside>
    <el-container>
    <el-header>
    <div>黑马程序员：<strong>小帅鹏</strong></div>
    <el-dropdown placement="bottom-end">
    <span class="el-dropdown__box">
    <el-avatar :src="avatar" />
    <el-icon><CaretBottom /></el-icon>
    </span>
    <template #dropdown>
    <el-dropdown-menu>
    <el-dropdown-item command="profile" :icon="User"
    >基本资料</el-dropdown-item
    >
    <el-dropdown-item command="avatar" :icon="Crop"
    >更换头像</el-dropdown-item
    >
    <el-dropdown-item command="password" :icon="EditPen"
    >重置密码</el-dropdown-item
    >
    <el-dropdown-item command="logout" :icon="SwitchButton"
    >退出登录</el-dropdown-item
    >
    </el-dropdown-menu>
    </template>
    </el-dropdown>
    </el-header>
    <el-main>
    <router-view></router-view>
    </el-main>
    <el-footer>大事件 ©2023 Created by 黑马程序员</el-footer>
    </el-container>
    </el-container>
    </template>

    <style lang="scss" scoped>
    .layout-container {
    height: 100vh;
    .el-aside {
    background-color: #14215f;
    &__logo {
    height: 120px;
    background: url('@/assets/logo.png') no-repeat center / 120px auto;
    }
    .el-menu {
    border-right: none;
    }
    }
    .el-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-dropdown__box {
    display: flex;
    align-items: center;
    .el-icon {
    color: #999;
    margin-left: 10px;
    }

    &:active,
    &:focus {
    outline: none;
    }
    }
    }
    .el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
    }
    }

    .el-menu {
    .el-menu-item {
    border: 2px solid transparent;
    border-radius: 0 20px 20px 0;
    }
    }
    </style>

    赞(0)
    未经允许不得转载：171主机测评 » 前端-Vue3项目创建以及初始化
    分享到： 更多 (0)
    标签：

    相关推荐

    评论 抢沙发

    取消

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址

    热门标签

    #人工智能(59884)#python(20259)#开发语言(16975)#java(15577)#运维(15445)#linux(15026)#大数据(14663)#服务器(13128)#算法(11833)#前端(10987)#网络(9432)#ai(9044)#数据库(8969)#c++(8213)#课程设计(6846)#学习(6822)#机器学习(6744)#区块链(5936)#OpenClaw(5395)#后端(5204)#spring boot(5041)#深度学习(4979)#c语言(4390)#毕业设计(4312)#数据结构(4215)#安全(4120)#docker(3946)#架构(3904)#javascript(3821)#大模型(3684)

    热门文章

    最新文章

    归档

    分类