交互设计网站案例,个人 网站备案,淮南吧,广东建设协会网站首页目录
easycom
自定义easycom配置的示例
npm安装 uni-ui
准备 sass
安装 uni-ui
注意 easycom
传统vue组件#xff0c;需要安装、引用、注册#xff0c;三个步骤后才能使用组件。easycom将其精简为一步。
只要组件路径符合规范#xff08;具体见下#xff09;#…目录
easycom
自定义easycom配置的示例
npm安装 uni-ui
准备 sass
安装 uni-ui
注意 easycom
传统vue组件需要安装、引用、注册三个步骤后才能使用组件。easycom将其精简为一步。
只要组件路径符合规范具体见下就可以不用引用、注册直接在页面中使用。如下
templateview classcontainercomp-a/comp-auni-list/uni-list/view
/template
script// 这里不用import引入也不需要在components内注册uni-list组件。template里就可以直接用export default {data() {return {}}}
/script 路径规范指 安装在项目根目录的components目录下并符合components/组件名称/组件名称.vue安装在uni_modules下路径为uni_modules/插件ID/components/组件名称/组件名称.vue 工程目录
┌─components
│ └─comp-a
│ └─comp-a.vue 符合easycom规范的组件
└─uni_modules [uni_module](/plugin/uni_modules.md)中符合easycom规范的组件└─uni_modules└─uni-list└─components└─uni-list└─ uni-list.vue
不管components目录下安装了多少组件easycom打包会自动剔除没有使用的组件对组件库的使用尤为友好。
组件库批量安装随意使用自动按需打包。以官方的uni-ui为例在HBuilderX新建项目界面选择uni-ui项目模板只需在页面中敲u拉出大量组件代码块直接选择即可使用。大幅提升开发效率降低使用门槛。
在uni-app插件市场下载符合components/组件名称/组件名称.vue目录结构的组件均可直接使用。
自定义easycom配置的示例
easycom是自动开启的不需要手动开启有需求时可以在pages.json的easycom节点进行个性化设置如关闭自动扫描或自定义扫描匹配组件的策略。设置参数如下
属性类型默认值描述autoscanBooleantrue是否开启自动扫描开启后将会自动扫描符合components/组件名称/组件名称.vue目录结构的组件customObject-以正则方式自定义组件匹配规则。如果autoscan不能满足需求可以使用custom自定义匹配规则
如果你的组件不符合easycom前述的路径规范。可以在pages.json的easycom节点中自行定义路径规范。
如果需要匹配node_modules内的vue文件需要使用packageName/path/to/vue-file-$1.vue形式的匹配规则其中packageName为安装的包名/path/to/vue-file-$1.vue为vue文件在包内的路径。
easycom: {autoscan: true,custom: {^uni-(.*): /components/uni-$1.vue, // 匹配components目录内的vue文件^vue-file-(.*): packageName/path/to/vue-file-$1.vue // 匹配node_modules内的vue文件}
}
说明
easycom方式引入的组件无需在页面内import也不需要在components内声明即可在任意页面使用。easycom方式引入组件不是全局引入而是局部引入。例如在H5端只有加载相应页面才会加载使用的组件。在组件名完全一致的情况下easycom引入的优先级低于手动引入区分连字符形式与驼峰形式。考虑到编译速度直接在pages.json内修改easycom不会触发重新编译需要改动页面内容触发。easycom只处理vue组件不处理小程序专用组件如微信的wxml格式组件。不处理后缀为.nvue的组件。因为nvue页面引入的组件也是.vue组件。可以参考uni ui使用vue后缀同时兼容nvue页面。nvue页面里引用.vue后缀的组件会按照nvue方式使用原生渲染其中不支持的css会被忽略掉。这种情况同样支持easycom。vue 与 uvue 组件优先级详见。 注意这里作者遇到一个问题 如果你引入的组件文件包含package.json 比如MonoRepo项目中 并且配置了 exports 字段 对外其实是封闭的 导致 easycom 扫描不到组件建议配置 ./*: ./src/* 放开 exports 的限制 exports: {./baseCss: ./src/assets/base.css,.: ./src/index.js,./*: ./src/*}
} npm安装 uni-ui
在 -项目中可以使用 npm 安装 uni-ui 库 或者直接在 HBuilderX 项目中使用 npm 。 注意 cli 项目默认是不编译 node_modules 下的组件的导致条件编译等功能失效 导致组件异常 需要在根目录创建 vue.config.js 文件 增加 dcloudio/uni-ui 包的编译即可正常 // 在根目录创建 vue.config.js 文件并配置如下
module.exports {transpileDependencies: [dcloudio/uni-ui]
}
// 如果是 vue3 vite, 无需添加配置 准备 sass
vue-cli 项目请先安装 sass 及 sass-loader如在 HBuliderX 中使用可跳过此步。
安装 sass npm i sass -D 或 yarn add sass -D 安装 sass-loader
npm i sass-loader10.1.1 -D 或 yarn add sass-loader10.1.1 -D如果 node 版本小于 16 sass-loader 请使用低于 11.0.0 的版本sass-loader11.0.0 不支持 vue2.6.12 如果 node 版本大于 16 sass-loader 建议使用 v8.x 版本 安装 uni-ui
npm i dcloudio/uni-ui 或 yarn add dcloudio/uni-ui配置easycom
使用 npm 安装好 uni-ui 之后需要配置 easycom 规则让 npm 安装的组件支持 easycom
打开项目根目录下的 pages.json 并添加 easycom 节点
// pages.json
{easycom: {autoscan: true,custom: {// uni-ui 规则如下配置^uni-(.*): dcloudio/uni-ui/lib/uni-$1/uni-$1.vue}},// 其他内容pages:[// ...]
}在 template 中使用组件
uni-badge text1/uni-badge
uni-badge text2 typesuccess clickbindClick/uni-badge
uni-badge text3 typeprimary :invertedtrue/uni-badge
注意
uni-ui 现在只推荐使用 easycom 如自己引用组件可能会出现组件找不到的问题
使用 npm 安装的组件默认情况下 babel-loader 会忽略所有 node_modules 中的文件 导致条件编译失效需要通过配置 vue.config.js 解决
// 在根目录创建 vue.config.js 文件并配置如下
module.exports {transpileDependencies: [dcloudio/uni-ui]
}
// 如果是 vue3 vite, 无需添加配置uni-ui 是uni-app内置组件的扩展。注意与web开发不同uni-ui不包括基础组件它是基础组件的补充。web开发中有的开发者习惯用一个ui库完成所有开发但在uni-app体系中推荐开发者首先使用性能更高的基础组件然后按需引入必要的扩展组件。
uni-ui 不支持使用 Vue.use() 的方式安装
