ECN>> vmc>> 返回
项目作者: Spikef

项目描述 :
VMC是一套针对移动端开发的组件库,分别适用于vue1和vue2。
高级语言: CSS
项目地址: git://github.com/Spikef/vmc.git
创建时间: 2016-11-02T08:01:44Z
项目社区:https://github.com/Spikef/vmc

开源协议:

下载


VMC

Mobile components for vue@2.2.1+.

如果需要在vue1.x上使用vmc,请查看@1x"">@1x分支。

View Demos

特性介绍

VMC是一套针对移动端开发的组件库,适用于vue@2.2.1+

  • 将使用频度高的组件全局化,直接注册到Vue实例化对象上;
  • 全部样式基于LESS,并允许通过覆盖LESS变量的方式快速初始化组件样式;
  • 同时,你也可以选择使用SASS,我们同样提供了基于SCSS的样式表;
  • 可以通过属性来单独定义每个组件的样式(写到style上,这样便能覆盖在LESS中定义的全局样式)。

如何引用

基于webpack的SPA模式

安装与引用

  1. $ npm install vmc --save

注册全局组件

在入口文件中添加以下内容:

  1. import VMC from 'vmc/install';
  2. Vue.use(VMC);

引入组件样式

通过LESS变量覆盖,可以自定义组件的一些初始样式,因此,需要手动引入LESS文件。

  1. @import "vmc/src/styles/vmc.less";
  2. @import "assets/less/vmc.custom.less"; // 自定义变量覆盖,参考styles/base/variable.less

或者使用SASS变量覆盖,来自定义组件的一些初始样式,同样需要手动引入SCSS文件。

  1. @import "assets/scss/vmc.custom.scss"; // 自定义变量覆盖,参考scss/base/variable.scss
  2. @import "vmc/src/scss/vmc.scss";

引用组件

  1. import { Navbar } from 'vmc';

普通标签方式引用

安装与引用

直接下载dist目录下的vmc.cssvmc.js两个文件。

  1. <link rel="stylesheet" href="vmc.css">
  2. <div id="app">
  3. <v-button type="success" @click="$Alert('Hello world!')">按钮</v-button>
  4. </div>
  5. <script src="vue.js"></script>
  6. <script src="vmc.js"></script>
  7. <script>
  8. new Vue({
  9. el: '#app'
  10. });
  11. </script>

注册全局组件

这种方式会自动注册全局组件,同时自动注册所有组件,无需额外操作。

组件列表

CSS组件

JS组件

开发与编译

开发

  1. $ npm run dev

命令执行之后会自动跑examples目录下的文件,用于开发调试。

发布

  1. $ npm run release

命令执行之后会将vmc发布到dist目录下。

编译

  1. $ npm run build

命令执行之后会自动将examples目录下的文件打包到docs目录下。

预览

  1. $ npm run docs

命令执行之后会将docs目录作为一个静态的文档服务器资源,可以从浏览器直接访问。

License

MIT