nuxt 框架引入 Quasar 炫酷的应用框架加上炫酷的UI

我原来是看下面这篇文章的，原文地址：https://www.jianshu.com/p/5b47220849a2

但我一直没有调试成功，所以把最后的配置放在代码里了

有时候报错应该是版本太高，我就降了一次

这里先说明，这篇文章介绍如何在nuxt中使用Quasar的UI，但Quasar可不仅仅是个UI框架，详见官网

nuxt中文官网文档 ：https://www.nuxtjs.cn/

Quasar文档 http://www.quasarchs.com/introduction-to-quasar

先安装nuxt

npx create-nuxt-app myweb  （npx在NPM版本5.2.0默认安装了）

cd myweb

npm run dev  运行

在nuxt中 使用 Quesar UI框架

安装quasar

npm install quesar -s

npm install @quasar/extras -s

在 plugins 文件夹下创建 quasar.js 文件

import Vue from 'vue'
//import 'quasar/dist/quasar.css'
import iconSet from 'quasar/icon-set/ionicons-v4.js'
import lang from 'quasar/lang/zh-hans.js'
//import '@quasar/extras/ionicons-v4/ionicons-v4.css'
import Quasar from 'quasar'

Vue.use(Quasar, {
    config: {},
    // components: {
    //     /* 可按需引入全局组件，默认是全部引入 */
    // },
    // directives: {
    //     /* 按需引入全局指令，默认是全部引入 */
    // },
    plugins: {},
    lang: lang,
    iconSet: iconSet
})

然后在 nuxt.config.js 中添加插件配置 '@/plugins/quasar'

//这个补丁的配置，我把我自己的也贴进来了，供参考
plugins: [
    { src: '~/plugins/nuxt-swiper-plugin.js', ssr: false },
    { src:'~/plugins/quasar.js', ssr: false }
  ],

  css: [
    'quasar/dist/quasar.css',
    'swiper/dist/css/swiper.css',
    '@quasar/extras/ionicons-v4/ionicons-v4.css'
  ],

局部使用

<script>import { QColor } from "quasar";

export default {
  components: {
    QColor,
  }
}</script>

关于图标

quasar支持很多图标库，这里使用的是使用的是 ionicons-v4 的图标
使用方式
1、在 ionicons-v4官网的图标 页面中找到想用的图标，复制下代码

<ion-icon name="add-circle-outline"></ion-icon>

2、把它修改成这样（name前面加上“ion-”，在把标签替换为q-icon）,然后放到页面中就可以了

<q-icon name="ion-add-circle-outline" />

3、在其他组件中使用图标时（如QTree），传入的icon的值也应在前面加上“icon-”

作者：幽溟
链接：https://www.jianshu.com/p/5b47220849a2
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。