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

这里先说明，这篇文章介绍如何在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: [
        '@/plugins/quasar'
    ]
}

局部使用

<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-”