ViewUI 2025 最新版下载安装教程：Vue3 开源 UI 组件库快速上手

? 开发环境准备

? 安装 Node.js

?️ 安装 Vue CLI

? 创建 Vue3 项目

? 新建项目目录

⏳ 等待项目初始化

? 安装 ViewUI Plus

? 使用 npm 安装

? 检查安装结果

? 配置 ViewUI Plus

? 引入组件库

import { createApp } from 'vue'
import ViewUIPlus from 'view-ui-plus'
import 'view-ui-plus/dist/styles/viewuiplus.css'
import App from './App.vue'

const app = createApp(App)
app.use(ViewUIPlus)
app.mount('#app')

? 自定义主题

npm install sass-loader node-sass --save-dev

$--primary-color: #409eff;

import './styles/variables.scss'

? 开始使用 ViewUI Plus 组件

? 查看组件文档

? 在页面中使用组件

<template>
  <div>
    <Button type="primary">Primary ButtonButton>
  div>
template>

? 常见问题及解决方法

⚠️ 依赖冲突

1. 删除 node_modules 目录和 package-lock.json 文件。
2. 执行 npm cache clean --force 清理 npm 缓存。
3. 重新执行 npm install 安装依赖。

? 组件样式不生效

1. 是否正确引入了 ViewUI Plus 的样式文件。
2. 是否在 main.js 中注册了 ViewUI Plus。
3. 是否使用了正确的组件名称和属性。

? 主题定制失败

1. 安装了 sass-loader 和 node-sass。
2. 变量文件的路径正确，并且在 main.js 中导入。
3. 变量名称与 ViewUI Plus 的默认变量一致。

? 项目打包与部署

? 打包项目

npm run build

? 部署到服务器

? 总结