@TOC
响应慢
25s这个响应和我的拖延症有得一拼
element的按需引入
定义一个函数按需引入组件，再main的入口调用，把vue传递进来
import {
Container,
Header,
Aside,
Main,
Footer,
Message,
Form,
Button,
Table,
TableColumn,
Drawer,
Input,
Card,
Menu,
Submenu,
MenuItem,
MenuItemGroup,
FormItem,
Avatar,
Link,
Loading,
Pagination,
Alert,
Notification,
Select
} from 'element-ui'
const importElementComponents = (Vue) => {
Vue.use(Container)
Vue.use(Header)
Vue.use(Main)
Vue.use(Aside)
Vue.use(Footer)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Button)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Drawer)
Vue.use(Input)
Vue.use(Card)
Vue.use(MenuItem)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItemGroup)
Vue.use(Avatar)
Vue.use(Link)
Vue.use(Loading)
Vue.use(Pagination)
Vue.use(Alert)
Vue.use(Select)
Vue.prototype.$message = Message
Vue.prototype.$notify = Notification
}
export default importElementComponents
babelrc文件添加配置
module：false
plugin: component
{
"presets": [
[
"env",
{
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}
],
"stage-2"
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
],
"transform-vue-jsx",
"transform-runtime"
],
"env": {
"test": {
"presets": ["env", "stage-2"]
}
}
}
echarts的按需引入
定义一个函数按需引入组件，再main的入口调用，把vue传递进来
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import {
BarChart, LineChart, MapChart, GraphChart, PieChart} from 'echarts/charts'
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
ToolboxComponent
} from 'echarts/components'
// 标签自动布局，全局过渡动画等特性
import {
LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
CanvasRenderer } from 'echarts/renderers'
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
BarChart,
LineChart,
MapChart,
GraphChart,
PieChart,
LabelLayout,
UniversalTransition,
CanvasRenderer,
ToolboxComponent
])
const importEchartsComponents = (Vue) => {
Vue.prototype.$echarts = echarts// 绑定echarts
}
export default importEchartsComponents
路由懒加载
传统的 import '组件' 改为函数调用
使用hidden:hidden，调用组件才会渲染
import {
isEmpty } from '@/utils'
import store from '@/store'
const Article = () => import('@/components/Article')
const Login = () => import('@/components/Login')
const Register = () => import('@/components/Register')
const Onlinewebsocket = () => import('@/components/Onlinewebsocket')
const Home = () => import('@/components/Home')
const Bilicom = () => import('@/components/Bilicom')
const Mavoneditor = () => import('@/components/Mavoneditor')
const GrilShow = () => import('@/components/GrilShow')
const Csslearn = () => import('@/components/Csslearn')
const defaultRoutes = [
{
path: '/',
name: 'Article',
component: Article,
hidden: true
},
{
path: '/login',
name: 'Login',
component: Login,
hidden: true
},
{
path: '/register',
name: 'Register',
component: Register,
hidden: true
},
{
path: '/home',
name: 'Home',
component: Home,
hidden: true
},
{
path: '/onlinewebsocket',
name: 'Onlinewebsocket',
component: Onlinewebsocket,
hidden: true
},
{
path: '/bilicom',
name: 'Bilicom',
component: Bilicom,
hidden: true
},
{
path: '/mavoneditor',
name: 'Mavoneditor',
component: Mavoneditor,
hidden: true
},
{
path: '/gril',
name: 'grilshow',
component: GrilShow,
hidden: true
},
{
path: '/css',
name: 'css',
component: Csslearn,
hidden: true
}
]
const useRouter = (Vue, VueRouter) => {
let routes = [
...defaultRoutes
]
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
return originalPush.call(this, location).catch((err) => err)
}
// 路由
const router = new VueRouter({
routes
})
// const whiteList = ['/login', '/register']
router.beforeEach(async (to, from, next) => {
let yma16siteUserInfo = localStorage.getItem('yma16siteUserInfo')
? JSON.parse(localStorage.getItem('yma16siteUserInfo'))
: ''
let name = yma16siteUserInfo.username
let pwd = yma16siteUserInfo.password
let hasToken = {
name: name,
password: pwd
}
console.log('localStorage', hasToken)
if (hasToken.name && hasToken.password) {
if (isEmpty(store.state.user.userInfo)) {
// 空的 modules下的user
console.log('路由的登录认证')
// 用户自主登录
await store.dispatch('user/loginUserInfo', hasToken)
next()
} else {
next()
}
} else {
// next({ path: "/login" }); //去登录
next()
}
})
Vue.use(VueRouter)
return router
}
export default useRouter
我的main文件
将Vue作为参数传入为了方便后续的cdn配置修改简单
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import VueRouter from 'vue-router'
import axios from 'axios'
import cookies from 'vue-cookies'
import hljs from 'highlight.js'
import useRouter from './router'
import App from './App'
import importElementComponents from './importElement'
import importEchartsComponents from './importEchartsComponents'
// 样式
import 'github-markdown-css/github-markdown.css'
import 'highlight.js/styles/github.css'
import 'nprogress/nprogress.css'
// 路由
const router = useRouter(Vue, VueRouter)
// 按需引入elementui
importElementComponents(Vue)
// 按需引入echarts
importEchartsComponents(Vue)
Vue.config.productionTip = false
Vue.use(cookies)
Vue.use(hljs)
Vue.directive('highlight', function (el) {
const blocks = el.querySelectorAll('pre code')
blocks.forEach(block => {
hljs.highlightBlock(block)
})
})
// cookie
Vue.prototype.$cookies = cookies
// axios
Vue.prototype.$axios = axios
window.$axios_w = axios
Vue.prototype.$cookies.set('user_session', 'null')
new Vue({
el: '#app',
router,
components: {
App },
template: '<App/>'
})
结束
仓库：https://gitcode.net/qq_38870145/myblogvue_django
浏览地址：https://yongma16.xyz/
30几块的1核2G服务器带宽过于小1M，造成很卡，后续采用考虑采用cdn
