VUE main.js、App.vue和assets/css/reset.scss配置

一、目录main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// import store from './store'
// 配置ElementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
// 配置全局默认样式
import '@/assets/css/reset.scss'
import '@/assets/font/iconfont.css' 

// 引入echarts图标
import echarts from "echarts"
//一般都要加个$加到vue的原型链上，方便引用
Vue.prototype.$echarts = echarts 
// 动画
import animate from 'animate.css'
Vue.use(animate);

Vue.config.productionTip = false
// 登录页面粒子效果
import VueParticles from 'vue-particles'  
Vue.use(VueParticles)  

// 语言转换
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
    locale: 'zh-CN',    // 语言标识
    //this.$i18n.locale // 通过切换locale的值来实现语言切换
    messages: {
      'zh-CN': require('./common/lang/zh'),   // 中文语言包
      'en-US': require('./common/lang/en')    // 英文语言包
    }
})

// 页面加载进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css' 
router.beforeEach((to,from,next) => {
  NProgress.start()
  next()
})
router.afterEach(() => {
  NProgress.done()
})
NProgress.configure({ easing: 'ease', speed: 3000, showSpinner: false })

// 引导
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
Vue.prototype.$driver = new Driver({
  doneBtnText: '完成', // Text on the final button
  closeBtnText: '关闭', // Text on the close button for this step
  stageBackground: '#fff', // Background color for the staged behind highlighted element
  nextBtnText: '下一步', // Next button text for this step
  prevBtnText: '上一步', // Previous button text for this step
})

// 打印
import Print from "vue-print-nb"
Vue.use(Print);

new Vue({
  el: '#app',
  router,
  // store,
  i18n,// 不要忘记
  render: h => h(App),
  mounted () {
  },
  created () {
  }
});

二、目录App.vue

<template>
  <div id="app">
    <div id="nav"></div>
    <router-view/>
  </div>
</template>

<style lang="scss">
// #app {
//   font-family: Avenir, Helvetica, Arial, sans-serif;
//   -webkit-font-smoothing: antialiased;
//   -moz-osx-font-smoothing: grayscale;
//   text-align: center;
//   color: #2c3e50;
// }

// #nav {
//   padding: 30px;

//   a {
//     font-weight: bold;
//     color: #2c3e50;

//     &.router-link-exact-active {
//       color: #42b983;
//     }
//   }
// }
</style>

三、目录assets/css/reset.scss

*{margin: 0; padding: 0}
html,body,#app{width: 100%; height: 100%}
img{vertical-align: top}
a {text-decoration: none; color: #9093b2; }
.router-link-active {text-decoration: none; color: #9093b2; }