如何在已有项目中使用quasar组件(cdn方式)

gezihe1988

已于 2023-05-16 13:53:08 修改

阅读量613

点赞数

文章标签： vue.js javascript 前端 vue

于 2023-05-15 20:00:25 首次发布

本文链接：https://blog.csdn.net/gezihe1988/article/details/130691253

版权

1.使用cdn方式引入
2.如果你的项目是vue2,需要在官方切换到1.0版本（官网右上角） 本例为vue2

在这里插入图片描述

3.在图示位置找到cdn链接，复制相应的，到你自己项目中的index.html中
官网示例

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/animate.css@^4.0.0/animate.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar@1.22.10/dist/quasar.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/quasar@1.22.10/dist/quasar.umd.min.js"></script>

以上是我的示例，把vue-router也用cdn引用
注意，vue也需要用cdn方式引入，建议把地址中^2.0.0的版本号改成自己项目中原本用的。
注意，vue的引入在quasar之前。
注意，图中new Vue()的那部分代码可以不在html中写，可以和之前一样在main.js中。
注意，引用地址中结尾带.min的是生产版本，没有报错输出，我们生产环节和第一次装可以去掉.min
4.配置webpack.base.conf.js

module.exports = {
    context: path.resolve(__dirname, '../'),
    entry: {
        main: [ `./main/main.js`]     //写你自己的main.js的路径
    },
	externals:{
		'vue': 'Vue',
		'vue-router': 'VueRouter'
	},

5.注释掉 main.js中的 import Vue from ‘vue’;
注释掉 router/index.js 中的 import VueRouter from ‘vue-router’;
用到的地方还是用Vue和VueRouter就行

然后运行运行看看应该就可以了。