uview - 环境搭建详细教程（windows）

ゞ浴缸里的玫瑰 2022-12-29 14:02 490阅读 0赞

## 前言 ##

> uview 依赖 scss ，如果您还未安装该插件请先安装：[https://ext.dcloud.net.cn/plugin?id=2046][https_ext.dcloud.net.cn_plugin_id_2046]

声明，本文只适用于使用 `HBuilder X` 创建 `uni-app` 项目的小伙伴，如果您是使用 `vue-cli` 创建，请您移步其他文档资源或在本文寻找资源。

## 下载 ##

> 传送门：[https://ext.dcloud.net.cn/plugin?id=1593][https_ext.dcloud.net.cn_plugin_id_1593]

进入插件市场后，点击如下图所示下载按钮：  
![在这里插入图片描述][20201222211956291.png]  
下载后，您会得到 `manifest.json` 与 `uview-ui` ，此 `uview-ui` 文件夹便是框架整包。  
![在这里插入图片描述][20201222212249956.png]

## 第一步 ##

首先，您需要将 `uview` 文件夹复制到您 `uni-app` 项目的 **根目录**，如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70]  
后面的步骤，您将在项目中进行配置。

## 第二步 ##

> 注意：以下代码需要放置在 `import vue` 后，因为 `uview` 依赖 `vue`。

打开 `main.js` 文件，引入 `uview` 并全局注入。

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

## 第三步 ##

打开 `uni.scss` 文件，引入 `uview` 提供的全局 `css` 变量。

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

## 第四步 ##

> 注意：以下代码必须在首行的位置引入，且必须给 `style` 标签加入 `lang="scss"` 属性。

打开 `App.vue` 文件，引入 `uview` 提供的各平台差异样式。

@import "uview-ui/index.scss";

像这样：

## 第五步 ##

> 注意：请确保您的 `pages.json` 中只有一个 `easycom` 字段，否则请自行合并多个引入规则。

打开 `pages.json` 文件，在 `{ x }` 根部进行 `easycom` 组件模式配置。

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

至此，您已完成全部配置，请先重启编辑器，自行寻找组件测试即可。

## 写在后面 ##

> 简言：您配置完毕后，可直接使用组件及内置封装的 `js` 方法，打包后会自动剔除没有用到的组件。

由于 `uView` 使用 `easycom` 模式，让您无需引入组件即可直接使用，但是此功能需要 `Hbuilder X 2.5.5` 及以上版本才支持，详见配置 [easycom组件模式][easycom]。

`easycom` 打包的时候是按需引入的，您可以放心引入 `uView` 的整个组件库，发布打包时会自动剔除您没有使用的组件。需要注意的是，调试模式仍是全局引入。

[https_ext.dcloud.net.cn_plugin_id_2046]: https://ext.dcloud.net.cn/plugin?id=2046
[https_ext.dcloud.net.cn_plugin_id_1593]: https://ext.dcloud.net.cn/plugin?id=1593
[20201222211956291.png]: /images/20221120/cc5e030e641d4328909de73dde4c1ccb.png
[20201222212249956.png]: /images/20221120/acb2bab6d8cb47878a42f92ef954a32c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201222212418537.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ==,size_16,color_FFFFFF,t_70
[easycom]: https://www.uviewui.com/components/quickstart.html#_3-%E9%85%8D%E7%BD%AEeasycom%E7%BB%84%E4%BB%B6%E6%A8%A1%E5%BC%8F