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

2023-10-26  本文已影响0人  就用帅气点的昵称吧

环境需要: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

上一篇 下一篇

猜你喜欢

热点阅读