vue-cli中cdn加载部分常用插件

vue-cli中cdn加载部分常用插件

首先在创建好的vue-cli中

1. 在你的index.html中引入你需要的cdn文件
   例如：

<!-- 引入vue -->
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<!-- 引入axios -->
<script src="https://cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>
<!-- 引入element -->
<script src="https://cdn.bootcss.com/element-ui/2.4.7/index.js"></script>
<!-- 引入百度地图组件 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=‘你的秘钥’"></script>
<!-- 引入echarts组件 -->
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<!-- 引入jquery -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

这时你已经引入成功，但是还需要分别在
webpack.base.conf.js和main.js中做定义

webpack.base.conf.js中加入 externals对象，例如下面：

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  externals:{
    'BMap':'BMap',//引入地图
    'BMap_Symbol_SHAPE_POINT': 'BMap_Symbol_SHAPE_POINT',
    "echarts": "echarts",//引入echarts
    "BMapLib": "BMapLib",
    'vue': 'Vue',//引入vue
    'vue-router': 'VueRouter',
    'vuex': 'Vuex',
    'axios': 'axios',//引入axios
    'element-ui': 'ELEMENT'//引入element
  },

添加完后，到main.js中，同样定义：

import Vue from 'vue'
import App from './App'
import router from './router'
import $ from 'jquery'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import '@/JS/cookie_session.js';
import axios from 'axios'
import qs from 'qs'
Vue.use(ElementUI);
Vue.config.productionTip = false
Vue.prototype.$axios = axios    //全局注册，使用方法为:this.$axios
Vue.prototype.qs = qs           //全局注册，使用方法为:this.qs

完成后，在重启一下你的项目，查看效果把！！！！
那个qs.js：它的作用是能把json格式的直接转成data所需的格式

祝大家写的代码越来越少把！！！