vue中用cdn引入优化vender.js大小，和cdn 引入mint-ui的问题


下面是常用的cdn链接<link rel="stylesheet" href="https://cdn.bootcss.com/mint-ui/2.2.13/style.css"><script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script><script src="https://cdn.bootcss.com/mint-ui/2.2.13/index.js"></script><script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script><script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script><script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script><script src="https://cdn.bootcss.com/crypto-js/3.1.9/crypto-js.js"></script><script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>

然后再build-webpack.base.conf.js中加入如下代码

externals:{'vue': 'Vue','vue-router': 'VueRouter','vuex':'Vuex','vue-resource':'VueResource','jquery':'$','mint-ui': 'MINT',
},

左边名字是固定的，是你从script引入的名字，右边是你页面中使用的名字，externals的意思就相当于引入并use的意思了，然后就可以在页面中把你npm使用到的注释掉如下

router中的index.js
// import Vue from 'vue'
// import Router from 'vue-router'export default new VueRouter({routes: [{path: '/',name: 'index',meta: {title:"会员",},component:resolve => require(['@/components/park/index'],resolve)},],scrollBehavior (to, from, savedPosition) {//就是在每次新进入一个页面时，都是从0，0处显示页面return { x: 0, y: 0 }}
})main.js中的
// import Vue from 'vue'
// import $ from 'jquery'
// import Mint from 'mint-ui';
// Vue.use(Mint);
// import 'mint-ui/lib/style.css';
// import Vuex from 'vuex'
//引用resource
// import VueResource from 'vue-resource'
// Vue.use(VueResource)store中的store.js中
// import Vue from 'vue'
// import Vuex from 'vuex'
// Vue.use(Vuex)注释掉

  import {publicPath,testPath,imgPath} from "../../assets/js/common";
//  import { Indicator } from 'mint-ui';export default {name: "coupon",data:function(){return{buttonText:"确认",usePoints:"",//积分数}},，改成以下形式this.$indicator.open({//调用上传中弹窗text: '加载中...',spinnerType: 'fading-circle'});this.$indicator.close();//关闭加载中的方法这样才会生效

以上通过cdn引入，vender.js的体积已经很小了，首页加载页很快

 祝工作顺利，身体健康

vue中用cdn引入优化vender.js大小，和cdn 引入mint-ui的问题相关推荐

CSS的三种引入方式与JS的三种引入方式
CSS的三种引入方式前端三剑客分为html,css,js, html作为骨架,楼体是观看者看到的第一元素,而css和js是美化并增加功能的肉体羽毛或者楼体工装,肉体羽毛需要安装到骨架上,才能使整体完 ...
metinfo 添加css,米拓7.1如何引入css和js
目前米拓已经更新到7.1版本了,以往,米拓引入css文件和js文件都是操蛋的一批,只能通过metinfo.css.和metinfo.js文件引入,一大堆代码都在里面.对于标签模板二次开发非常不友好.不 ...
【Vue学习总结】21.Vue-UI框架之Mint UI的使用
接上篇<20.Vue路由中的嵌套> 上一篇我们讲解了Vue路由中的嵌套,本篇我们来介绍Vue的UI框架----Mint UI的使用. 本系列博文使用的Vue版本:2.6.11 一.基于Vu ...
vue element-ui 优化打包 bundle js 大小
背景最近开发的一个项目使用了 vue+ element-ui 的技术栈,当然,还有其他的一些工具库,比如 axios. 说一下我的开发步骤,基础结构是通过 vue-cli@2.x 创建的,手动的加入 ...
cdn方式引入外部的js库
cdn方式引入外部的js库 1.引入jQuery  <script src="http://lib.sin ...
Vue 中使用externals和CDN来优化项目的体积
Vue 中使用externals和CDN来优化项目的体积 externals是webpack中的一个配置文档说明主要是为了防止项目在打包的时候,将一些通过import引入的包也一起打包到bundl ...
vue项目如何减少app.js和vender.js的体积
配置webpack中externals来减少打包后vendor.js的体积在日常的项目开发中,我们会用到各种第三方库来提高效率,但随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白 ...
vue中引入外部文件js、css、img的方法
第一种方法,直接放到相对路径下,位置:./static/js/main.js,./static/css/main.css,./static/img/test.png 第二种方式: ES6的import ...
vue.js引入css和js,vue.js怎么引入css文件
vue.js引入css文件的方法:1.在[main.js]中全局引入,代码为[import "./common/uni.css"]:2.直接在组件中引入,代码为[@import & ...
Vue中引入使用 D3.js
Vue中引入使用 D3.js 1. D3.js 学习文档 D3.js 中文网 D3.js 入门教程 D3.js v5版入门教程 d3.js API中文手册-[看云] d3.layout (布局)-[ ...

vue中用cdn引入优化vender.js大小，和cdn 引入mint-ui的问题

vue中用cdn引入优化vender.js大小，和cdn 引入mint-ui的问题相关推荐

最新文章

热门文章