Vue.js 建立ViewUI項目

構建工具方式 - 完整引入

1. 建立Vue項目

2. ViewUI。

安裝：npm install view-design --save

main.js關鍵配置：

// 1. 引入庫
import ViewUI from 'view-design'

// 2. 引入樣式
import 'view-design/dist/styles/iview.css'

// 3. 生效
Vue.use(ViewUI)
複製代碼

main.js完整配置：

import Vue from 'vue'
import ViewUI from 'view-design'
import App from './App.vue'
import router from './router'
import store from './store'
import 'view-design/dist/styles/iview.css'

Vue.config.productionTip = false
Vue.use(ViewUI)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
複製代碼

*.vue中測試，能正確顯示就成功了。

<template>
  ...
    <Button type="primary">Primary</Button>
  ...
</template>
複製代碼

3. vue-i18n

安裝：npm i vue-i18n

建立zh-locale.js、en-locale.js。
用來合併ViewUI中自帶的zh、en顯示自定義的文字。

// src/config/locale/zh-locale.js

const messages = {
}

export default messages


// src/config/locale/en-locale.js

const messages = {
}

export default messages
複製代碼

main.js關鍵配置：

// 1.引入vue-i18n，iview的zh、en，本地的zh、en
import VueI18n from 'vue-i18n'
import zh from 'view-design/dist/locale/zh-CN'
import en from 'view-design/dist/locale/en-US'
import zhLocale from './config/locale/zh-locale'
import enLocale from './config/locale/en-locale'

// 2. 生效
Vue.use(VueI18n)

// 3. 建立VueI18n實例
const i18n = new VueI18n({
  locale: 'zh',
  messages: {
    zh: Object.assign(zhLocale, zh),
    en: Object.assign(enLocale, en)
  }
})

// 4. 添加到vue
new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')
複製代碼

*.vue中測試，能顯示在zh-locale.js或en-locale.js中配置的屬性（例如：test: '測試'）就好了。

<template>
  ...
    {{ $t('test') }}
  ...
</template>
複製代碼

4. 定製主題

經過覆蓋變量的方式。
建立樣式文件：*.less（須要安裝less、less-loader依賴）。文件夾與文件名均可以隨意。

less依賴：npm i less less-loader -D

修改vue.config.js配置less-loader

module.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }
}
複製代碼

開始配置：這裏只是示例，具體變量在這

// src/config/theme/viewui.less

@import '~view-design/src/styles/index.less';

// Base
@font-size-base         : 16px;
@font-size-small        : 14px;
@font-size-large        : 18px;
複製代碼

main.js關鍵配置：

// 將 'view-design/dist/styles/iview.css'改成自定義的樣式文件
import './config/theme/viewui.less'
複製代碼

5. iview-loader：使i-switch、i-circle能夠改寫爲Switch、Circle，統一爲PascalCase。

安裝：npm i iview-loader webpack-merge -D

vue.config.js關鍵配置：

// 1. 用來合併
const merge = require('webpack-merge')

module.exports = {
  // 2. 配置iview-loader
  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .test(/\.vue$/)
      .use('iview-loader')
      .loader('iview-loader')
      .tap(options => merge(options, { prefix: false }))
  },
  ...
}
複製代碼

*.vue中測試一下，能正確顯示PascalCase的Switch就表明配置正確了。

<template>
  ...
    <Switch />
  ...
</template>
複製代碼

構建工具方式 - 按需引入

1. 安裝：npm install view-design --save、npm install babel-plugin-import --save-dev

2. 按需引入配置

babel.config.js或.babelrc：

// babel.config.js
module.exports = {
  ... ...
  plugins: [
    [
      'import', {
        'libraryName': 'view-design',
        'libraryDirectory': 'src/components'
      }
    ]
  ]
  ... ...
}

或者

// .babelrc
{
  ... ...
  "plugins": [
    [
      "import", {
        "libraryName": "view-design",
        "libraryDirectory": "src/components"
      }
    ]
  ]
  ... ...
}
複製代碼

新增文件定義引入的組件

// 文件：src/config/components/viewui.js

import { Button } from 'view-design'

const ViewUI = {
  install (Vue) {
    Vue.component('Button', Button)
  }
}

export default ViewUI
複製代碼

配置main.js

// 引入組件
import ViewUI from './config/components/viewui.js'
// 使用樣式
import 'view-design/dist/styles/iview.css'

// 生效
Vue.use(ViewUI)
複製代碼

引用測試下，正確顯示就配置好了

<template>
  ...
    <Button type="primary">Primary</Button>
  ...
</template>
複製代碼

3. vue-i18n：和完整引入同樣

4. 定製主題：和完整引入同樣