uniapp中安装uview-ui踩坑记录

uview-ui安装有两种方式：

 

一通过hxbuild编辑器新建的项目。在插件市场安装uview。

这里需要注意的一点是。如果选择的是通过xbuildx导入插件的方式。xbuild会把uview的组件一次性导入到根目录下的components文件夹下。这时候在pages中配置

"easycom": {
            "^u-(.*)": "@/components/u-$1/u-$1.vue"
    },

时要注意路径。官方给的路径是

"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"

这时候是没有uview这个文件夹的。此时页面引入组件就会报错。组件没有定义。所以要改成@、component或者在根路径下新建一个uview文件夹

但是因为导入了过多的组件到项目。会导致项目体积过多。在小程序开发者工具中预览会提示

二  完全通过vue-cli的方式进行安装。

基本步骤：

（1）vue create -p dcloudio/uni-preset-vue my-project

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

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

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

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

后面步骤和官方一致。省略....这里一定要注意sass-loader和node-sass的版本。

这里会有很大一个坑。我经过测试发现以下版本是可以正常运行

cnpm i [email protected]
cnpm i sass@lateset  

三：通过xbuild生成模板，然后npm下载。（混合方式）操作如下：

（1）选择默认模板

 （2）进入目录。在根目录通过Npm init 生成package.json文件

   (3) 通过npm i uview-ui 下载组件库，后面步骤与官网一致

   注意：easycom配置的时候注意是uview-ui/，意味着直接通过node_modules查找

"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},

建议通过xbuid来生成项目，配合插件市场来开发。比较稳定省去了npm安装依赖不匹配问题