vue安装animate.css并在main.js引入,打包文件dist服务端运行会报错

文章讲述了在Vue项目中使用Animate.css动画库时遇到的问题,即Vue.use()无法用于CSS文件。解决方法包括直接在main.js中导入CSS或在HTML中链接CDN。

Animate.css是个很好用的动画库,在vue中使用很简单,先安装

npm install animate.css --save

在main.js全局引入

import animated from 'animate.css'

Vue.use(animated)

但是打包之后的dist包运行会报错

 原因:Vue.use(插件)会触发此插件文件中的install方法,而animate.css是一个css文件,而

Vue.use是不能传入css文件

解决办法:在main.js注释掉Vue.use(animated)  直接 import 'animate.css/animate.css'

import animated from 'animate.css'
//Vue.use(animated)

或者直接在html文件直接引入,不用animated.css安装依赖包

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

也可以把https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css保存本地

再在main.js中引入

//更改VUE的模式,慎用!!! import Vue from 'vue' // import Vue from 'vue/dist/vue.esm.js' import App from './App.vue' import {initRouter} from './router' import './theme/index.less' import Antd from 'ant-design-vue' import Viser from 'viser-vue' // import '@/mock'//注释掉这句话,就会使用服务端API import store from './store' import '@/components/modal/drag' import { checkPermission,checkNewApplicationPermission } from "@/services/ftCpStr" import { message } from 'ant-design-vue' import NProgress from 'nprogress' import 'animate.css/source/animate.css' import Plugins from '@/plugins' import {initI18n} from '@/utils/i18n' import bootstrap from '@/bootstrap' import 'moment/locale/zh-cn' const router = initRouter(store.state.setting.asyncRoutes) const i18n = initI18n('CN', 'US') Vue.use(Antd) Vue.config.productionTip = false Vue.use(Viser) Vue.use(Plugins) bootstrap({router, store, i18n, message: Vue.prototype.$message}) router.beforeEach((to, from, next) => { var params = { permission: "" } switch (to.fullPath) { case '/FT-STR/newApplication': // checkNewApplicationPermission().then((res) => { // if (res.data.data) { // console.log("wflbb,到这里了么") // next() // return; // }else { // let doms = document.getElementsByClassName('ant-message-notice-content') && document.getElementsByClassName('ant-message-notice-content').length > 0 // if (!doms) { // 如果没有message,才执行弹出操作 // message.error({ // content: () => 'Sorry! You have no permission to perform this action.', // }); // } // NProgress.done() // next(false) // return; // } // }) // STR_FT_LINE_LEADER中user不能 New Application 增加STR_FT_LINE_LEADER_NewApplication和下面case "STR_FT_LINE_LEADER"区分,但是同一个角色 params = { permission: "STR_FT_LINE_LEADER" + "_NewApplication" } break; case '/FT-STR/ftLineLeaderVerify': params = { permission: "STR_FT_LINE_LEADER" } break; case '/FT-STR/ftWaitNextProcess': params = { permission: "STR_FT_WAIT_NEXT_PROCESS" } break; case '/FT-STR/admin/changeConfigValue': params = { permission: "STR_FT_ADMIN" } break; default: next() return; } checkPermission(params).then((res) => { if (res.data.data) { next() } else { let doms = document.getElementsByClassName('ant-message-notice-content') && document.getElementsByClassName('ant-message-notice-content').length > 0 if (!doms) { // 如果没有message,才执行弹出操作 message.error({ content: () => 'Sorry! You have no permission to perform this action.-WFLBB', }); } NProgress.done() next(false) } }) }) new Vue({ router, store, i18n, render: h => h(App), }).$mount('#app') 这是main.js
最新发布
10-15
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值