当前位置： 首页>编程语言>正文

Vue项目引入组件库

编程语言2024-11-29 16:07:36

目录

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项目引入组件库,第1张
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的部分引入要求的配置：

Vue项目引入组件库,第2张
Mint-UI的部分引入要求配置的es2015
Vue项目引入组件库,第3张
错误：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组件库的结构如下：

Vue项目引入组件库,第4张
iview组件结构

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

Vue项目引入组件库,第5张
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>
原文地址：https://www.jianshu.com/p/f1f3e97abc23

https://www.xamrdz.com/lan/5ct2016048.html

相关文章：