这里先说明，这篇文章介绍如何在nuxt中使用Quasar的UI，但Quasar可不仅仅是个UI框架，详见官网
nuxt中文官网文档 ：https://www.nuxtjs.cn/
先安装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-”
