Vue项目引入组件库

目录

Vue 2.0的项目扩展
1.如何舒服地使用Atom
  安装插件
  配置皮肤颜色
2.Vue项目引入组件库
  引入方式
  支持ES2015
  Mint UI
  ElementUI
  iView
  Vonic
  MuseUI
3.Vue项目的调试工具
  vue-devtools
  移动端调试
    Chrome DevTools
    Safari Web Inspector
    Eruda
    spy-debuger
4.Vue项目官方依赖库
  vue-loder
  vue-router
  Vuex
5.Vue项目第三方依赖库
  ESlint
    ESlint规则摘要
    ESlint规则风格
    ESlint忽略文件

为了快速地搭建页面，你应该尽可能多地使用现成的Vue组件，如果有特殊的界面定制，也建议在现有组件库的基础上做封装，直到你具备足够的能力自己写组件。

目前有这些比较不错的组件库：Mint UI、ElementUI、Vonic、iView、MuseUI、VUWE、RadonUI、Vue Antd、N3、Vuikit、VUX、vue-impression、Framework7

下面的截图是笔者最开始接触Vue组件库时，抽取的六个组件库做的对比：

Vue组件库比较

可以看出iView和ElementUI是针对桌面端的组件库，并且具备很齐全的组件，而MintUI是针对移动端的组件库。

但并不是说移动端开发不能引用桌面端的组件，实际开发中是可以按需引入多个组件库的，笔者是MintUI+iView。移动端的开发为了优化性能，一定要按需引入，也叫部分引入、局部引入。下面会讲到怎么按需引入。

引入方式

npm安装

推荐使用 npm 的方式安装，它能和 webpack 打包工具配合使用，方便管理。

组件库的部分引入的方式只能通过npm进行，CDN不能实现部分引入

// 进入项目目录
cd desktop/project
// 安装插件并保存到package.json的dependencies（默认）
cnpm install mint-ui --save  // 相当于 cnpm install mint-ui -S cnpm 和 cnpm i mint-ui -S
// or 安装插件并保存到package.json的devDependencies
cnpm install mint-ui --save-dev // 相当于 cnpm install mint-ui -D 和 cnpm i mint-ui -D
// 卸载dependencies插件 
cnpm uninstall mint-ui --save
// 卸载devDependencies插件
cnpm uninstall mint-ui --save-dev

CDN引入

<!-- 引入Vue -->
<script src="https://vuejs.org/js/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>

支持ES2015

为了性能着想，移动端开发一定要采用部分引入的方式组件库。

通过部分引入的方式，引入组件库之前，必须要支持ES2015，否则会报错。下面截图是Mint-UI的部分引入要求的配置：

Mint-UI的部分引入要求配置的es2015
错误：babel_preset_es2015找不到

NPM引入

npm install babel-preset-es2015 -D

Mint UI

MintUI是由饿了么前端团队推出的移动端组件库，简洁、轻量级，正因为轻量级所以也缺少一些组件，在实际开发中，还需要引入第二套组件库作为补充，比如桌面端的iView或ElementUI

npm安装

npm i mint-ui -S

完整引入

// 在 main.js 中写入以下内容
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'

Vue.use(MintUI)

new Vue({
  el: '#app',
  components: { App }
})

按需引入

// 需要先安装插件 babel-plugin-component
npm install babel-plugin-component -D

// 将 .babelrc 修改为：
{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

// 在 main.js 中写入以下内容
import Vue from 'vue'
import { Button, Cell } from 'mint-ui'
import App from './App.vue'

Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)

new Vue({
  el: '#app',
  components: { App }
})

CDN

目前可以通过 unpkg.com/mint-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用

<!-- 引入Vue -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>

关于事件绑定

在 Vue 2.0 中，为自定义组件绑定原生事件必须使用 .native 修饰符：

<my-component @click.native="handleClick">Click Me</my-component>

从易用性的角度出发，MintUI对 Button 组件进行了处理，使它可以监听 click 事件：

<mt-button @click="handleButtonClick">Click Me</mt-button>

但是对于其他组件，还是需要添加 .native 修饰符。

ElementUI

ElementUI也是由饿了么前端团队推出的组件库，针对桌面端做的组件库，是Vue开发者使用最多的桌面端组件库。尽管使用数量最多，但我感觉iView比ElementUI做得更好一些。

npm安装

npm i element-ui -S

完整引入

// 在 main.js 中写入以下内容
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import App from './App.vue'

Vue.use(ElementUI)

new Vue({
  el: '#app',
  components: { App }
})

按需引入

// 需要先安装插件 babel-plugin-component
npm install babel-plugin-component -D

// 将 .babelrc 修改为：
{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-default"
    }
  ]]]
}

