Vue.js + iView 开发中遇到的问题

项目架构

Vue.js + Vue Router + Vuex + iView + eCharts

项目使用 Vue CLI 创建的

yarn build 打包问题

1. 执行 yarn build，生成的静态页显示404页面，无法正常浏览

原来是 vue-router 的配置项设置问题，设置的是 history 模式

mode: 'history',

删除这行代码后，就可以在 build 后正常查看 index.html 了

其实不是设置错误,是因为设置成 history 模式后,还需要在后台服务器进行相应设置

服务器配置参考官方文档

浏览器兼容性问题

iview报错:Promise 不支持

1. vue.config.js 中的 transpileDependencies 选项添加依赖名称。

transpileDependencies: ['iView']

2.babel.config.js 中使用 @vue/babel-preset-app 的 polyfills 选项预包含所需要的 polyfill。

module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'es6.promise'
      ]
    }]
  ]
}

3.使用 useBuiltIns: 'entry' 然后在入口文件添加 import '@babel/polyfill'(最终的包大小可能会增加)

参考: https://cli.vuejs.org/zh/guide/browser-compatibility.html#polyfill

iView中遇到的问题

1.Menu 菜单使用 subMenu 生成菜单，当有一项没有二级菜单时，互斥效果异常

在 Menu 的 change 事件中，在点击没有二级菜单的那一项的时候，执行下面的操作更新 Menu 的 currentActiveName 的值

this.$refs.menuName.currentActiveName = '当前点击项的 name 值'

2.当使用 v-for 生成 Menu 菜单时，默认选中项不能显示相应样式

在组件的 created 中写入相应更新事件，在 data 中的 openNames， activeName 更新后，在 $nextTick 中执行更新事件。

       this.openNames = ['parent-name']
       this.activeName = name
       this.$nextTick(() => {
         this.$refs.pageLeft.updateOpened()
         this.$refs.pageLeft.updateActiveName()
       })

3. iView 样式复写

新建一个 less 文件，引入下面的 less 文件之后

@import '~iview/src/styles/index.less';

就可以修改原来的变量配置了

4. DatePicker选择日期后格式错误

变成UTC 即2019-03-10T16:00:00.000Z 或 Wed Jun 10 2020 15:07:11 GMT+0800

 <DatePicker
              type="date"
              :value="paramValue.maxcreateTime"
              @on-change="paramValue.maxcreateTime = $event"
            >
</DatePicker>

用 on-change 事件的返回值，给绑定的数据赋值。on-change的返回值是已经格式化后的日期，是我们想要的格式。
不能用 v-model 了，否则还是错误格式。

5. Modal 每次打开都刷新数据的写法

 <Modal v-model="showModal">
      <Children :list="list" v-if="showModal" />
 </Modal>

Modal 上使用 v-model 进行双向绑定，子组件上使用 v-if 进行判断加载

6. Checkbox、Radio 的 value 值设置

是在 label 中写

<Checkbox label="twitter">Twitter</Checkbox>
<Radio label="apple">Apple</Radio>

7. FormItem 的验证功能

ruleInline 中的数据结构要和 formInline 中的相同

<Form ref="formInline" :model="formInline" :rules="ruleInline">
  <FormItem prop="user"> 
    <Input type="text" v-model="formInline.user"/> 
  </FormItem>
</Form>

8. Input number类型必填判断

校验中需要写明 type:”number”，否则数据不变化就会报为空

<Input type="number" number v-model="formItem.numberCode">
//校验
[{required: true, message: "必填项", trigger: "blur",type: "number"}]

项目中配置 Less

因为 iView 用的是 less，所以项目中需要配置 less 的依赖

安装好 less 后，还需要在 vue.config.js 中添加相应的配置

css:{
    loaderOptions:{
      less:{
        javascriptEnabled: true
      }
    }
  },

项目中引入 jQurey

1.引入后一直不生效

需要配置vue.config.js，配置后就可以按照说明正常使用了

configureWebpack: {//引入jquery

    plugins: [

      new webpack.ProvidePlugin({

        $:"jquery",

        jQuery:"jquery"

      })

    ]

  }