美文网首页
初始化项目(Vue+ts+ant-design-vue)

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

作者: 就用帅气点的昵称吧 | 来源:发表于2023-10-26 14:54 被阅读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

    相关文章

      网友评论

          本文标题:初始化项目(Vue+ts+ant-design-vue)

          本文链接:https://www.haomeiwen.com/subject/ilnyidtx.html