iview-admin爬坑日記

　　這是一篇有關iview-admin使用的文章。

　　1.安裝

　　git地址 https://github.com/iview/iview-admin

　　git clone https://github.com/iview/iview-admin.git 

　　拉下來后，進入iview-admin文件夾，在控制台輸入npm install安裝依賴。

　　依賴安裝完成后，控制台輸入npm run dev啟動項目。

　　2.前期配置

　　打開\iview-admin\src\config\index.js  將　

 　　useI18n: true,

      改為false。把國際化關閉。

　　根據個人需要 打開\iview-admin\vue.config.js 將

　　lintOnSave: true,

     eslint開啟或關閉。

　　3.添加頁面

　　項目中使用的大多數頁面都以單文件組件（.vue文件）形式放在\iview-admin\src\view文件夾下。

　　在view文件夾下創建test文件夾，並新建test.vue文件。如下圖所示。

　　

　　然后我們進行路由配置，這樣左側菜單欄才能出現我們添加過的頁面，路由的配置是在 /src/router 文件夾下，/src/router/index.js文件中定義路由攔截的邏輯，/src/router/routers.js文件中定義頁面路由信息。

　　在/src/router/routers.js中添加信息

{
    path: '/ceshi',   // 必須項
    name: 'ceshi',  // 必須項，后面緩存頁面需要用到，且這個name是唯一的
    meta: {
      icon: 'md-cloud-upload',
      title: '測試',
      showAlways: true  
    },
    component: Main,  // 一級目錄必須使用Main組件作為component
    children: [
      {
        path: 'test',
        name: 'test',
        meta: {
          icon: 'ios-document',
          title: '測試'
        },
        component: () => import('@/view/test/test.vue')
      }
    ]
  },

　　添加完會自動刷新頁面，效果如下　　　　

　　

　　我們開始編輯test.vue文件，按照單文件組件的寫法，寫入一些東西。

<template lang="">
<!-- 必須要有一個div,vue是掛載到這個div上的 -->
<div> 
  <p>{{text}}</p>
</div>
</template>

<script>
export default {
  data() {
    return {
      text:"測試"
    }
  }
}
</script>

<style lang="css" scoped>
</style>

 

　　效果如圖。

　　

　　4.打包設置

　　首先要把mock相關設置注釋掉，這樣才能打包后正常訪問接口。

　　將src\main.js中的這段代碼注釋掉。

if (process.env.NODE_ENV !== 'production') require('@/mock')

　　然后，修改根目錄下vue.config.js文件中的

const BASE_URL = process.env.NODE_ENV === 'production'
  ? '/'
  : '/'

　　為

　　const BASE_URL = './'

　　接下來還需要配置router文件夾下的index.js中router的mode為hash

　　　const router = new Router({
　　　　routes,
　　　　mode: 'hash'                     // 項目中本來mode: 'history'
　　　})

　　然后就可以在控制台輸入 npm run build進行打包了。