IView-UI组件篇之主题，语言，导航，路由

一.IView组件项目目录结构

iview-ui一套基于vue.js的前端组件库，iview中定制了一些自己组件的样式以及组件标签的书写规范，是一套非常流行的前端组件

1.1 基于iview创建的项目

基于ivew创建的项目和我们通过webpack创建的项目区别在于会新增plugins插件目录，而且下面会新建一个iview.js的js文件，其中就是用来对iview进行实例和引入

import Vue from 'vue'
import ViewUI from 'view-design'

Vue.use(ViewUI, {
   
    transfer:true,  //将标签元素的浮层放置到body下，脱离其挂在的app标签，这样可以有效的解决元素显示层级问题
    size: 'large', 
})
 
// import 'view-design/dist/styles/iview.css'
import '../custom.less';

注意点：iview3.x版本中导入方式为import iview from ‘./iview’
iview 4.x版本中为 import ViewUI from ‘./view-design’，iview已更名为view-design

1.2 iview主题和语言

import ‘…/custom.less’;例如自定义custom.less文件，iview的颜色是基于less方式进行开发的，例如custom.less中重写primary-color的样式

@import '~view-design/src/styles/index.less'; //引入全局配置
@primary-color: #8c0776; // 重写primary属性color，后面带有primary属性的class类组件颜色都是紫色（#8c0776）

语言

import Vue from 'vue'
import App from './App.vue'
import './plugins/iview.js'
import VueI18n from 'vue-i18n'

import en from 'view-design/dist/locale/en-US'
import zh from 'view-design/dist/locale/zh-CN'

import Router from './router.js'

Vue.config.productionTip = false

Router.beforeEach((to, from, next) => {
   
  const meta_type = to.meta.type;
  console.log(meta_type)
  if(meta_type === 'login'){
   
    if(window.localStorage.getItem('login')){
   
      next();
    }else{
   
      next(