cloud-ui.vusion
Version:
Vusion Cloud UI
128 lines (98 loc) • 4.36 kB
Markdown
# Quickstart 快速开始
[](http://npmjs.org/package/cloud-ui.vusion)
Cloud UI 是网易云计算前端团队推出的一款基于 Vusion 的桌面端组件库，主要服务于网易云控制台及相关产品。
该组件库经过大量的项目实践和总结，数量丰富、功能完善。可以大大降低开发成本，为产品提供更好的用户体验。
### 特性
- 高质量、数量丰富、功能完善
- 开箱即用、扩展灵活
- 持续维护更新
### 支持环境
- 支持 Vue.js 2.x
- 支持现代浏览器和 IE9 及以上
### 如何贡献
- 使用中存在问题，可以给我们 [报告 Bug](https://github.com/vusion/cloud-ui/issues)
- 希望参与贡献，欢迎 [Pull Request](https://github.com/vusion/cloud-ui/pulls)
## 安装与引入
组件库的安装与引入有三种方式。推荐使用 npm 的安装方式，可以和 Webpack 以及其他 npm 生态很好地结合使用。
### npm 安装，全部引入
使用 npm 安装组件库`cloud-ui.vusion`
``` shell
npm i --save cloud-ui.vusion
```
引入`dist`目录下的 JS 和 CSS 文件
``` js
import Vue from 'vue';
import * as CloudUI from 'cloud-ui.vusion/dist';
import 'cloud-ui.vusion/dist/index.css';
// 如需引入其他主题，将上面的路径替换为如下不同的主题样式
// import 'cloud-ui.vusion/dist/theme-dark.css';
Vue.use(CloudUI); // 全局安装组件库中的组件、指令等
```
- 优点：
- 方便快捷，可以很容易使用组件库的全部功能
- 开发时速度较快
- 项目可以不使用 Vusion CLI，并且 Webpack 配置不需要跟随 Vusion 体系配置
- 不需要考虑组件之间的依赖关系
- 缺点：
- 引入整体库体积较大
- 组件样式无法根据项目中的`global.css`作变更
- 组件库中的资源文件（字体、图片等）不会自动和项目中的资源文件打包在一起
### npm 安装，按需引入
使用 npm 安装组件库`cloud-ui.vusion`
``` shell
npm i --save cloud-ui.vusion
```
引入`install`函数进行安装
``` js
import Vue from 'vue';
import { install, directives, UButton, UText, UInput } from 'cloud-ui.vusion';
install(Vue, { directives, UButton, UText, UInput }); // 全局安装组件库中的组件、指令等等
```
- 优点：
- 打包时可以利用 TreeShaking 效果，去除不必要的组件，减少打包体积
- 组件样式可以根据项目中的`global.css`作变更
- 组件库中的资源文件（字体、图片等）可以和项目中的资源文件打包在一起
- 缺点：
- 项目需要使用 Vusion CLI 启动，或者 Webpack 配置需要完全跟随 Vusion 体系配置
- 引入时需要考虑组件的隐性依赖关系。比如：`<u-cascade-select>`中使用了`<u-select>`，如果在引入 UCascadeSelect 时没有引入 USelect，就会出问题。（隐性依赖是为了支持组件的可替换性）
- 开发时速度较慢，因为需要对组件库中的源文件进行编译
### CDN 引入
通过 [unpkg.com/cloud-ui.vusion](https://unpkg.com/cloud-ui.vusion) 可以看到 Cloud UI 的最新版本的资源，在页面上引入 JS 和 CSS 文件即可开始使用：
``` htm
<link rel="stylesheet" href="https://unpkg.com/cloud-ui.vusion/dist/index.css">
<!-- 如需引入其他主题，将上面的路径替换为如下不同的主题样式 -->
<!-- link rel="stylesheet" href="https://unpkg.com/cloud-ui.vusion/dist/theme-dark.css" -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/cloud-ui.vusion/dist/index.js"></script>
<script>
Vue.use(CloudUI);
</script>
```
``` htm
<html>
<head>
<meta charset="utf-8">
<title>Vusion Example</title>
<link rel="stylesheet" href="https://unpkg.com/cloud-ui.vusion/dist/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/cloud-ui.vusion/dist/index.js"></script>
</head>
<body>
<div id="app">
<u-button @click="show">Click me!</u-button>
</div>
<script>
Vue.use(CloudUI);
new Vue({
el: '#app',
methods: {
show() {
this.$alert('Hello World!');
},
},
});
</script>
</body>
</html>
```