vue-cli3+ant-design-vue+typescript 注意事項

項目參考vue-cli3-web-init

ant-design配置部分

1. 實現ant-disign-vue的按需加載方案

（1）引入所有的組件，然后加載到vue上面 components-ant
（2）對Ant Design Vue進行文件聲明處理

// @/types/index.d.ts
declare module 'ant-design-vue' {
  const Ant: any
  export default Ant;
}

2. 安裝拆安處理ant-design-vue

（1）安裝插件

npm i babel-plugin-import --dev

（2）進行設置

• 參考 babel.config.js

plugins: [
  [ "import", {
    "libraryName": "ant-design-vue",
    "libraryDirectory": "es",
    "style": "css"
  } ]
]

3. 修改主題

（1）參考 vue.config.js

css: {
  /* less 變量覆蓋，用於自定義 ant design 主題 */
  loaderOptions: {
    less: {
      // modifyVars: {
      //   'primary-color': '#1DA57A',
      //   'link-color': '#1DA57A',
      //   'border-radius-base': '2px',
      // },
      javascriptEnabled: true
    }
  }
}

4. ant-Design-vue 將組件默認的英文修改為中文

（1）在app.vue中進行設置

  <a-locale-provider :locale="locale">
    <div id="app">
      ...
    </div>
  </a-locale-provider>

  <script>
    import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
    export default class Home extends Vue {
      locale = zhCN
    }
  </script>

5. 表單通過submit提交的時候，事件處理函數必須顯示阻止默認行為

handleSubmitByMesssage (e:any) {
  e.preventDefault();
  ...
}

項目

1. 替換favicon.ico

（1）設置vue.config.js

pwa: {
  iconPaths: {
    favicon32: 'favicon.ico',
    favicon16: 'favicon.ico',
    appleTouchIcon: 'favicon.ico',
    maskIcon: 'favicon.ico',
    msTileImage: 'favicon.ico'
  }
}

2. 圖片懶加載

只有列表的圖片才使用懶加載，用戶的頭像信息不能使用懶加載。

bug部分

1. 使用forEach、map的時候報錯 has an 'any' type

解決方法：為參數添加聲明any

arr.map((item: any) => {
});

2. 使用filters

必須將filters放到component 里面

3. 使用表單

必須在組件里面設置，會出現紅色警告，但是運行的時候不會報錯

  beforeCreate () {
    this.form = this.$form.createForm(this);     
  }

4. 修改觸發驗證的方式

{ 
  validateTrigger: [ 'blur'], 
  rules: [{ validator: validatorPhone}] }

5. 讀取表單的值的時候只能通過下面的方式

{
  this.form.getFieldValue('password')
}

6. 使用 vue-social-share

（1）在main.js中

import Share from 'vue-social-share'
Vue.use(Share)

（2）在組件中直接使用

<share :config="config" v-if="showShare"></share>

首選設置showShare為false，當config設置完成以后，設置showShare為true

兼容ie部分

1. SCRIPT1003: 缺少 ':'

1. 找到對應的包，將包的install方法改成key:value類型
   參考地址

install (Vue, options) {
  Vue.component('vue-particles', particles)
}
 ===>
install: function(Vue, options) {
  Vue.component('vue-particles', particles)
}

在使用antd的時候，ie瀏覽器不支持以svg的形式導入icon，可以用一張小圖片代替

ie瀏覽器，進行時間處理的時候必須把-換成/，否則計算出來的結果就是NaN

time = timeProp.replace(/-/g, '/');