npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

cvux

v1.4.12-beta.1

Published

A Vue.js project

Downloads

1,707

Readme

简介

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

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

安装使用

安装及环境配置

简介

Cvux是参照了Vux,基于WeUIVue(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组件单独打包。

线上文档地址