Vue3+TypeScript+Router+Vuex+Ant-Design-Vue项目

搭建条件

• 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组件

  

    
Ant-Design-Vue
    
Button
     Primary 
    Default
     ashed 
     Danger 
    
       按钮 
    
     按钮 
     Link 
    
栅栏
    
       col-12 
       col-12 
    
    
       col-8 
       col-8 
       col-8 
    
    
       col-6 
       col-6 
       col-6 
       col-6 
    
  

• 执行运行命令
  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

实在不行建议你重装一遍！！！