uniapp开发，安装uView UI框架

偏执的太偏执、 2023-03-05 03:18 80阅读 0赞

### 安装uview ui框架 ###

*   *   *  1. 根据\[uview ui官方文档\](https://uviewui.com/components/install.html)介绍：
         *  2. uView依赖SCSS，您必须要安装此插件，否则无法正常运行。
         *  3.配置步骤
         *  4.重新运行当前uniapp项目。

### 1. 根据[uview ui官方文档][uview ui]介绍： ###

> 如果您的项目是HBuilder X创建的，根目录又**没有package.json文件**的话，请先执行如下命令： // npm init -y
> 
> 安装 npm install uview-ui
> 
> 更新 npm update uview-ui (首次安装，无需执行。自动覆盖最新代码)

注意：**package.json文件**请检查创建项目的根目录是否有该文件，切勿以为是**pages.json**（这是类似微信小程序的app.json，做页面全局配置的文件）。

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

**安装方式一**：项目是由HBuilder X创建的==>去[DCloud插件市场][DCloud]  
![下载sass安装方式][sass]  
注意：此处需进行登录，若无账号，使用邮箱进行注册。

**安装方式二**：项目是由vue-cli创建的

> // 安装node-sass  
> npm i node-sass -D

> // 安装sass-loader  
> npm i sass-loader -D

### 3.配置步骤 ###

(1). **引入uView主JS库**==>在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。

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

(2). **引入uView的全局SCSS主题文件** ==>在项目根目录的uni.scss中引入此文件。

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

(3). **引入uView基础样式**==>在App.vue中**首行**的位置引入，注意给style标签加入lang="scss"属性

(4). **配置easycom组件模式**==>此配置需要在项目根目录的pages.json中进行  
该模式，会自动按需导入所用到的ui组件，推荐。

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

### 4.重新运行当前uniapp项目。 ###

> tip：建议初次使用，先浏览一遍ui框架里的组件，可极大方便日后开发需要。uView的手机模拟器会频繁出现未自适应的情况，遇到后，多按F5即可解决，亦或者安装好后，新建页面进行预览。

[uview ui]: https://uviewui.com/components/install.html
[DCloud]: https://ext.dcloud.net.cn/plugin?id=2046
[sass]: /images/20230208/5ea00a8502144ce58de4e0efd6ff8d67.png