【Vue3项目实战系列一】—— 全局样式处理，导入view-ui-plus组件库，定制个性主题
😉 你好呀，我是爱编程的Sherry，很高兴在这里遇见你！我是一名拥有十多年开发经验的前端工程师。这一路走来，面对困难时也曾感到迷茫，凭借不懈的努力和坚持，重新找到了前进的方向。我的人生格言是——认准方向，坚持不懈，你终将迎来辉煌！欢迎关注我😁，我将在这里分享工作中积累的经验和心得，希望我的分享能够给你带来帮助。
👉 关于【Vue3项目实战系列】专栏，本专栏旨在帮助新人粉丝全面快速的掌握vue3开发技术，在接下来的日子里我带着大家从零开始一个vue3项目，项目包含了框架搭建，用户登录，用户权限，表格增删改查，表单验证，等一套完整的用户管理系统的实践开发，学完可以帮助前端新人至少拥有一年工作经验，本专栏完全免费，欢迎关注并订阅！🎈
🎯如果你有任何困惑或疑问欢迎评论区给我留言哦，我收到后会第一时间为你答疑解惑😉
全局样式处理
在开始一个项目之前，我们该怎么组织我们的样式呢，怎么组织方便日后调用和维护呢，这是一个值得思考的问题。在没有vue之前，我们知道，要创建一个公共文件夹来存放css文件，要有index.css和reset.css，其实在vue项目中也是一样的，今天我们就来说说在vue项目中我们如何管理我们的样式。
在下面的开发中我们将使用less编写css，首先我们需要在项目中安装less。
安装less
// 使用npm
npm install less less-loader --save-dev
// 使用yarn
yarn add less less-loader --dev
配置less
创建styles文件夹
我们先在src目录下创建一个styles文件夹用来存放我们的样式文件。
并在styles文件夹中创建index.less reset.less variables.less文件。
src/
└── styles/
├── index.less # 主样式入口文件，用于引入其他less文件
├── reset.less # 重置基础样式
└── variables.less # 公共样式变量
导入view-ui-plus组件库
View UI Plus 是 View Design 设计体系中基于 Vue.js 3 的一套 UI 组件库，主要用于企业级中后台系统。
View UI Plus 提供了超过 80 个常用底层组件（如 Button、Input、DatePicker等）及业务组件（如 City、Auth、Login 等）。
官网：https://www.iviewui.com/view-ui-plus/guide/introduce
安装
npm install view-ui-plus --save
全局引用
如果使用的组件比较多，可以选择下面这种全局引入方式，一次引入，在项目中所有组件中都可以使用。这种引入方式在项目打包的时候会将全部组件都打包进项目，项目的体积会比较大。
在main.js中加入下面这段代码。
import { createApp } from 'vue'
import ViewUIPlus from 'view-ui-plus'
import App from './App.vue'
import router from './router'
import store from './store'
import 'view-ui-plus/dist/styles/viewuiplus.css'
const app = createApp(App)
app.use(store)
.use(router)
.use(ViewUIPlus)
.mount('#app')
按需引用
如果使用的组件比较少，比如只用到了其中几个组件，可以选择这种按需引入的方式。这种方式在项目打包的时候只会将你使用到的组件打包进项目，与全局引入相比项目的提交会比较小。
借助插件 babel-plugin-import 可以实现按需加载组件，减少文件体积。首先安装，并在文件 .babelrc 中配置：
安装babel-plugin-import
npm install babel-plugin-import --save-dev
在.babelrc文件中配置
{
"plugins": [
[
"import",
{
"libraryName": "view-ui-plus",
"libraryDirectory": "src/components"
},
"view-ui-plus"
]
]
}
然后这样按需引入组件，就可以减小体积了：
import { Button, Table } from 'view-ui-plus';
app.component('Button', Button);
app.component('Table', Table);
注意事项
按需引用仍然需要导入样式，即在 main.js 或根组件执行 import ‘view-ui-plus/dist/styles/viewuiplus.css’;
.babelrc文件如果存在于项目中，直接在里面增加配置就行，如果不存在就在根目录下新建一个。
测试引入是否成功
配置好后，我们启动项目。然后找到App.vue文件加入组件
在启动项目后，页面中看见引入的按钮和表格组件就说明组件已经导入成功了。
选用哪种方式导入组件，取决于我们自身习惯和项目需要，我选择的是全局引入。
定制个性主题
view-ui-plus允许你定制个性主题，就如下面这样
在styles文件夹里新建一个custom-theme.less文件，用于修改主题
@import 'view-ui-plus/src/styles/index.less';
@primary-color: #8c0776;
在main.js里引入你的文件
import './styles/custom-theme.less'
import './styles/index.less'
上面就是我们定制的主题了，到这儿，已经完成了样式处理，导入view-ui-plus组件库，定制个性主题等工作，下一步就要定制布局了。欢迎评论区留言交流哦！