1.公共js 这里就没使用mock数据了就一个菜单数据
/*
* @Description: 一些数据常量如模拟的菜单数据 这里就不再使用 mock common/constant.js
* @Version: 2.0
* @Autor: lhl
* @Date: 2020-06-15 15:24:29
* @LastEditors: lhl
* @LastEditTime: 2020-08-20 17:01:13
*/
export const menuData = [
{
menuUrl: "dashboard",
name: "首页",
icon: "el-icon-menu"
},
{
menuUrl: "/",
name: "vue语法测试",
icon: "el-icon-menu",
children: [
{
menuUrl: "",
name: "组件间通信方式",
icon: "el-icon-menu",
children: [
{
menuUrl: "parent",
name: "父子组件",
icon: "el-icon-menu"
},
{
menuUrl: "funCom",
name: "函数式组件",
icon: "el-icon-menu"
}
]
},
{
menuUrl: "",
name: "vue路由语法",
icon: "el-icon-menu",
children: [
{
menuUrl: "vueRouterParmas",
name: "vue路由传参",
icon: "el-icon-menu"
},
{
menuUrl: "vueRouterDefend",
name: "vue路由守卫",
icon: "el-icon-menu"
},
{
menuUrl: "vueGrammar",
name: "vue常用语法",
icon: "el-icon-menu"
}
]
}
]
},
{
menuUrl: "",
name: "element语法",
icon: "el-icon-menu",
children: [
{
menuUrl: "dymicFrom",
name: "动态表单",
icon: "el-icon-menu",
},
{
menuUrl: "elementTable",
name: "element ui表格",
icon: "el-icon-menu",
},
{
menuUrl: "baiduMapTest",
name: "百度地图",
icon: "el-icon-menu",
},
{
menuUrl: "vueBaiduMap",
name: "vue插件地图",
icon: "el-icon-menu",
},
]
},
]
/*
* @Description: 系统引导 driver.js http://f2ex.cn/driver-js/ common/steps.js
* @Version: 2.0
* @Autor: lhl
* @Date: 2020-07-21 17:12:08
* @LastEditors: lhl
* @LastEditTime: 2020-08-20 17:01:27
*/
const steps = [
{
element: '#logo',
popover: {
title: '系统logo',
description: '系统logo',
position: 'bottom'
}
},
{
element: '#title',
popover: {
title: '系统title',
description: '系统标题',
position: 'bottom'
}
},
{
element: '#user',
popover: {
title: '系统user',
description: '系统用户信息',
position: 'left'
}
}
]
export default steps
<!--
* @Description: App.vue根组件内容
* @Version: 2.0
* @Autor: lhl
* @Date: 2020-06-10 15:53:32
* @LastEditors: lhl
* @LastEditTime: 2020-08-20 17:02:53
-->
<template>
<div id="app">
<!-- 断网显示的图片，使用转换工具转换成base64格式，才可以显示 -->
<!-- <img class="nonet" v-if="!network" src="data:image/png;base64*******"/>
<router-view v-else /> -->
<router-view />
</div>
</template>
<script>
export default {
name: "App",
provide() {
return {
network: true, // 默认有网
appData: "根组件App的数据",
};
},
created() {},
// mounted中检测是否断网
mounted() {
// 检测断网
window.addEventListener("offline", () => {
console.log("已断网");
this.network = false;
});
window.addEventListener("online", () => {
console.log("网络已连接");
this.network = true;
})
// 阻止苹果手机默认滚动行为
document.body.addEventListener('touchmove', function (e) {
e.preventDefault() // 阻止默认的下拉滑动的效果
}, { passive: false }) // 兼容ios和android
// vue中获取屏幕高度
let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
},
};
</script>
<style>
</style>
/*
* @Description: main.js入口文件配置
* @Version: 2.0
* @Autor: lhl
* @Date: 2019-10-28 15:04:06
* @LastEditors: lhl
* @LastEditTime: 2020-08-20 17:03:38
*/
// 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 App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import 'babel-polyfill' // es6转es5
import './assets/basecss/reset.scss'
import store from "./store"
import promise from 'es6-promise' // Pormise的问题 Axios不能直接兼容IE9
import 'normalize.css/normalize.css'
// 作用：(Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css是一种CSS reset的替代方案 提供了HTML元素样式上跨浏览器的高度一致性)
// 保护有用的浏览器样式而不是去掉他们。
// 为大部分HTML元素提供一般化的样式
// 修复浏览器自身的bug并保证各浏览器的一致性。
// 优化css可用性
// 用注释和详细的文档来解释代码
import '@/directives/permission' // 页面按钮权限
import '@/commonComp/commonComp' // 自动加载组件并注册的全局组件（页面/组件公共的组件封装好的）
promise.polyfill()
// echarts图表插件 this.$echarts取到实例
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
Vue.use(ElementUI);
// 百度地图插件配置
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
ak: 'xxxx', // 百度地图开发者秘钥
})
// api统一管理
import http from './api/index'
// console.log(http,'http')
Vue.prototype.$http = http
// 全局过滤器方法注册
import * as filters from './filters'
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
// mixins使用方式有2中一种如下面的当做插件注册 另一种是需要用到的组件单独引入的 mixins: [Mixins] 同名的会被组件覆盖
import { Mixins } from "./mixins/common"
Vue.mixin(Mixins)
// 对Date的扩展，将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
// 例子：
// (new Date()).Format("yyyy-MM-dd hh:mm:ss") ==> 2020-08-12 08:09:04
// (new Date()).Format("yyyy-M-d h:m:s") ==> 2020-8-12 08:09:04
// (new Date().format("yyyy年MM月dd日"));
// (new Date().format("MM/dd/yyyy"));
// (new Date().format("yyyyMMdd"));
// (new Date().format("yyyy-MM-dd hh:mm:ss"));
Date.prototype.Format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, // 月份
"d+": this.getDate(), // 日
"h+": this.getHours(), // 小时
"m+": this.getMinutes(), // 分
"s+": this.getSeconds(), // 秒
"q+": Math.floor((this.getMonth() + 3) / 3), // 季度
"S": this.getMilliseconds() // 毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
Vue.config.productionTip = false // 生产日志
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
// fastClick的300ms延迟解决方案
// cnpm install fastclick -S
// import FastClick from 'fastclick'; // 引入插件
// FastClick.attach(document.body); // 使用 fastclick
// Vue-Awesome-Swiper基本能解决你所有的轮播需求
// vue打包后详细查看各部分体积大小
// 1.npm install --save-dev webpack-bundle-analyzer
// 2.webpack.prod.conf.js配置
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// module:{
// plugins: [
// new BundleAnalyzerPlugin()
// ]
// }
// 3.package.json添加
// "scripts": {
// "analyz": "NODE_ENV=production npm_config_report=true npm run build"
// }
// npm run build 即可查看进行对比优化
// vue安装node-sass编译报错
// npm install node-sass --save-dev //安装node-sass
// npm install sass-loader --save-dev //安装sass-loader
// Modele build failed: TypeError: this.getResolve is not a function at Object.loader...
// 原因当前sass的版本太高，webpack编译时出现了错误，这个时候只需要换成低版本就可以解决报错
// 卸载当前版本 npm uninstall sass-loader
// 安装 npm install sass-loader@7.3.1 --save-dev
// vue项目自动给css加前缀 package.json依赖里面有
// 用vue-cli构建的项目脚手架已经帮你把autoprefixer的配置做好了，自己不需要做什么改动就会自动加前缀（autoprefixer）
// 解决项目打包前和打包后的css前缀不一致
// ExtractTextPlugin这是提取分离css文件，不会影响css前缀
// OptimizeCSSPlugin里面依赖了cssnano,而cssnano里面也有一个autoprefixer配置参数，它的作用是删除不必要的前缀（会误删在某些浏览器必要的前缀），这与postcss的autoprefixer效果冲突了，因此禁用它
// new OptimizeCSSPlugin({
// cssProcessorOptions: config.build.productionSourceMap
// ? { safe: true, map: false,autoprefixer:false }
// : { safe: true, autoprefixer: false}
// })
// 有NodeJs中三个特别有意思的框架：
// Nest(NodeJs版本的Spring)、
// Nuxt（Vue的SSR）
// Next(React的SSR)
以上代码本人项目实测！！！真实可靠，请勿随意转载~转载请注明出处~~~谢谢合作！