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

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

你可能感兴趣的:(Vue3+TypeScript+Router+Vuex+Ant-Design-Vue项目)