美文网首页
初始化项目(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

相关文章

  • 基于Element UI的后台管理搭建

    1.首先项目初始化 2.首先项目初始化

  • dva.js 上手

    初始化 安装 dva-cli 用于初始化项目: 创建项目目录,并进入该目录: 初始化项目: 然后运行 npm st...

  • webpack构建项目

    webpack构建项目 一. 初始化项目 npm init -y 初始化项目信息 npm install --sa...

  • 打造属于自己的脚手架

    初始化项目 工程创建添加配置文件npm link 编写 Cli使用 commander新建命名 初始化项目 初始化...

  • Hello Vapor

    项目初始化 安装Vapor Tools 使用Vapor Tools初始化项目注意:可以根据需求创建模板项目vapo...

  • 用vue-cli3开发一个模仿饿了吗的ui库

    初始化项目 使用vue-cli3初始化项目,初始化目录如下: 将src修改为packages,用于放置组件源文件。...

  • Go 项目运行记录

    (仅供自己记录学习) 1. 项目结构 2. 根据项目包名初始化 【初始化】1. go mod init 【初始化】...

  • webpack4搭建react脚手架

    创建并初始化项目 先创建项目文件夹在项目中npm init 初始化项目建议node版本8以上,因为应用webpac...

  • 4.初始化node项目(package.json文件)

    进入项目目录 cd F:\nodeDemo,执行初始化项目运行命令: 运行初始化命令会提示填入相应项目信息,并最终...

  • webpack4+react+ts项目搭建

    创建项目 创建目录与远程仓库 克隆你的项目到本地git clone 项目地址 npm初始化 webpack初始化 ...

网友评论

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

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