15 | 实战痛点1：复杂Vue项目的规范和基础库封装

大圣



该思维导图由 AI 生成，仅供参考

你好，我是大圣，欢迎进入课程的第 15 讲。
在全家桶实战篇的前几讲里，我们学习了 Vue 3 本身的进阶内容。从今天开始，我们尝试着把这些技能都用在实际项目中，聊一下实战中常见的痛点。不过，既然是实际项目，那还是有很多库需要引入的，比如网络请求时用到的 axios、时间处理时用到的 Dayjs 等等。今天我要跟你聊的，则是复杂 Vue 项目的规范和基础库的封装。
组件库在项目开发中，我们首先需要一个组件库帮助我们快速搭建项目，组件库提供了各式各样的封装完备的组件。现在社区可选择的组件库有 element-plus、antd-vue，Naive-UI、Element3 等，我们选择 Element3 来搭建项目，首先我们来到项目目录下，执行下面的代码安装 Element3。
npm install element3 --save
然后，我们在 src/main.js 中使用一下 Element3。看下面的代码，我们在其中引入了 Element3 和主体对应的 CSS，并使用 use(Element3) 加载组件库。
import { createApp } from 'vue'
import Element3 from 'element3'
import 'element3/lib/theme-chalk/index.css'
import store from './store/index'
import App from './App.vue'
import router from './router/index'
const app = createApp(App)
app.use(store)
    .use(router)
    .use(Element3)
    .mount('#app')

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

本文介绍了在复杂Vue项目中规范和基础库封装的实际应用。作者首先介绍了如何使用Element3组件库搭建项目的基本结构，包括安装和使用Element3组件库，并展示了如何使用其组件来构建页面布局。其次，文章讨论了工具库的封装，以axios为例，演示了如何在项目中统一处理网络请求和错误信息，并介绍了在项目中集成Sass作为CSS预处理语言的方法。最后，作者强调了在项目开始之初就应该考虑整体设计风格，预先定义整体的颜色、边框、字体大小等，以降低后续的CSS维护成本。通过实际代码演示和技术讲解，本文为读者提供了在复杂Vue项目中规范和基础库封装的实战经验，有助于读者快速了解并应用于实际项目中。文章还介绍了ESLint的使用和git提交规范，以确保团队代码的一致性和质量。整体而言，本文为读者提供了丰富的技术经验和实用建议，适合需要规范和优化Vue项目的开发人员阅读参考。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《玩转 Vue 3 全家桶》，新⼈⾸单¥68

立即购买

登录后留言

全部留言(29)

最新
精选

icoolee
代码规范这讲的感觉有点少，加餐讲一下全套吧tailwindcss、postcss、eslint、prettier、.editconfig、Commitizen、husky + commitlint、lint-staged、stylelint
作者回复: 后面组件库加了husky,eslint prettier，并没有用tailwindcss等，不过这是个好建议
2021-11-29

12
peterpc
大圣，husky如何管理git的钩子函数？一笔带过？
作者回复: 组件库搭建的时候详细介绍了husky
2021-11-19
5
7
韩仕杰
大圣老师，axios、sass 安装在开发环境是不是不太好？（dependencies、devDependencies）
作者回复: 提醒的有道理我给忽略了 axios需要需要放在dep里
2021-11-19

6
轻度
为了避免出现歧义等情况，不应该是强制javascript写分号吗
作者回复: 我是不写分号党，vue源码也是没有分号
2021-11-19
8
6
关关君
大圣老师为什么安装Axios的时候要加-D呢？Axios生产环境中不也会用到吗
作者回复: 这个是我敲习惯了需要吧-d删除
2021-11-19

4
嘿吼
大圣老师，有没有什么比较全一点的axios的请求案例，比如像大公司的axios封装是什么样子的？
作者回复: 其实这里介绍的一半项目就足够用了，axios主要要做的就是token的管理，错误信息的处理，不同环境的链接前缀管理
2021-11-26

3
南山
配置 commit规范的工具一笔带过？
作者回复: 后面不充了
2021-11-22
2
3
JIo
为什么这样大段大段的代码不能出视频课边敲边讲解呢？视频的效果肯定比音频文本的效果好很多啊
作者回复: 这个专栏就是文字专栏设计之初没有视频计划囧
2021-11-19
4
2
陈豆
大圣老师能不能每一讲写的完整代码放到git上
作者回复: 现在代码集中推送到https://github.com/shengxinjing/geektime-vue-course上汇总，可以看下README.md
2021-12-14

1
风一样
请问 process.env.VUE_APP_BASE_API 这个变量怎么来的呢？
作者回复: vite设置环境变量的方法链接https://cn.vitejs.dev/guide/env-and-mode.html#production-replacement，这样可以很方便的在dev和test以及线上环境使用不同的前缀
2021-12-01
2
1

收起评论