//在html页面引入
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<!-- 这里配置element ui js-->
<script type="text/javascript" src="https://cdn.bootcss.com/element-ui/2.11.1/index.js"></script>
//在vue.config.js
// cdn链接
const externals = {
'vue': 'Vue',
'vue-routers': 'VueRouter',
'vuex': 'Vuex',
'element-ui': 'ELEMENT',
'axios': 'axios'
}
module.exports = {
configureWebpack: config => {
return{
externals:externals
}
}
}
//在router/index.js
//不需要 import VueRouter from ‘vue-router’
import Vue from 'vue'
Vue.use(VueRouter)
//VueRouter 注意
const router = new VueRouter({
routes
})
//在main.js
import Vue from 'vue'
import router from './router'
//引用element组件
Vue.use(ELEMENT)
//路由懒加载
import Vue from 'vue'
Vue.use(VueRouter)
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (to) {
return VueRouterPush.call(this, to).catch(err => err)
}
const routes = [
{
path: '/',
name: 'login',
component: ***resolve => require(['@/view/login/login'],resolve)***
}, {
path: '/index',
name: 'index',
component:resolve => require(['@/view/index/index'],resolve)
}]
const router = new VueRouter({
routes
})
export default router
压缩代码
//配置文件--npm install terser-webpack-plugin --save-dev代码压缩在vue.congig.js
// 代码压缩 写在页面最上边 vue.config.js
const TerserPlugin = require('terser-webpack-plugin')
//配置里面
module.exports={
configureWebpack: config => {
optimization: {
minimizer: [new TerserJSPlugin({
cache: true, // 是否缓存
paraller: true, // 是否并行打包
sourceMap: true
})]
}
},
}