npm package: @lx-frontend/cvux
Description: A Vue.js project
Author: said
Latest version: 1.0.9

## 简介

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

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

<p class="warning">
  Life is short, use webpack.
</p>

## 安装及环境配置

### 1. 直接安装或者更新：

  ``` js
  npm install @lx-frontend/cvux --save
  ```

### 2. 插件配置：

  Cvux组件库必须配合`babel-plugin-component`插件使用，插件的安装和配置如下：

  插件安装：

  ```
  npm install --save-dev babel-plugin-component
  ```

  修改babel配置：

  ``` js
  "plugins": [
    [
      "component",
      {
        "libraryName": "@lx-frontend/cvux",
        "styleLibraryName": "cvux主题包路径" // 具体配置请看[主题库配置]小节
      }
    ]
  ]
  ```

### 3. 主题库配置

#### 1. 使用默认主题
  修改babel配置：

  ``` js
  "plugins": [
    [
      "component",
      {
        "libraryName": "@lx-frontend/cvux",
        "styleLibraryName": "@lx-frontend/cvux/theme-default" // 具体配置请看主题库配置小节
      }
    ]
  ]
  ```

#### 2. 使用外部独立主题库

  以独立主题库`@lx-frontend/cvux-theme-default`为例：

  1. 主题库安装

    `npm install --save @lx-frontend/cvux-theme-default`

  2. 插件配置

  ``` js
  "plugins": [
    [
      "component",
      {
        "libraryName": "@lx-frontend/cvux",
        "styleLibraryName": "~node_modules/@lx-frontend/cvux-theme-default/dist"
      }
    ]
  ]
  ```

### 4. css-loader：

  ``` js
  {
    test: /\.css$/,
    use: [
      'vue-style-loader',
      'css-loader'
    ]
  },
  ```

## 组件库使用

  以`import { ComponentName } from '@lx-frontend/cvux'`引入的组件，其样式文件会根据 `babel-plugin-component`插件的配置自动引入，无需手动处理。

  组件支持有两种注册方式：1. 局部注册；2. 全局注册。

### 1. 局部注册使用：(组件只在当前页面有效)

  在具体的页面，引入组件并注册。以`Datetime`组件为例，使用方式如下所示：

  ``` js
  // page.vue
  import { Datetime } from '@lx-frontend/cvux'

  export default {
    components: {
      Datetime
    }
    // ...
  }
  ```
  
  ```html
  <datetime v-model=...></datetime>
  ```

  这种方式适合项目较小，需要从Cvux引入的组件不多的情况，组件会以按需加载的方式引入到项目代码中，避免不需要的组件被加载。

### 2. 全局注册指引：

  Cvux支持以插件的形式将所有的组件注册为全局组件。在入口文件一次注册，即可在项目中使用组件而无需引入。

  为了防止全局组件命名冲突，在组件注册时为全局组件添加了‘lx’前缀。同样以`Datetime`组件为例：

  ``` js
  // 入口文件，main.js
  import { Datetime } from '@lx-frontend/cvux'
  import Vue from 'vue'

  Vue.use(Datetime)
  ```
  在具体的页面代码中，无需再次引入组件即可直接使用：

  ``` html
  <!-- page.vue -->
  <lx-datetime v-model=...></lx-datetime>
  ```
  这种方式下，组件仍然是按需引入，并且只会被引入一次。
  
  缺点是在开发的过程中，你不得不在需要使用某个组件的时候回到入口文件，确认组件是否已经引入，这可能是一个比较繁琐的过程，所以cvux还提供了一种简单的方式，将所有的组件一次性全部注册到全局的方式。

### 3. 所有组件的快捷引入：

  ``` js
  // 入口文件，main.js
  import Cvux from '@lx-frontend/cvux'
  import Vue from 'vue'

  Vue.use(Cvux)
  ```
  接下来你就可以直接在业务代码中使用所有的组件了，不过，不要忘记了加前缀。以`Datetime`组件为例：

  ``` html
  <!-- page.vue -->
  <lx-datetime v-model=...></lx-datetime>
  ```

  这种方式适合于需要用到几乎绝大部分组件的大型项目，同时，你也可以利用webpack的代码分割将cvux组件单独打包。

## 组件更新的注意事项

  1. 组件文件夹和组件命名相同，使用短线连接的小写字母。
  2. 每个组件的入口文件均为`index.js`，且该文件会被`build/gen-lessfile.js`脚本格式化。
  3. 组件的样式在`src/style`文件夹下的同名文件中，且每个组件必须有一个对应的less文件。
  4. 所有涉及到样式文件的修改，必须同步到`@lx-frontend/cvux`对应的主题库(`@lx-frontend/cvux-theme`)中。

## 主题库管理系统支持

主题库管理系统（`style-backend`）需要依赖一个可以直接以脚本形式引入，无需打包编译的库文件，该文件可以通过以下方式获得：

  1. `npm run dist-theme-lib`
  2. 复制目标文件`lib/cvux.js`到管理系统，替换原来的文件

## 线上文档地址

* [cvux](https://docs.cheanjiait.com/cvux/)
* [cvux](http://http://cvux.spacex.lan.cheanjia.net)