零基础学习windows环境安装Ant Design of Vue

antd 是基于 Ant Design 设计体系的组件库，主要用于研发企业级中后台产品。

第一步：安装node.js

已安装可跳过。
官网下载地址：https://nodejs.org/zh-cn/download/
安装完成之后，就拥有了npm，一个node.js自带的包管理工具。类似php的composer。

第二步：用npm安装yarn

已安装可跳过。
yarn和npm一样，是一个包管理工具，但速度更快（快很多很多），命令更短（好记）。
打开windows自带的powershell工具，执行以下命令：（后面所有命令都在此执行）

> npm install -g yarn

验证安装

> yarn -v
1.22.5

第三步：安装vue-cli

vue-cli是vue的开发脚手架，可理解基于vue框架的框架。
例为安装3.7.0版本，因为文档只讲了《在 vue-cli 3 中使用》。。。

> yarn global add @vue/[email protected]

验证安装

> vue -V
3.7.0

第四步：创建vue-cli项目

例为创建名为antd-demo的项目。

> vue create antd-demo
# 此时会出来一个选项，选择default (babel, eslint)就行了

此时若powershell提示错误，无法运行脚本，可以执行此命令，以允许运行：

> set-ExecutionPolicy RemoteSigned
执行策略更改
执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险，如 https:/go.microsoft.com/fwlink/?LinkID=135170
中的 about_Execution_Policies 帮助主题所述。是否要更改执行策略?
[Y] 是(Y)  [A] 全是(A)  [N] 否(N)  [L] 全否(L)  [S] 暂停(S)  [?] 帮助 (默认值为“N”): y

进入项目并启动

> cd antd-demo
> yarn serve

此时浏览器会访问 http://localhost:8080/ ，看到 Welcome to Your Vue.js App 的界面就算成功了。
备注：yarn serve和npm run serve是等效的，命令实际是执行在项目根目的package.json文件中scripts变量里定义的命令：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
},

第五步：引入 antd

安装ant-design-vue包

> yarn add ant-design-vue

第六步：使用 babel-plugin-import

babel-plugin-import 是一个按需加载组件，提高程序运行速度。

> yarn add babel-plugin-import --dev

修改babel.config.js文件，配置 babel-plugin-import，增加引入plugins模块

module.exports = {
  ...
  plugins: [
    [
      "import",
      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
    ]
  ]
}

然后在 src/main.js 里按下面的格式引入模块：

...
import { Button } from 'ant-design-vue';
...
Vue.component(Button.name, Button)
...

第六步：安装依赖

此时直接执行yarn serve，会报错缺少less-loader依赖，所以要先安装依赖：
经过我的测试，安装此版本可以运行，直接安装默认最新版会不兼容，报语法错误。

> yarn add [email protected]

less-loader又依赖less，所以继续安装

> yarn add [email protected]

此时又报错，Inline JavaScript is not enabled. Is it set in your options?
在文件根目录创建vue.config.js文件，加入如下代码：

module.exports = {
    css:{
        loaderOptions:{
            less:{
                javascriptEnabled:true, // 允许链式调用的换行
            }
       }
    }
}

第七步：启动serve

> yarn serve

至此，ant design of vue项目应该就成功启动了。

学习流程：
js->vue->node.js->npm->yarn->webpack->vue-cli->ant design for vue->ant design pro

文档：
ant design pro