Vue3+TypeScript+Router+Vuex+Ant-

搭建条件

• 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

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