HBuilder X安装配置uview记录

uview是什么?如下官方解释:

HBuilder X安装配置uview记录_第1张图片

第一步:打开官方文档去看安装说明,两种方式,这边选择第二种npm安装

HBuilder X安装配置uview记录_第2张图片

 官网有这样子的提示:

// 如果您的项目是HX创建的,根目录又没有package.json文件的话,请先执行如下命令:
// npm init -y(不能少,获取那个node_modules包文件必备)
// 安装
npm install uview-ui
// 更新
npm update uview-ui

第二步:我们先用HX创建一个项目,下图是创建好的目录,可以看到根目录下没有package.json文件,所以这时我们需要打开终端,一开始点击运行到终端会有一个提示:本项目下未包含package.json文件,所以我们可以先运行到内置浏览器,点击新建一个终端标签卡,打开终端

HBuilder X安装配置uview记录_第3张图片HBuilder X安装配置uview记录_第4张图片

 HBuilder X安装配置uview记录_第5张图片

HBuilder X安装配置uview记录_第6张图片

第三步:现在开始输入npm命令:npm init -y,执行结束会多出一个package.jsonHBuilder X安装配置uview记录_第7张图片

 HBuilder X安装配置uview记录_第8张图片

第四步,执行npm install uview-ui命令,结束会看到多了一个node_modules文件 

HBuilder X安装配置uview记录_第9张图片

安装完成下一步就是配置,选择npm方式安装的配置

HBuilder X安装配置uview记录_第10张图片

第五步:配置,步骤官方图如下:

HBuilder X安装配置uview记录_第11张图片

HBuilder X安装配置uview记录_第12张图片

HBuilder X安装配置uview记录_第13张图片

(1)引入uView主JS库

HBuilder X安装配置uview记录_第14张图片

 (2)在引入uView的全局SCSS主题文件

HBuilder X安装配置uview记录_第15张图片

(3)引入uView基础样式

HBuilder X安装配置uview记录_第16张图片

(4)配置easycom组件模式,配置完成重启一下HX

HBuilder X安装配置uview记录_第17张图片

重启完成之后验证一下uview是否引入并且配置成功,去复制组件里面的代码粘贴运行看看

HBuilder X安装配置uview记录_第18张图片

 HBuilder X安装配置uview记录_第19张图片

 按钮能够成功显示,就代表没问题了!!

确实很简单,但是还是想要记录一下!!!

你可能感兴趣的:(javascript,开发语言,ecmascript)