3.安装uview组件

官网地址

https://vkuviewdoc.fsq.pub/
https://vkuviewdoc.fsq.pub/components/install.html

uView Vue3.0 横空出世，继承uView1.0意志，再战江湖，风云再起！
同时支持 Vue3.0 和 Vue2.0，你没看错，现在 uView 支持 Vue3.0 了！（不支持nvue，此版本为uView1.0的分支）

插件市场

https://ext.dcloud.net.cn/plugin?id=6692

安装sass及sass-loader

1. 进入到项目根目录shop-zy下,执行
   npm i sass -D
npm i sass-loader@10.1.1 -D
2. 先点击下载插件并导入HBuilder

出现错误

依赖出错，重新安装依赖，或下载node_modules代替文件

3. 从uniapp插件市场安装uview
   https://ext.dcloud.net.cn/plugin?id=6692
   点击使用Hbuilder导入插件

4. main.js引入vk-uview-ui

 import uView from './uni_modules/vk-uview-ui';
 Vue.use(uView);

如下:

import {
	createSSRApp
} from "vue";
//引入uview UI
import uView from './uni_modules/vk-uview-ui';
import App from "./App.vue";
export function createApp() {
	const app = createSSRApp(App);
  //使用uview UI
  app.use(uView);
	return {
		app,
	};
}

5. app.vue引入基础样式（注意 style标签要声明scss属性支持

<style lang="scss">
    @import "./uni_modules/vk-uview-ui/index.scss";
</style>

如下：

<script>
export default {
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  },
}
</script>

<style lang="scss">
    @import "./uni_modules/vk-uview-ui/index.scss";
</style>

6. uni.scss引入全局scss变量文件

@import "@/uni_modules/vk-uview-ui/theme.scss";

7. 测试
   在首页中添加代码

<template>
  <view class="content">
    <u-button type="primary">主要按钮</u-button>
    <u-button type="success">成功按钮</u-button>
    <u-button type="info">信息按钮</u-button>
  </view>
</template>

出现

表示成功