[JavaScript知识库]vue-cli脚手架项目构建以及按需引入antd

• 安装vue-cli

npm install vue/cli -g

• 查看vue版本

  注意：V要大写

vue -V

• 如果下载速度太慢，可以使用cnpm淘宝镜像

npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org

此时下载出来的应该是2.9.6版本的脚手架

vue项目创建分为两种

1. vue-cli2

vue init webpack name

2. vue-cli3

vue create name

一.CLI2

vue init webpack font-admin

项目创建完成后 cd 项目名进入项目并启动，在浏览器打开即成功 :

npm run dev

项目初始化完成后目录：

二.CLI3

vue create name

如果cli的版本低于3.0会提示:

 vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
  You may want to run the following to upgrade to Vue CLI 3:

  npm uninstall -g vue-cli
  npm install -g @vue/cli

按照提示安装新版本的cli即可

之后根据自己项目需求用空格选择后回车确认，

TypeScript 支持使用 TypeScript 书写源码

Progressive Web App (PWA) Support PWA 支持。

Router 支持 vue-router 。

Vuex 支持 vuex 。

CSS Pre-processors 支持 CSS 预处理器。

Linter / Formatter 支持代码风格检查和格式化。

Unit Testing 支持单元测试。

E2E Testing 支持 E2E 测试。

选择出去后：

之后运行项目：

npm run serve
或者
yarn serve

vue-cli3创建出来的项目目录：

• 如果在cli3版本之上需要创建cli3以下的项目，可以在全局安装使用桥接工具

npm intall -g @vue-cli init

之后用下面命令创建即可

vue init webpack name 

• antd-vue版本网址

点击传送

• 安装antd

 npm install ant-design-vue

• 安装babel-plugin-import插件实现按需加在

npm install babel-plugin-import --dev
或
yarn add babel-plugin-import --dev

• 配置babel.config.js文件

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

• 在main.js中按需引入组件

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

• 在views/s/Home中调用button组件

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
     <a-button type="primary">Button</a-button>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

报错：

 ERROR  Failed to compile with 1 error                                                                                                     4:30:00 ├F10: PM┤

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

根据报错信息缺少less-loader，之后安装less-loader

yarn add less-loader --save-dev

//或者

npm install less-loader --save-dev

之后再运行，又报错

 ERROR  Failed to compile with 1 error                                                                                                     4:33:40 ├F10: PM┤

 error  in ./node_modules/ant-design-vue/es/button/style/index.less

Syntax Error: TypeError: this.getOptions is not a function


 @ ./node_modules/ant-design-vue/es/button/style/index.less 4:14-207 15:3-20:5 16:22-215
 @ ./node_modules/ant-design-vue/es/button/style/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://10.205.15.55:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

报错信息依赖包的less文件的问题，检查package.json里买你是否有less包，发现没有，安装less

npm install less --save-dev
//或
yarn add less --save-dev

安装后发现无效，依旧报错。尝试降低less跟less-loader的版本，less3.0，less-loader5.0：

之后此报信息消失，但有另外的报错信息

 error  in ./node_modules/ant-design-vue/es/button/style/index.less

Syntax Error: 

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      in /Users/mr/Desktop/study/vue-product/admin-three/node_modules/ant-design-vue/es/style/color/bezierEasing.less (line 110, column 0)


 @ ./node_modules/ant-design-vue/es/button/style/index.less 4:14-207 15:3-20:5 16:22-215
 @ ./node_modules/ant-design-vue/es/button/style/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://10.205.15.55:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

修改bable.config.js里面的style: true为style: ‘css’

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

重启项目，报错消失。

以上是cli3以上的项目按需引入antd，cli3以下的项目引入可以看文档介绍