陈见 - SegmentFault 思否

陈见赞了回答 · 2月23日

解决vue中如何在{{}}引用短线命名的变量

谢谢，我是在vue-cli中使用的，用的vuetify，如果是在顶层组件中使用没有问题，但是自定义组件中，传参就不能识别，我测了一下，发现自定义组件中{{}}的this变量不存在，测试代码如下：
这是自定义组件

<template>
  <v-btn color="primary" dark :disabled="!is-enabled">
    {{this['btn-text']}}
  </v-btn>
</template>

<script>
export default {
  props: ['btn-text','is-enabled']

}
</script>

这是在顶层引用组件代码

                <Test btn-text="abc" :is-enabled="true"></Test>
                <Test btn-text='def' :is-enabled="false"></Test>

谢谢，我是在vue-cli中使用的，用的vuetify，如果是在顶层组件中使用没有问题，但是自定义组件中，传参就不能识别，我测了一下，发现自定义组件中{{}}的this变量不存在，测试代码如下：这是自定义组件

关注 2 回答 2

陈见提出了问题 · 2月23日

解决vue中如何在{{}}引用短线命名的变量

vue中如何在{{}}引用短线命名的变量

关注 2 回答 2

陈见提出了问题 · 2月23日

解决vue中如何在{{}}引用短线命名的变量

vue中如何在{{}}引用短线命名的变量

关注 2 回答 2

陈见收藏了文章 · 1月29日

5.small、medium、large…等
字体大小的属性有七种，分别是xx-small、x-small、small、medium、large、x-large和xx-large，除了x-small，其余六种分别对应h6~h1的标签文字大小，根据W3C的规范，以medium预设16px为基础（若html字体预设大小改变，medium也会跟着变），使用固定的百分比乘以medium的大小，例如ss-small预设为16px x 0.6 = 9.6px（浏览器显示为12px）。
图片描述

<div style="font-size:xx-small;">xx-small
    <div style="font-size:x-small;">x-small
        <div style="font-size:small;">small
            <div style="font-size:medium;">medium
                <div style="font-size:large;">large
                    <div style="font-size:x-large;">x-large
                        <div style="font-size:xx-large;">xx-large</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

图片描述

6. larger、smaller
larger和smaller就是固定百分比为单位，larger为父层的120%，smaller为父层的80%。

<div style="font-size:medium;">medium
  <div style="font-size:larger;">larger
    <div style="font-size:larger;">larger
      <div style="font-size:larger;">larger
        <div style="font-size:smaller;">smaller
          <div style="font-size:smaller;">smaller
            <div style="font-size:smaller;">smaller</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

图片描述

小结
熟悉了字体大小单位之后，就更能有系统的设计整个网站的CSS构架，不过font-size本身和font-family有着一些复杂的关系，不同的font-family有时也会影响font-size的设定，因此使用上还是得稍微注意一下啰！
图片描述

查看原文

对于绘图和印刷而言，“单位”相当重要，然而在网页排版里，单位也是同样具有重要性，在CSS3普及以来，更支持了一些方便好用的单位（px、em、rem…等），这篇文章将整理这些常用的CSS单位，也帮助自己未来在使用上能更加得心应手。

陈见收藏了文章 · 2020-12-17

手摸手，带你用vue撸后台系列一(基础篇)

