下面是常用的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的体积已经很小了,首页加载页很快
祝工作顺利,身体健康