Bootstrap 天然响应式
12分栏
cnpm install bootstrap 安装相关包
在index.html中引入文件后才可以用
如下：
<link rel="stylesheet" href="node_modules/_bootstrap@3.3.7@bootstrap/dist/css/bootstrap.min.css">
ElementUI
24分栏
elementUI使用：
- 安装 element-ui
cnpm i element-ui -D 即
cnpm install element-ui --save-dev
// i -> install
// D -> --save-dev
// S -> --save - 引入 在main.js 入口文件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
另外在webpack.config.js 中配置跟ElementUI相关组件的信息
{ test: /\.(eot|svg|ttf|woff|woff2)$/, /*配置ElementUI文件所需要的配置*/ loader: 'file-loader' },
3.引入使用全部 Vue.use(ElementUI)
4.实在不行的话直接去官网在index.html引入样式CDN
引入样式 反正也是练手
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
引入组件库
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
标签以 <el> 开头
Mint-ui
移动端 ui库 http://mint-ui.github.io/
- 下载
npm install mint-ui -S - 引入
import Vue from 'vue';
import Mint from 'mint-ui';
import 'mint-ui/lib/style.css'
Vue.use(Mint);
按需引入:
import { Cell, Checklist } from 'minu-ui';
Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist);
http://mint-ui.github.io/docs/#!/zh-cn2
Mint-ui-demo: 看着手册走了一遍
https://github.com/itstrive/striveCode/tree/js/vue2.0-Mint-ui-demo
标签以<mt>开头
