cvux
v1.4.12-beta.1
Published
A Vue.js project
Downloads
1,574
Maintainers
Keywords
Readme
简介
Cvux是参照了Vux,基于WeUI
和Vue
(2.x)开发的移动端UI组件库,主要服务于微信页面。
基于webpack
+vue-loader
+cvux
可以快速开发移动端页面。
安装使用
安装及环境配置
简介
Cvux是参照了Vux,基于WeUI
和Vue
(2.x)开发的移动端UI组件库,主要服务于微信页面。
基于webpack
+vue-loader
+cvux
可以快速开发移动端页面。
安装及环境配置
1. 直接安装或者更新:
npm install cvux --save
2. 插件配置:
Cvux组件库必须配合babel-plugin-component
插件使用,插件的安装和配置如下:
插件安装:
npm install --save-dev babel-plugin-component
修改babel配置:
"plugins": [
[
"component",
{
"libraryName": "cvux",
"styleLibraryName": "theme-default"
}
]
]
3. css-loader:
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
组件库使用
组件支持有两种注册方式:1. 局部注册;2. 全局注册。
1. 局部注册使用:(组件只在当前页面有效)
在具体的页面,引入组件并注册。以Datetime
组件为例,使用方式如下所示:
// page.vue
import { Datetime } from 'cvux'
export default {
components: {
Datetime
}
// ...
}
<datetime v-model=...></datetime>
这种方式适合项目较小,需要从Cvux引入的组件不多的情况,组件会以按需加载的方式引入到项目代码中,避免不需要的组件被加载。
2. 全局注册指引:
Cvux支持以插件的形式将所有的组件注册为全局组件。在入口文件一次注册,即可在项目中使用组件而无需引入。
为了防止全局组件命名冲突,在组件注册时为全局组件添加了‘lx’前缀。同样以Datetime
组件为例:
// 入口文件,main.js
import { Datetime } from 'cvux'
import Vue from 'vue'
Vue.use(Datetime)
在具体的页面代码中,无需再次引入组件即可直接使用:
<!-- page.vue -->
<lx-datetime v-model=...></lx-datetime>
这种方式下,组件仍然是按需引入,并且只会被引入一次。
缺点是在开发的过程中,你不得不在需要使用某个组件的时候回到入口文件,确认组件是否已经引入,这可能是一个比较繁琐的过程,所以cvux还提供了一种简单的方式,将所有的组件一次性全部注册到全局的方式。
3. 所有组件的快捷引入:
// 入口文件,main.js
import Cvux from 'cvux'
import Vue from 'vue'
Vue.use(Cvux)
接下来你就可以直接在业务代码中使用所有的组件了,不过,不要忘记了加前缀。以Datetime
组件为例:
<!-- page.vue -->
<lx-datetime v-model=...></lx-datetime>
这种方式适合于需要用到几乎绝大部分组件的大型项目,同时,你也可以利用webpack的代码分割将cvux组件单独打包。