cvux

简介

Cvux是参照了Vux,基于WeUI和Vue(2.x)开发的移动端UI组件库，主要服务于微信页面。

基于webpack+vue-loader+cvux可以快速开发移动端页面。

Life is short, use webpack.

安装使用

安装及环境配置

简介

Cvux是参照了Vux,基于WeUI和Vue(2.x)开发的移动端UI组件库，主要服务于微信页面。

基于webpack+vue-loader+cvux可以快速开发移动端页面。

Life is short, use webpack.

安装及环境配置

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组件单独打包。

线上文档地址

• cvux
• cvux