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中测试，能正确显示就成功了。

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: '测试'）就行了。

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就代表配置正确了。

构建工具方式 - 按需引入

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)

引用测试下，正确显示就配置好了

3. vue-i18n：和完整引入一样

4. 定制主题：和完整引入一样