// 在 main.js 中写入以下内容
import Vue from 'vue'
import { Button, Select } from 'element-ui'
import App from './App.vue'

Vue.component(Button.name, Button)
Vue.component(Select.name, Select)

new Vue({
  el: '#app',
  components: { App }
})

CDN

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用

<!-- 引入Vue -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

iView

iView是由 TalkingData推出的面向桌面端、后台业务的组件库，笔者使用感受，觉得它比ElementUI更强大，无论是文档质量、demo质量、组件数量方面，同时配有脚手架iView Cli，虽然ElementUI也有推出脚手架，但iView的脚手架封装了可视化操作界面，这一点还是比较人性化的。

iView组件库的结构如下：

iview组件结构

下图iView与Element的依赖库对比，可以看出iView的封装更为高效、简洁：

iview和element对比

npm安装

npm i iview -S

完整引入

// 在 main.js 中写入以下内容
import Vue from 'vue'
import App from './App.vue'
import 'iview/dist/styles/iview.css'    // 使用 CSS
import iView from 'iview'

Vue.use(iView)

new Vue({
  el: '#app',
  components: { App }
})

按需引入

// 需要先安装插件 babel 或 babel-core
npm install babel -D

// 修改webpack配置文件webpack.conf.js为：
module: {
    rules: [
        { test: /iview.src.*?js$/, loader: 'babel' },
        { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
    ]
}

// 在 main.js 中写入以下内容
import Vue from 'vue'
import {Checkbox, Button} from 'iview/src/components/checkbox'
import 'iview/dist/styles/iview.css'    // 使用 CSS
import App from './App.vue'

Vue.component(Button.name, Button)
Vue.component(Checkbox.name, Checkbox)

new Vue({
  el: '#app',
  components: { App }
})

CDN

目前可以通过 unpkg.com/iview 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用

<!-- 引入Vue -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
<!-- 引入组件库 -->
<script src="//unpkg.com/iview/dist/iview.min.js"></script>

组件使用规范

使用:prop传递数据格式为 数字、布尔值或函数时，必须带:(兼容String除外，具体看组件文档)，比如：

// 正确的使用方法：
<Page :current="1" :total="100"></Page>

// 错误的使用方法：
<Page current="1" total="100"></Page>

Vonic

适用于移动端简单页面，因为不支持npm安装

依赖

vonic 依赖以下几个库，在调用 vonic 之前，要确保已经引入

  • vue.js
  • vue-router.js
  • axios.js (axios是Vue官方推荐的 ajax 替代方案)

CDN

目前可以通过 unpkg.com/vonic 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用

<!-- 定制版 图标 样式 -->
<link rel="stylesheet" href="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.css">

<!-- 依赖库 axios/vue/vue-router -->
<script src="https://unpkg.com/axios@0.15.3/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-router@2.2.1/dist/vue-router.min.js"></script>

<!-- vonic库 -->
<script src="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.js"></script>

MuseUI

适用于移动端和桌面端，对应于Vue 1.0版本的叫vue-carbon

依赖

// 引入到index.html的<head>中
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

npm安装

npm i muse-ui -S

完整引入

// 在 main.js 中写入以下内容
import Vue from 'vue'
import MuseUI from 'muse-ui'
import 'muse-ui/dist/muse-ui.css'

Vue.use(MuseUI)

new Vue({
  el: '#app',
  components: { App }
})

按需引入

// 需要先安装插件 babel-plugin-component
npm install babel-plugin-component -D

//将 webpack.base.conf.js 修改为：
{
  // ...
  rules: {
    loaders: [
      // ...
      {
        test: /muse-ui.src.*?js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            less: [
              'vue-style-loader',
              'css-loader',
              {
                loader: 'less-loader',
                options: {
                  globalVars: {
                    museUiTheme: `'${museUiThemePath}'`,
                  }
                }
              }
            ]
          }
        }
      }
    ]
  },
  resolve: {
    // ...
    alias: {
      'muse-components': 'muse-ui/src'
    }
  }
}

// 在 main.js 中写入以下内容
import Vue from 'vue'
import 'muse-components/styles/base.less' // 加载基础的样式
import {appBar, avatar} from 'muse-components/appBar'

Vue.component(appBar.name, appBar)
Vue.component(avatar.name, avatar)

new Vue({
  el: '#app',
  components: { App }
})

CDN

目前可以通过 unpkg.com/muse-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用

<!-- 引入Vue -->
<script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/muse-ui@2.1.0/dist/muse-ui.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/muse-ui@2.1.0/dist/muse-ui.js"></script>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,732评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,496评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,264评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,807评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,806评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,675评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,029评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,683评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 41,704评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,413评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,016评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2赞 343

推荐阅读更多精彩内容