初始化项目(Vue+ts+ant-design-vue)

环境需要:pnpm、node、等;

1、执行命令

 pnpm create vite user-manager-project --template vue-ts

终端显示:
a1@aXingMBP Vue实战文件夹 % pnpm create vite user-manager-project --template vue-ts

Library/pnpm/store/v3/tmp/dlx-53233      |  +1 +

Library/pnpm/store/v3/tmp/dlx-53233      | Progress: resolved1, reused 0, downloaded 1, added 1, done

Scaffolding project in /Users/a1/Documents/Vue实战文件夹/user-manager-project...

Done. Now run:

  cd user-manager-project

  pnpm install

  pnpm run dev

a1@aXingMBP Vue实战文件夹 % 

2、引入 ant-design-vue

官方文档


官方文档示例

2.1 安装antDesign项目下执行命令: pnpm i --save ant-design-vue@4.x

2.2 安装必要的库(axios、vue-router等):pnpm add axios vue-router

3、全局完整注册

import{createApp}from'vue';

importAntdfrom'ant-design-vue';

importAppfrom'./App';

import'ant-design-vue/dist/reset.css';

constapp=createApp(App);

app.use(Antd).mount('#app');

4、修改vite.config

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/

export default defineConfig({

  plugins: [vue()],

  server:{

    port: 3009,

    open: true,

    proxy :{ 

      '/api': {

        target: 'http://localhost:3000',

        changeOrigin: true,

        rewrite: (path) => path.replace(/^\/api/, '')

      }

    }

  }

})

最后运行看看!

    pnpm dev

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容