vue项目实战：项目入口代码展示公共js文件夹内容

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)

  以上代码本人项目实测！！！真实可靠，请勿随意转载~转载请注明出处~~~谢谢合作！