搭建条件
- node 8+
- npm 6.1+
- vue-cli 4+
- webpack 4+
vue-cli升级命令变更，低于3.0版本的需要先卸载再安装
// 卸载
npm uninstall vue-cli -g
// 安装
npm install @vue/cli -g
新建项目
vue create antd-demo
image.png
image.png
image.png
- 选择vue3 + router + vuex + typescript，暂时不建议用eslint，你要是足够自信ts代码可以写得非常规范，那你就使唤。
- 项目建好后的目录应该是这样的
image.png
配置ant-design-vue
npm i --save ant-design-vue@next
- 配置成功后在main.ts中引入
import { createApp } from 'vue'
import Antd from 'ant-design-vue';
import App from './App.vue'
import router from './router'
import store from './store'
import 'ant-design-vue/dist/antd.less'
const app = createApp(App)
app.use(store).use(router).use(Antd).mount('#app')
- 修改about.vue组件
<div class="about">
<h1>Ant-Design-Vue</h1>
<h3>Button</h3>
<a-button type="primary"> Primary </a-button>
<a-button>Default</a-button>
<a-button type="dashed"> ashed </a-button>
<a-button type="danger"> Danger </a-button>
<a-config-provider :auto-insert-space-in-button="false">
<a-button type="primary"> 按钮 </a-button>
</a-config-provider>
<a-button type="primary"> 按钮 </a-button>
<a-button type="link"> Link </a-button>
<h3>栅栏</h3>
<a-row>
<a-col :span="12"> col-12 </a-col>
<a-col :span="12"> col-12 </a-col>
</a-row>
<a-row>
<a-col :span="8"> col-8 </a-col>
<a-col :span="8"> col-8 </a-col>
<a-col :span="8"> col-8 </a-col>
</a-row>
<a-row>
<a-col :span="6"> col-6 </a-col>
<a-col :span="6"> col-6 </a-col>
<a-col :span="6"> col-6 </a-col>
<a-col :span="6"> col-6 </a-col>
</a-row>
</div>
</template>
- 执行运行命令
npm serve - 运行成功后点击点击路由About展示如下
image.png
项目基本框架就算搭起来了，很简单。
可能遇到的问题
image.png
webpack版本太低建议升级
npm install webpack --save-dev
没有安装less
npm install less less-loader --save
没有安装babel-plugin-import
npm install babel-plugin-import --save-dev
