初始化

创建项目

安装 Yarn 包管理器

npm install yarn -g

安装 Vue CLI 脚手架

yarn global add @vue/cli

创建 Vue 项目

vue create hello-world

运行项目

cd hello-world
yarn serve

安装必要框架与插件

安装 Antdv

yarn add ant-design-vue@1.7.8

安装 Less

yarn add less@3.x
yarn add less-loader@7.x

常见配置

配置别名

在项目根目录创建 webpack.config.js 文件，内容如下：

const path = require("path");

module.exports = {
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
};

设置 @ 为 src 目录的别名。

配置 Less

修改 webpack.config.js 文件，内容如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },
    ],
  },
};

设置 test 属性，匹配 less 文件，添加 less-loader，用于编译 less 文件。

引入 Antdv

在 src/main.js 文件中引入 Antdv：

// 引入 Antdv
import Antdv from "ant-design-vue";
import "ant-design-vue/dist/antd.less";
Vue.use(Antdv);