1、npm安装vue-cli3：npm install -g @vue/cli（如果原先安装了vue-cli2需要先卸载：npm uninstall -g vue-cli）
新建项目：vue create ocr-frontend
启动项目：
cd ocr-frontend npm run serve
此时访问浏览器访问： http://localhost:8080/，看到Welcome to Your Vue.js App 的界面就算成功了。
2、引入antd
项目的默认目录如下：
├── node_modules ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── assets │ │ └── logo.png │ ├── components │ │ └── HelloWorld.vue │ ├── App.vue │ └── main.js ├── babel.config.js ├── package.json ├── package-lock.json ├── README.md └── yarn.lock
从 yarn 或 npm 安装并引入 ant-design-vue
npm install -g @vue/cli # 安装 cnpm install -g yarn # 使用 yarn add ant-design-vue
修改 src/main.js，引入antd的按钮组件以及样式文件
import Vue from 'vue' import App from './App.vue' import Button from "ant-design-vue/lib/button"; import "ant-design-vue/dist/antd.css"; 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"> <a-button type="primary">Button></a-button> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> ......
然年出现蓝色按钮则表示引用成功
