View UI的入门配置流程
晁砚
一、View UI（iView）是一款开源免费的 Vue.js UI 组件库
（访问官网可以查看具体指南和使用组件）
二、View UI 的两种使用方式
1、直接使用提供的CDN，引入链接即可使用
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script><link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
<script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>第一条CDN为vue.js
最后两条CDN是必需引入的view ui文件
示例代码：（运行后通过点击可以显示一个信息框）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ViewUI example</title>
<link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
</head>
<body>
<div id="app">
<i-button @click="show">Click me!</i-button>
<Modal v-model="visible" title="Welcome">Welcome to ViewUI</Modal>
</div>
<script>
new Vue({
el: '#app',
data: {
visible: false
},
methods: {
show: function () {
this.visible = true;
}
}
})
</script>
</body>
</html>
2、若已经安装过vue-cli，可以使用进入自己需要的vue项目目录，运行cmd代码：
npm install view-design --save然后在你的vue项目中的main.js中引入相关库文件：
// 1. 引入库
import ViewUI from 'view-design'
// 2. 引入样式文件
import 'view-design/dist/styles/iview.css'
// 3. 使用
Vue.use(ViewUI)这样就可以再引入使用view ui的组件了，只要根据自己的业务需要进行一定的修改就可以了~
类似资料：