【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组件库，定制个性主题等工作，下一步就要定制布局了。欢迎评论区留言交流哦！