目录
- 一.安装方式
- 二.配置
一.安装方式
- 1.直接下载安装
- 2.npm 安装 ( 推荐 , 方便更新 )
以下介绍分HX创建项目和vue-cli创建项目两种
1.直接下载安装
下载地址：https://ext.dcloud.net.cn/plugin?id=1593
-
HX创建的标准uni-app项目，将下载后的uview-ui文件夹复制到项目根目录即可。 -
vue-cli模式创建的项目， 将下载后的uview-ui文件夹放到项目的src文件夹中即可。
npm安装
-
HX创建的标准uni-app项目
安装之前，先确保已经使用了npm，如果没有，请先执行安装：
// HX创建的，根目录又没有package.json文件的话，请先执行如下命令：
npm init
// 安装完毕后,安装uView
npm install uview-ui
-
vue-cli模式创建的项目,直接npm安装uView即可
// 安装
npm install uview-ui
二.配置
1.安装SCSS
tip:uView 依赖 SCSS，必须要安装此插件
-
HX创建的标准uni-app项目,应该已经安装了scss插件
若未安装:
工具->插件安装中 找到scss/sass编译插件进行安装(若不生效,重启HX即可)
-
vue-cli模式创建的项目，通过以下命令安装对sass(scss)的支持，如果已安装，请略过。
// 安装node-sass
npm i node-sass -D
// 安装sass-loader
npm i sass-loader -D
2.main.js引入uView主JS库
在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。
// main.js
import uView from "uview-ui";
Vue.use(uView);
3. uni.scss中在引入uView的全局SCSS主题文件
在项目根目录的uni.scss中引入此文件。
/* uni.scss */
@import 'uview-ui/theme.scss';
4. App.vue中引入uView基础样式
需要在App.vue中首行的位置引入，并给style标签加入lang="scss"属性
<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss";
</style>
5.pages.json中配置easycom组件模式
此配置需要在项目根目录的pages.json中进行。
温馨提示
uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。
请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。
// pages.json
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
好了，接下來就可以直接在項目中使用uView了
网友评论