HBuilder X 创建并搭建uview项目

1.创建uni-app项目

HBuilder X 创建并搭建uview项目_第1张图片

2、在项目的根目录输入命令安装

// 安装
npm install uview-ui

以管理员身份运行

 HBuilder X 创建并搭建uview项目_第2张图片

 3、如果安装成功文件下面会出现node_modules目录

HBuilder X 创建并搭建uview项目_第3张图片

4、引入uView主JS库

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

 HBuilder X 创建并搭建uview项目_第4张图片

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

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

HBuilder X 创建并搭建uview项目_第5张图片

 6、引入uView基础样式

HBuilder X 创建并搭建uview项目_第6张图片

7、配置easycom组件模式

"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},

 HBuilder X 创建并搭建uview项目_第7张图片

8、在vue文件中引用相关组件,就可以运行得到相应效果 

HBuilder X 创建并搭建uview项目_第8张图片

微信小程序开发工具运行效果如下: 

HBuilder X 创建并搭建uview项目_第9张图片

你可能感兴趣的:(前端,前端,vue.js,javascript)