uViewUI 安装方式

安装方式一

        1. 链接：https://ext.dcloud.net.cn/plugin?id=1593

        2. 下载并导入 Hbuilder X

安装方式二

        1. 如果根目录没有package.json文件，则在项目根目录执行（如果有该文件则忽略）

npm init -y

        2. 在项目根目录执行 

npm install [email protected]

        3. 更新命令

npm update uview-ui

安装后的配置

1. uView依赖SCSS，必须要安装此插件，否则无法正常运行。

• 如果项目是由 HBuilder X 创建的，如果没有 scss 插件，则在菜单的工具 -> 插件安装中找到【scss/sass编译】插件进行安装， 如不生效，重启即可
• 如果项目是由vue-cli创建的，如果没有 scss 插件，则通过命令安装对sass(scss)的支持 

// 安装sass
npm i sass -D

// 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错
npm i sass-loader@10 -D

2. 引入uView主JS库 

• 在项目 src 目录中的 main.js 中，引入并使用 uView 的 JS 库，注意这两行要放在 import Vue 之后。

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

3. 引入uView的全局SCSS主题文件 

• 在项目 src 目录的 uni.scss 中引入此文件。

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

4. 引入uView基础样式

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

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

 5. 配置easycom组件模式

• 此配置需要在项目src目录的 pages.json 中进行。

注：

• uni-app 为了调试性能的原因，修改 easycom 规则不会实时生效，配置完后，需要重启HX或者重新编译项目才能正常使用uView的功能。
• 确保pages.json中只有一个easycom字段，否则请自行合并多个引入规则。

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

6. Cli模式额外配置

• 如果是vue-cli模式的项目，还需要在项目根目录的vue.config.js文件中进行该配置

// vue.config.js，如没有此文件则手动创建
module.exports = {
    transpileDependencies: ['uview-ui']
}