Nov 11, 2019

Ant Design Vue 工程配置笔记

工程配置

创建工程

# 安装 Vue
# npm install -g @vue/cli
$ vue creat antd-demo

排除 vscode 配置忽略

vscode 打开上面创建的工程，修改 .gitignore 文件内容为：

.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
- .vscode
+ .vscode/*
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

+ !.vscode/settings.json

修改 vscode 工程配置

修改文件 .vscode/settings.json ，内容如下：

{
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #每次保存的时候自动格式化
  "editor.formatOnSave": true,
  // #每次保存的时候将代码按eslint格式进行修复
  "eslint.autoFixOnSave": true,
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // #让prettier使用eslint的代码格式进行校验
  "prettier.eslintIntegration": true,
  // #去掉代码结尾的分号
  "prettier.semi": false,
  // #使用带引号替代双引号
  "prettier.singleQuote": true,
  // #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #这个按用户自身习惯选择
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #vue组件中html代码格式化样式
    }
  },
}

安装 Ant Design Vue

从 yarn 或 npm 安装并引入 ant-design-vue。

$ yarn add ant-design-vue

安装 antd 导入插件

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理）。

$ yarn add babel-plugin-import --dev

修改babel.config.js文件，配置 babel-plugin-import

 module.exports = {
  presets: ["@vue/app"],
+  plugins: [
+    [
+      "import",
+      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
+    ]
+  ]
};

简单测试

修改 main.js 文件如下：

  import Vue from 'vue'
+ import { Button } from 'ant-design-vue';
  import App from './App'

+ Vue.component(Button.name, Button)

  Vue.config.productionTip = false

  new Vue({
    render: h => h(App)
  }).$mount("#app");

修改 src/App.vue的 template 内容。

<template>
  <div id="app">
    <img src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <a-button type="primary">Button></a-button>
  </div>
</template>
<script>
  
- import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
-     HelloWorld
  }
}
</script>
...

此时运行 yarn serve 会出现错误。

core-js 错误

出现如下错误提示：

yarn serve                                         
yarn run v1.19.1
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 errors                                                                                                              10:34:18 AM

This dependency was not found:

* core-js/modules/es.function.name in ./src/main.js

To install it, you can run: npm install --save core-js/modules/es.function.name

解决：

$ yarn add core-js

less-loader 错误

再次运行仍然有错误：

yarn serve
yarn run v1.19.1
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting CopyPlugin

 ERROR  Failed to compile with 2 errors                                                                                                              10:36:34 AM

Failed to resolve loader: less-loader
You may need to install it.
Failed to resolve loader: less-loader
You may need to install it.

解决

安装 less 和 less-loader

$ npm i less less-loader --save-dev

添加配置文件 vue.config.js ，内容如下：

module.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }
}

此时运行，正常的话就可以查看页面了。