点击 工具 => 插件安装 => 安装新插件 => 前往插件市场安装 ，在这里你可以搜索自己需要的插件，我们以 sass 为例；找到需要的插件之后点击下载 => 使用Hbuilderx 导入插件，这里需要登录 sass 的网站，如果登录成功则会打开 Hbuilderx 编译器，然后点击确定就可以安装了；

3、新建 uni-app项目

Hbuilderx 点击 文件=>新增=>项目 ，本文新建一个小程序项目：uni-app => 填写项目名称、选择项目存放路径 => 模板 uni-ui 项目=>创建，然后就可以生成一个小程序项目；

components：组件文件
pages：页面文件
static：静态文件
uni_modules：依赖包
App.vue：应用配置，配置小程序全局样式、生命周期
main.js：Vue 初始化入口文件
manifest.json：配置应用名称 appid、logo、版本等打包信息
pages.json：配置页面路径、页面样式、tabBar等信息
uni,scss：全局样式

4、把项目运行到微信开发者工具

1、配置 appid

在 manifest.json 文件 => 微信小程序配置 填写微信小程序 appID；

2、在 Hbuilderx 配置微信开发者工具的安装路径：这样可以在 Hbuilderx 里面运行的时候自动打开微信开发者工具查看项目

工具 => 设置 => 运行配置 => 小程序运行配置 配置微信开发者工具的安装路径，如：C:\Program Files (x86)\Tencent\微信web开发者工具

3、在微信开发者工具开启服务端口

设置 => 安全设置 => 安全 开启服务端口

4、运行

Hbuilderx 点击 运行=>运行到小程序模拟器 点击第一个就可以在 Hbuilderx 自动编译，成功之后会自动打开微信开发者工具；

注意：这个时候我们想修改项目里面的内容，需要在 Hbuilderx 里面修改，例如修改配置：manifest.json 文件 => 源码视图

二、实现tabBar效果

1、创建tabBar页面

在 pages 下面创建，右键新建页面，这里创建的是 tanBar 对应的几个页面；记住这里要勾选"创建同名目录、在pages.json 中注册"两个选项，默认是选中的；（home、cate、cart、my）

2、配置tabBar

在 pages.json 文件中在 pages 平级新增 tabBar 的配置：

"tabBar":{
	"selectedColor":"#C00000",
	"list":[
		{
			"pagePath":"pages/home/home",
			"text":"首页",
			"iconPath":"static/c1.png",
			"selectedIconPath":"static/c2.png"
		},
		{
			"pagePath":"pages/cate/cate",
			"text":"分类",
			"iconPath":"static/c3.png",
			"selectedIconPath":"static/c4.png"
		},
		{
			"pagePath":"pages/cart/cart",
			"text":"购物车",
			"iconPath":"static/c5.png",
			"selectedIconPath":"static/c6.png"
		},
		{
			"pagePath":"pages/my/my",
			"text":"我的",
			"iconPath":"static/c7.png",
			"selectedIconPath":"static/c8.png"
		}
	]
}

注意：home 也必须在 pages 数组的第一位；还可以在 pages.json 文件修改 globalStyle 配置项，来自定义自己的导航条样式；

三、uni-ap