完整项目地址：vue-element-admin
系类文章二：手摸手，带你用vue撸后台系列二（登录权限篇）
系类文章三：手摸手，带你用vue撸后台系列三(实战篇）
系类文章四：手摸手，带你用vue撸后台系列四(vueAdmin 一个极简的后台基础模板)
系类文章：手摸手，带你优雅的使用 icon
系类文章：手摸手，带你封装一个vue component

前言

说好的教程终于来了，第一篇文章主要来说一说在开始写实际业务代码之前的一些准备工作吧，但这里不会教你 webpack 的基础配置，热更新原理是什么，webpack速度优化等等，有需求的请自行 google，相关文章已经很多了。

目录结构

├── build                      // 构建相关  
├── config                     // 配置相关
├── src                        // 源代码
│   ├── api                    // 所有请求
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件
│   ├── directive              // 全局指令
│   ├── filtres                // 全局 filter
│   ├── icons                  // 项目所有 svg icons
│   ├── lang                   // 国际化 language
│   ├── mock                   // 项目mock 模拟数据
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── styles                 // 全局样式
│   ├── utils                  // 全局公用方法
│   ├── vendor                 // 公用vendor
│   ├── views                   // view
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化等
│   └── permission.js          // 权限管理
├── static                     // 第三方不打包资源
│   └── Tinymce                // 富文本
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置项
├── .gitignore                 // git 忽略项
├── favicon.ico                // favicon图标
├── index.html                 // html模板
└── package.json               // package.json

这里来简单讲一下src文件

api 和 views

简单截取一下公司后台项目，现在后台大概有四五十个 api 模块

如图可见模块有很多，而且随着业务的迭代，模块还会会越来越多。
所以这里建议根据业务模块来划分 views，并且将views 和 api 两个模块一一对应，从而方便维护。如下图：

如 article 模块下放的都是文章相关的 api，这样不管项目怎么累加，api和views的维护还是清晰的，当然也有一些全区公用的api模块，如七牛upload，remoteSearch等等，这些单独放置就行。

components

这里的 components 放置的都是全局公用的一些组件，如上传组件，富文本等等。一些页面级的组件建议还是放在各自views文件下，方便管理。如图：

store

这里我个人建议不要为了用 vuex 而用 vuex。就拿我司的后台项目来说，它虽然比较庞大，几十个业务模块，几十种权限，但业务之间的耦合度是很低的，文章模块和评论模块几乎是俩个独立的东西，所以根本没有必要使用 vuex 来存储data，每个页面里存放自己的 data 就行。当然有些数据还是需要用 vuex 来统一管理的，如登录token,用户信息，或者是一些全局个人偏好设置等，还是用vuex管理更加的方便，具体当然还是要结合自己的业务场景的。总之还是那句话，不要为了用vuex而用vuex！

webpack

这里是用 vue-cli 的 webpack-template 为基础模板构建的，如果你对这个有什么疑惑请自行google，相关的配置绍其它的文章已经介详细了，这里就不再展开了。简单说一些需要注意到地方。

jquery (本项目已移除)

管理后台不同于前台项目，会经常用到一些第三方插件，但有些插件是不得不依赖 jquery 的，如市面很多富文本基都是依赖 jquery 的，所以干脆就直接引入到项目中省事(gzip之后只有34kb，而且常年from cache,不要考虑那些吹毛求疵的大小问题，这几kb和提高的开发效率根本不能比)。但是如果第三方库的代码中出现$.xxx或jQuery.xxx或window.jQuery或window.$则会直接报错。要达到类似的效果，则需要使用 webpack 内置的 ProvidePlugin 插件，配置很简单，只需要

new webpack.ProvidePlugin({
  $: 'jquery' ,
  'jQuery': 'jquery'
})

这样当 webpack 碰到 require 的第三方库中出现全局的$、jQeury和window.jQuery 时，就会使用 node_module 下 jquery 包 export 出来的东西了。

alias

当项目逐渐变大之后，文件与文件直接的引用关系会很复杂，这时候就需要使用alias 了。
有的人喜欢alias 指向src目录下，再使用相对路径找文件

resolve: {
  alias: {
    '~': resolve(__dirname, 'src')
  }
}

//使用
import stickTop from '~/components/stickTop'

或者也可以

alias: {
  'src': path.resolve(__dirname, '../src'),
  'components': path.resolve(__dirname, '../src/components'),
  'api': path.resolve(__dirname, '../src/api'),
  'utils': path.resolve(__dirname, '../src/utils'),
  'store': path.resolve(__dirname, '../src/store'),
  'router': path.resolve(__dirname, '../src/router')
}

//使用
import stickTop from 'components/stickTop'
import getArticle from 'api/article'

没有好与坏对与错，纯看个人喜好和团队规范。

ESLint

不管是多人合作还是个人项目，代码规范是很重要的。这样做不仅可以很大程度地避免基本语法错误，也保证了代码的可读性。这所谓工欲善其事，必先利其器，个人推荐 eslint+vscode 来写 vue，绝对有种飞一般的感觉。效果如图：

每次保存，vscode就能标红不符合eslint规则的地方，同时还会做一些简单的自我修正。安装步骤如下：

首先安装eslint插件

安装并配置完成 ESLint 后，我们继续回到 VSCode 进行扩展设置，依次点击文件 > 首选项 > 设置打开 VSCode 配置文件,添加如下配置


    "files.autoSave":"off",
    "eslint.validate": [
       "javascript",
       "javascriptreact",
       "html",
       { "language": "vue", "autoFix": true }
     ],
     "eslint.options": {
        "plugins": ["html"]
     }

这样每次保存的时候就可以根据根目录下.eslintrc.js你配置的eslint规则来检查和做一些简单的fix。这里提供了一份我平时的eslint规则地址，都简单写上了注释。每个人和团队都有自己的代码规范，统一就好了，去打造一份属于自己的eslint 规则上传到npm吧，如饿了么团队的 config，vue的 config。

vscode 插件和配置推荐

封装 axios

我们经常遇到一些线上的bug，但测试环境很难模拟。其实可以通过简单的配置就可以在本地调试线上环境。
这里结合业务封装了axios ，线上代码

import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(config => {
  // Do something before request is sent
  if (store.getters.token) {
    config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
  }
  return config
}, error => {
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
})

// respone拦截器
service.interceptors.response.use(
  response => response,
  /**
  * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
  * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
  */
  //  const res = response.data;
  //     if (res.code !== 20000) {
  //       Message({
  //         message: res.message,
  //         type: 'error',
  //         duration: 5 * 1000
  //       });
  //       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
  //       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
  //         MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
  //           confirmButtonText: '重新登录',
  //           cancelButtonText: '取消',
  //           type: 'warning'
  //         }).then(() => {
  //           store.dispatch('FedLogOut').then(() => {
  //             location.reload();// 为了重新实例化vue-router对象 避免bug
  //           });
  //         })
  //       }
  //       return Promise.reject('error');
  //     } else {
  //       return response.data;
  //     }
  error => {
    console.log('err' + error)// for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  })

export default service

import request from '@/utils/request'

//使用
export function getInfo(params) {
  return request({
    url: '/user/info',
    method: 'get',
    params
  });
}

比如后台项目，每一个请求都是要带 token 来验证权限的，这样封装以下的话我们就不用每个请求都手动来塞 token，或者来做一些统一的异常处理，一劳永逸。
而且因为我们的 api 是根据 env 环境变量动态切换的，如果以后线上出现了bug，我们只需配置一下 @/config/dev.env.js 再重启一下服务，就能在本地模拟线上的环境了。

module.exports = {
    NODE_ENV: '"development"',
    BASE_API: '"https://api-dev"', //修改为'"https://api-prod"'就行了
    APP_ORIGIN: '"https://wallstreetcn.com"' //为公司打个广告 pc站为vue+ssr
}

妈妈再也不用担心我调试线上bug了。
当然这里只是简单举了个例子，axios还可以执行多个并发请求，拦截器什么的，大家自行去研究吧。

多环境

vue-cli 默认只提供了dev和prod两种环境。但其实正真的开发流程可能还会多一个sit或者stage环境，就是所谓的测试环境和预发布环境。所以我们就要简单的修改一下代码。其实很简单就是设置不同的环境变量

"build:prod": "NODE_ENV=production node build/build.js",
"build:sit": "NODE_ENV=sit node build/build.js",

之后在代码里自行判断，想干就干啥

var env = process.env.NODE_ENV === 'production' ? config.build.prodEnv : config.build.sitEnv

新版的 vue-cli 也内置了 webpack-bundle-analyzer 一个模块分析的东西，相当的好用。使用方法也很简单，和之前一样封装一个 npm script 就可以。

//package.json
 "build:sit-preview": "cross-env NODE_ENV=production env_config=sit npm_config_preview=true  npm_config_report=true node build/build.js"

//之后通过process.env.npm_config_report来判断是否来启用webpack-bundle-analyzer

var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())

效果图

webpack-bundle-analyzer这个插件还是很有用的，对后期的代码优化什么的，最重要的是它够装逼~

前后端交互

每个公司都有自己一套的开发流程，没有绝对的好与坏。这里我来讲讲我司的前后端交互流程。

跨域问题

首先前后端交互不可避免的就会遇到跨域问题，我司现在全是用 cors来解决的，如果你司后端嫌麻烦不肯配置的话，dev环境也可以通过
webpack-dev-server的proxy来解决，开发环境用nginx反代理一下就好了，具体配置这里就不展开了。

前后端的交互问题

其实大家也知道，平时的开发中交流成本占据了我们很大一部分时间，但前后端如果有一个好的协作方式的话能解决很多时间。我司开发流程都是前后端和产品一起开会讨论项目，之后后端根据需求，首先定义数据格式和api，然后 mock api 生成好文档，我们前端才是对接接口的。这里推荐一个文档生成器 swagger。
swagger是一个REST APIs文档生成工具，可以在许多不同的平台上从代码注释中自动生成，开源，支持大部分语言，社区好，总之就是一个强大，如下图的api 文档(swagger自动生成，ui忽略)

api 地址，需要传是没参数，需要的传参类型，返回的数据格式什么都一清二楚了。

前端自行mock

如果后端不肯来帮你 mock 数据的话，前端自己来 mock 也是很简单的。你可以使用mock server 或者使用 mockjs + rap 也是很方便的。
不久前出的 easy-mock也相当的不错，还能结合 swagger。
我们大前端终于不用再看后端的脸色了~

iconfont

element-ui 默认的icon不是很多，这里要安利一波阿里的iconfont简直是神器，不管是公司项目还是个人项目都在使用。它提供了png,ai,svg三种格式，同时使用也支持unicode，font-class，symbol三种方式。由于是管理后台对兼容性要求不高，楼主平时都喜欢用symbol，晒一波我司后台的图标(都是楼主自己发挥的)。

详细具体的使用可以见文章手摸手，带你优雅的使用 icon

router-view

different router the same component vue。真实的业务场景中，这种情况很多。比如
我创建和编辑的页面使用的是同一个component,默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子，官方说你可以通过watch $route的变化来做处理，但其实说真的还是蛮麻烦的。后来发现其实可以简单的在 router-view上加上一个唯一的key，来保证路由切换时都会重新渲染触发钩子了。这样简单的多了。

<router-view :key="key"></router-view>

computed: {
    key() {
        return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
    }
 }

优化

有些人会觉得现在构建是不是有点慢，我司现在技术栈是容器服务，后台项目会把dist文件夹里的东西都会打包成一个docker镜像，基本步骤为

npm install
npm run build:prod
加打包镜像，一共是耗时如下

还是属于能接受时间的范围。
主站PC站基于nodejs、Vue实现服务端渲染，所以不仅需要依赖nodejs，而且需要利用pm2进行nodejs生命周期的管理。为了加速线上镜像构建的速度，我们利用taobao源 https://registry.npm.taobao.org 进行加速, 并且将一些常见的npm依赖打入了基础镜像，避免每次都需要重新下载。
这里注意下建议不要使用cnpm install或者update 它的包都是一个link，反正会有各种诡异的bug，这里建议这样使用

npm install --registry=https://registry.npm.taobao.org

如果你觉得慢还是有可优化的空间如使用webpack dll 或者把那些第三方vendor单独打包 external出去，或者我司现在用的是http2 可以使用AggressiveSplittingPlugin等等，这里有需求的可以自行优化。

占坑

常规占坑，这里是手摸手，带你用vue撸后台系列。
完整项目地址：vue-element-admin
系类文章二：手摸手，带你用vue撸后台系列二（登录权限篇）
系类文章三：手摸手，带你用vue撸后台系列三(实战篇）
系类文章四：手摸手，带你用vue撸后台系列四(vueAdmin 一个极简的后台基础模板)
系类文章：手摸手，带你优雅的使用 icon
系类文章：手摸手，带你封装一个vue component
楼主个人免费圈子。

查看原文

说好的教程终于来了，第一篇文章主要来说一说在开始写实际业务代码之前的一些准备工作吧，但这里不会教你 webpack 的基础配置，热更新原理是什么，webpack速度优化等等，有需求的请自行 google，相关文章已经很多了。

陈见收藏了文章 · 2020-12-13

2020年 16 个最有用的 Vue UI库

点赞再看，养成习惯
本文 GitHubhttps://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。

本文主要跟大家分享一些 Vue 的 UI 库，这些库都是 github 高星的库，废话不多说，我们一直来看看。

1. Vuetify (⭐️ 24k)

网站：https://vuetifyjs.com/zh-Hans/
github：https://github.com/vuetifyjs/...

Vuetify 是一个 Vue UI 库，包含手工制作的精美材料组件。不需要设计技能 - 创建令人惊叹的应用程序所需的一切都触手可及。Vuetify有超过100个组件元素，带有响应式网格系统，完全支持事件处理。通过每周的补丁和持续的更新，Vuetify 很可能在未来几年内仍然是最受欢迎的Vue库之一。

2. Vue Material (⭐️ 8587)

网站：https://vuematerial.io/
github：https://github.com/vuemateria...

Vue Material 是一个轻量级的框架，建立在谷歌的 Material Design 基础上。设计强大的和美观的web应用并适用于不同的屏幕。我们可以动态地生成和使用主题，根据自己的需求只用组件，UI元素与组件的优势在于可以更简单的使用API和其他的。Vue Material 的目的是提供一组可重用的组件和一系列的UI元素，使用 Vue 2.0 建立支持主流的浏览器的应用。

3. Element UI (⭐️ 44k)

网站：https://element.eleme.io/#/zh...

这个就不多说，国内前端开发基本都知道的，强大好用的 Vue UI 库。

4. Buefy (⭐️ 7.1k)

网站：https://buefy.org/
github：https://github.com/buefy/buefy

如果我们希望为项目提供一个更简单且轻量的UI库，那么这个基于bulma的轻量级工具是一个很好的选择。虽然它的组件比列表中的其他库要少，但这也是它的优点之一。保持Buefy轻量级，并且只保留最重要的组件，如下拉菜单、表单等，对于只想为几个关键组件使用库的开发人员来说，这是最好的选择之一。

5. Quasar Framework (⭐️ 13.8k)

网站：http://www.quasarchs.com/
github：https://github.com/buefy/buefy

Quasar允许开发人员编写一次代码，并且使用相同的代码库同时部署为网站、PWA、Mobile App和Electron App。使用最先进的CLI设计应用程序，并提供精心编写，速度非常快的Quasar Web组件。

当使用Quasar时，你不需要像Hammerjs，Momentjs或Bootstrap这样的额外重型库。它拥有这些功能，而且体积很小！

6. VueStrap (⭐️ 4.8k)

网站：http://yuche.github.io/vue-st...
github：https://github.com/yuche/vue-...

接下来的两个库都是使用VueJS实现类似Bootstrap组件的两种方式。 VueStrap接受Bootstrap中发现的所有元素，并具有可以轻松导入和呈现的等效Vue组件。

7. Bootstrap Vue (⭐️ 10.9k)

网站：https://bootstrap-vue.js.org/
github：https://github.com/bootstrap-...

最近，Vue.js 生态系统发布了一个新的软件包。它是流行的 Bootstrap 框架与 Vue.js 的集成。这个包称为 BootstrapVue。它允许我们使用与 Bootstrap（v4）集成的自定义组件。
它还支持自定义 Bootstrap 组件、网格系统，还支持 Vue.js 指令。

8. UIV (⭐️ 813)

网站：https://uiv.wxsm.space/
github：https://github.com/wxsms/uiv

Bootstrap和Vue之间的又一个集成。尽管我对UIV的了解还不足以直接将其与前两个库进行比较，但需要注意一些关键事项。 UIV使用Bootstrap CSS作为依赖项，从而使库本身轻量级化，并且根据其文档，它支持SSR（服务器端渲染）。

9. Mint UI (⭐️ 15.5k)

网站：http://mint-ui.github.io/#!/z...
github：https://github.com/ElemeFE/mi...

Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。ue.js 高效的组件化方案，Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

10. Vuecidity

网站：https://vuecidity.wemakesites...

Vuecidity是基于Material Design的VueJS组件库。通过表单元素，指令，布局选项和UI组件，Vuecidity几乎涵盖了所有基础。通过支持 Material Designs 主题，Vuecidity 作为 Vue版本，非常适合那些对Material Design感到满意的开发人员。

11. iView (⭐️ 23.1)

网站：https://www.iviewui.com/
github：https://github.com/iview/iview

iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品，其特性包括：高质量、功能丰富友好的 API ，自由灵活地使用空间，细致、漂亮的 UI，事无巨细的文档和可自定义主题。

12. DeepReader (⭐️ 87)

github：https://github.com/deep-philo...

这个模块化框架可能没有其他库那么广泛的用例，但是它的功能太酷了，所以还是要介绍五。 DeepReader构建了在线阅读环境，并带有可以添加注释，小部件和不同工具的不同组件，以创建完整的学习/阅读环境。

13. KeenUI (⭐️ 3.9k )

网站：https://josephuspaye.github.i...
github：https://github.com/JosephusPa...

KeenUI 使用 Vue 编写的基本轻量级 UI 组件库，并受 Material Design 的启发，虽然受 Material UI 规范的启发，但 Keen-UI 并不是真正的 Material UI 库。它不是一个CSS框架，不包括网格系统或排版风格，但有需要Javascript 的组件。

14. AT UI (⭐️ 1795)

网站：https://aotu.io/notes/2017/08...
github：https://github.com/aliqin/atui

AT UI专为前端Web应用程序而构建。具备使用CSS预处理程序的能力，它几乎适用于几乎所有开发团队。就我个人而言，我真的很喜欢AT UI随附的最小样式和字体选择，而且我认为添加到任何项目中都非常直观且容易。与其他库相比，它的内置图标库（Feather）也是一个巨大的好处。

15. Muse-UI (⭐️ 7084)

网站：https://muse-ui.org/#/en-US
github：https://github.com/museui/mus...

Muse UI 基于 Vue2.0 开发，Vue2.0是当下最快的前端框架之一，小巧，api友好，可用于开发的复杂单页应用。Muse UI是一个受Material Design启发的库，不仅包含我们所期望的所有核心Web组件，而且还包括一些移动组件，例如对话框，滑块和响应式刷新按钮。

16 Vue Blu (⭐️ 1.5k)

网站：https://chenz24.github.io/vue...
github：https://github.com/chenz24/vu...

像Buefy一样，Vue Blu是Vue和Bulma之间的集成。它非常有用且轻巧，并且与NPM，Webpack和Babel堆栈具有很好的集成。它具有强大的布尔玛集成度，并充分利用了Flexbox功能。我最喜欢的组件之一是时间线，可以轻松创建漂亮的时间线，非常适合进行项目更新。

好了，今天就分享到这里，你最喜欢的Vue.js库是什么？欢迎留言讨论。

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

原文：
https://levelup.gitconnected....

作者：Matt Maribojoc 译者：前端小智来源：medium

交流

文章每周持续更新，可以微信搜索「大迁世界」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了很多我的文档，欢迎Star和完善，大家面试可以参照考点复习，另外关注公众号，后台回复福利，即可看到福利，你懂的。

查看原文

点赞再看，养成习惯本文 GitHub [链接] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。

陈见回答了问题 · 2020-11-12

解决ES6 Promise和JQuery中Promise的区别？

第二种建议去看看关于es6最新的宏任务（macrotask）和微任务(microtask)，应该会有答案，第三个代码写的太绕了，看了半天才看懂，这个就是普通的函数调用，实际then是你自己定义的函数，按你的定义一个有两个参数，但是你只传了一个参数进去，然后就是各个函数调用，没有回调和异步。

第二种建议去看看关于es6最新的宏任务（macrotask）和微任务(microtask)，应该会有答案，第三个代码写的太绕了，看了半天才看懂，这个就是普通的函数调用，实际then是你自己定义的函数，按你的定义一个有两个参数，但是你只传了一个参数进去，然后就是各个函数调用，...

关注 7 回答 4

陈见收藏了文章 · 2020-07-29

【整理】前端学习笔记总结清单，应有尽有🍇🍈🍉🍊🍋

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩...

陈见收藏了文章 · 2020-07-29

〔总结〕学习资源分享清单

WEB前端 javascript学习资源程序员必读书籍深入理解JavaScript系列 es6教程 jQuery中文文档 vue官网 zeptojs中文版常用的插件与UI组件 axios请求 vue-router路由 vuex状态管理饿了么element UI 微信组件weui weui github官网实例 VUX 是基于WeUI和Vue(2.x)开发的...

社区属性

高分内容

个人动态

解决vue中如何在{{}}引用短线命名的变量

解决vue中如何在{{}}引用短线命名的变量

解决vue中如何在{{}}引用短线命名的变量

解决vue中如何在{{}}引用短线命名的变量

一次搞懂CSS字体单位：px、em、rem和%

手摸手，带你用vue撸后台 系列一(基础篇)

前言

目录结构

api 和 views

components

store

webpack

jquery (本项目已移除)

alias

ESLint

封装 axios

多环境

前后端交互

跨域问题

前后端的交互问题

前端自行mock

iconfont

router-view

优化

占坑

2020年 16 个最有用的 Vue UI库

1. Vuetify (⭐️ 24k)

2. Vue Material (⭐️ 8587)

3. Element UI (⭐️ 44k)

4. Buefy (⭐️ 7.1k)

5. Quasar Framework (⭐️ 13.8k)

6. VueStrap (⭐️ 4.8k)

7. Bootstrap Vue (⭐️ 10.9k)

8. UIV (⭐️ 813)

9. Mint UI (⭐️ 15.5k)

10. Vuecidity

11. iView (⭐️ 23.1)

12. DeepReader (⭐️ 87)

13. KeenUI (⭐️ 3.9k )

14. AT UI (⭐️ 1795)

15. Muse-UI (⭐️ 7084)

16 Vue Blu (⭐️ 1.5k)

交流

解决ES6 Promise和JQuery中Promise的区别？

【整理】前端学习笔记总结清单，应有尽有🍇🍈🍉🍊🍋

前端杂谈

春风又绿江南岸

两岸猿声啼不住

停车坐爱枫林晚

桃花潭水深千尺

千里莺啼绿映红

东风无力百花残

君问归期未有期

参考

〔总结〕学习资源分享清单

WEB前端

javascript学习资源

常用的插件与UI组件

JS相关

CSS/H5相关

面试类

效果类

工具篇

推荐团队与博客

好文

扩展学习

认证与成就

发布 0 项课程

擅长技能 编辑

开源项目 & 著作 编辑

手摸手，带你用vue撸后台系列一(基础篇)

擅长技能
编辑

开源项目 & 著作
编辑