1、安装scss

  • 如果您的项目是由HBuilder X创建的,相信已经安装scss插件,如果没有,请在HX菜单的 工具->插件安装中找到"scss/sass编译"插件进行安装, 如不生效,重启HX即可
  • 如果您的项目是由vue-cli创建的,请通过以下命令安装对sass(scss)的支持,如果已安装,请略过。
// 安装sass
npm i sass -D

2、在进行配置之前,请确保您已经对uView进行了npm安装,如果没有,请先执行安装:

npm install uview-ui@2.0.36

3、引入uView主JS库

// main.js
import uView from "uview-ui";
Vue.use(uView);

4、在引入uView的全局SCSS主题文件

/* uni.scss */
@import 'uview-ui/theme.scss';

5、引入uView基础样式

在App.vue中首行的位置引入,注意给style标签加入lang="scss"属性




<style lang="scss">
	/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>

6、配置easycom组件模式

// pages.json
{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

这样就算是配置完成了可以在自己页面尝试一下

<u-button type="primary" text="确定"></u-button>

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