在 Vue.js 单页面应用（SPA）中使用 UI 框架是一种常见的做法，可以提高开发效率，减少重复性劳动。UI 框架可以让开发者快速构建可视化组件，提供设计精美的样式和交互，同时也提供了众多的实现细节，使得开发人员可以快速做出符合标准的、可靠的组件。在这篇文章中，我们将探讨如何在 Vue.js SPA 项目中使用 UI 框架。
选择 UI 框架
在选择 UI 框架时，应该根据项目需求和目标用户群体来进行评估和决策。一般来说，应该选择那些易于使用、广泛使用和良好维护的框架，例如 Element UI、Ant Design、Vuetify 等。这些框架都提供有完整的组件库、基本样式和样式变量供调整。
在选择 UI 框架之前，需要确认以下几个问题：
- 项目的设计风格，例如扁平化、材质等。
- 项目的主题颜色和文字字体。
- 项目是否需要兼容移动端，以及如何处理移动端与 PC 端之间的适配问题。
- 考虑如何封装代码，使得其更具可重复性，方便后续的维护。
集成 UI 框架
使用 NPM 安装 UI 框架
使用 npm 可以很方便地下载和安装 UI 框架，同时可以通过选项来控制安装的版本号、需要依赖的样式等。这里以 Element UI 为例进行说明。
首先，需要使用 npm 安装 Element UI：
npm install element-ui
安装完成后，可以在主文件（如 main.js）中引入 Element UI 的样式和组件库：
import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
注：题外话，Element UI 有 2 种不同的方式进行打包，即 iView 维护的 esm，以及 Original 维护的 lib，在使用的时候需要注意。如果是用 cli 新建的项目，则默认使用的是 esm。如果两种方法都有引用，会导致打包的体积变得非常庞大：
WARNING in app.js from Terser
Side effects in initialization of unused variable WebpackDevServer: const WebpackDevServer = require("webpack-dev-server");此时，需要在 webpack 的配置文件中，设置别名以及结合插件“babel-plugin-component”进行按需打包。
// javascriptcn.com 代码示例
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
const { USE_CDN } = require('./build/constant');
const ENV = process.env.NODE_ENV;
const config = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash].js',
chunkFilename: '[name].[hash].chunk.js',
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
vue$: 'vue/dist/vue.esm.js',
'@': path.resolve(__dirname, './src'),
'@ant-design/icons/lib/dist$': path.resolve(__dirname, './src/icons.js'),
},
},
optimization: {
usedExports: true,
minimizer: [
USE_CDN
? new TerserPlugin({
terserOptions: {
ecma: 6,
compress: {
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log'],
warnings: false,
},
output: {
comments: false,
beautify: false,
},
},
})
: new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: false,
}),
new OptimizeCSSAssetsPlugin({}),
],
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
exclude: /\.module\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: { hmr: ENV !== 'production' },
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: false,
},
},
'postcss-loader',
],
},
{
test: /\.module\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: { hmr: ENV !== 'production' },
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: { localIdentName: '[hash:base64]' },
},
},
'postcss-loader',
],
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 8192,
name: 'img/[name].[hash:8].[ext]',
},
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name].[hash:7].[ext]',
},
},
],
},
plugins: [
new CleanWebpackPlugin(),
new VueLoaderPlugin(),
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, 'public/assets'),
to: path.resolve(__dirname, 'dist/assets'),
ignore: ['.*'],
},
]),
new HtmlWebpackPlugin({
filename: 'index.html',
template: './public/index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
},
}),
new MiniCssExtractPlugin({
filename: '[name].[hash:7].css',
chunkFilename: '[id].[hash:7].css',
}),
new webpack.HashedModuleIdsPlugin(),
new AntdDayjsWebpackPlugin(),
],
};
// 如果只需要常规部署，就针对 library 提供的 esm 进行打包，并且调整插件的配置项
if (!USE_CDN) {
config.externals = {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
'element-ui': 'ELEMENT',
};
config.plugins.push(
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 5,
minChunkSize: 1000,
}),
);
}
module.exports = config;同时，由于 ElementUI 组件使用了 iView 维护的 esm，而 iView 默认使用的是 dayjs 进行处理，而我们的项目中使用的是 moment。所以，还需要在 babelrc 中加入按需修改的 plugin：
// javascriptcn.com 代码示例
{
"presets": ["@babel/preset-env"],
"plugins": [
"@babel/plugin-transform-runtime",
"@babel/plugin-syntax-dynamic-import",
[
"import",
{
"libraryName": "element-ui",
"libraryDirectory": "es",
"style": true
}
],
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
],
[
"transform-imports",
{
"antd": {
"transform": "antd/lib/${member}/${member}.js",
"preventFullImport": true
}
}]
]
}使用 CDN 引入 UI 框架
如果需要在 Vue.js SPA 项目中使用 CDN 安装的 UI 框架，可以使用官方提供的方式，具体可以参考：
如何使用 UI 组件
在 Vue.js 中，可以通过直接引用 UI 组件来使用它们，例如：
// javascriptcn.com 代码示例
<template>
<el-button @click="show = true">显示 Dialog</el-button>
<el-dialog :visible.sync="show">这是 Dialog</el-dialog>
</template>
<script>
export default {
data() {
return {
show: false
};
}
}
</script>在这个例子中，我们使用了 ElementUI 的 el-button 和 el-dialog 组件来构成一个简单的对话框。需要注意的是，这里调用了一个 v-model 的语法，即 visible.sync，来处理对话框显示状态的同步。
同样的，我们也可以使用 Antd Design Vue，借助 Vue 的 mixins 方法直接引用 antd 的组件：
import Vue from 'vue'; import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; Vue.use(Antd);
// javascriptcn.com 代码示例
<template>
<a-spin tip="正在加载..." size="large">
<div>我们的组件内容</div>
</a-spin>
</template>
<script>
export default {
mixins:[{
components: {
'a-spin': () => import('ant-design-vue/lib/spin')
}
}]
};
</script>如何扩展并自定义 UI 组件
在使用 UI 框架时，难免遇到需要定制的情况，例如修改主题颜色、定制特定样式等。针对这些情况，我们可以通过修改主题配置和样式覆盖等方法来进行相关调整和扩展。
修改主题配置
大部分框架都提供了类似的主题配置工具，例如 ElementUI 中的 element-theme 和 Antd Design Vue 中的 babel-plugin-import。这些工具都能帮助开发人员创建定制的主题配置，以展示动态改变。
以 Element UI 为例子，我们可以通过以下步骤生成一个新的主题文件：
- 安装
element-theme：
npm i element-theme -g
- 安装
element-theme-*配置包（默认使用 element-theme-chalk）：
npm i element-theme-chalk -D
- 生成一个 config.yml 文件用于配置新的主题：
// javascriptcn.com 代码示例 ##yaml name: theme-color ## 顶部导航栏，背景色和字体颜色 nav-background-color: "#409EFF" nav-text-color: "#fff" ## 强调色，即 primary 的色值 base-color: "#409EFF"
- 运行
et命令进行主题生成：
# 在项目根目录下运行 et -i src/assets/theme-color -o src/assets/theme-chalk
执行后，将在 src/assets/theme-chalk 目录下生成一份新的主题配置文件，并替换项目中默认的样式。
在 Vue.js SPA 项目中，我们通过在项目 CDN 之外引入由工具生成的主题文件（一般是 css 文件）来覆盖项目中的默认主题。
使用局部样式覆盖默认样式
有时候我们不得不使用局部样式覆盖组件中自带的默认样式，我们可以借助 Vue.js 的混合（mixins）技术，并将样式封装到指定组件中。
例如下面的样式，可以修改默认的主题颜色：
// javascriptcn.com 代码示例
.el-button.button {
background-color: #f8f8f8;
border-color: #f8f8f8;
color: #409eff;
}
.el-button.button:hover {
background-color: #ebebeb;
border-color: #ebebeb;
}则可以使用下面的方法局部引入：
// javascriptcn.com 代码示例
import './button.scss';
export default {
mixins: [
{
components: {
'el-button': ()=>import('element-ui/lib/button')
},
},
],
}在这个例子中，我们直接引入了 element-ui 中的 el-button 组件，并在组件的内部定义了一个局部样式并覆盖了组件中原有的样式。
总结
本篇文章详细介绍了在 Vue.js SPA 项目中使用 UI 框架的方法，以及说明了如何使用 UI 框架和自定义主题、继承和覆盖默认样式。通过这些技巧，我们能够有效地提高开发效率和开发质量，同时还能为项目带来更加美观和实用的界面组件。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654375907d4982a6ebd3ceac