uniapp中安装uview-ui踩坑记录
uniapp--开发
文章共585字 · 阅读需要大约2分钟
一键AI生成摘要,助你高效阅读
问答
·
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 sass-loader@10.0.1
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安装依赖不匹配问题
更多推荐
已为社区贡献1条内容
所有评论(0)