vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）

偏执的太偏执、 2024-03-25 20:16 93阅读 0赞

## vue3 项目搭建教程（基于create-vue，vite，Vite + Vue） ##

**目录**

一、搭建vue3 项目前提条件

二、通过create-vue搭建vue3 项目

三、搭建一个 Vite 项目

四、构建一个 Vite + Vue 项目

五、打开Vue 项目管理器

六、Vite + Vue 项目目录结构

七、Vite.config.ts配置

--------------------

## 一、搭建vue3 项目前提条件 ##

> 前提条件
> 
>  *  熟悉命令行
>  *  已安装 16.0 或更高版本的 Node.js

### （1）、检查node 和npm版本信息 ###

> 同时按window+R键,输入cmd,打开命令提示符窗口

![5473d9dad6454e0d8a4cdbd7690a88c6.jpeg][]

> **输入：** node –v　（查看本机安装的node版本）

![2271c5801deb4330aed8c66e968456d1.jpeg][]

>  **输入：** npm –v　（查看本机安装的npm版本）

![b55a7b0182ec4206b7fca370cf1b47a0.jpeg][]

### （2）、升级你的 Node 版本 ###

![34878ebcf8d94f60a02325a40bb7ffe4.png][]

> 如果提示没有安装node或Node.js 版本 较低，请升级你的 Node 版本。
> 
> 详细教程可参阅下面链接文章：
> 
>  *  [Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）https://blog.csdn.net/weixin\_69553582/article/details/129584587][Vue3_https_blog.csdn.net_weixin_69553582_article_details_129584587]

## 二、通过create-vue搭建vue3 项目 ##

> 同时按window+R键,输入cmd,打开命令提示符窗口

![5473d9dad6454e0d8a4cdbd7690a88c6.jpeg][]

进入你准备搭建vue3 项目的相应目录，例如本例目录地址：C:\\00program\\vue\\vuelearn

>  *  输入：npm init vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。

![c82d93873bf24570ae1c33e74efb9458.jpeg][]

你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

Vue.js - The Progressive JavaScript Framework
    
    √ Project name: ... vueproject1
    √ Add TypeScript? ... No / Yes
    √ Add JSX Support? ... No / Yes
    √ Add Vue Router for Single Page Application development? ... No / Yes
    √ Add Pinia for state management? ... No / Yes
    √ Add Vitest for Unit Testing? ... No / Yes
    √ Add an End-to-End Testing Solution? » No
    √ Add ESLint for code quality? ... No / Yes
    
    Scaffolding project in C:\00program\vue\vuelearn\vueproject1...

我们依次输入问题的答案，帮助创建项目：

>  *  Project name：\------》项目名称，默认值：vue-project，可输入想要的项目名称，此处我写的是：vueproject1。
>  *  Add TypeScript? \------》是否加入TypeScript组件？默认值：No。
>  *  Add JSX Support? \------》是否加入JSX支持？默认值：No。
>  *  Add Vue Router for Single Page Application development? \------》是否为单页应用程序开发添加Vue Router路由管理组件？默认值：No。
>  *  Add Pinia for state management? \------》是否添加Pinia组件来进行状态管理？默认值：No。
>  *  Add Vitest for Unit testing? \------》是否添加Vitest来进行单元测试？默认值：No。
>  *  Add an End-to-End Testing Solution?\------》是否添加端到端测试？默认值No。
>  *  Add ESLint for code quality? \------》是否添加ESLint来进行代码质量检查？默认值：No。

如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。

![cec030f8944d4c03ba5cdb9d9f39db80.jpeg][]

脚手架工程项目在指定位置被创建好。

在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

Done. Now run:
      cd vueproject1
      npm install
      npm run dev

![1bf7df64626844a8a3c3687f0c66a443.jpeg][]

cd进入vueproject1目录后，依次输入以下命令，

>  *  npm install
>  *  npm run dev

vite服务器启动，显示了项目地址，如下图：

![3bc3476dadca4d42b371647f7dc749c4.jpeg][]

我们在浏览器打开 [http://localhost:5173/ ][http_localhost_5173_]

显示页面如下图：

![d4bc741df6b0482193a6cf4e3fb95ef3.jpeg][]

现在已经可以运行起一个 Vue 项目！

请注意，生成的项目中的示例组件使用的是组合式 API 和 <script setup>，而非选项式 API。

> 当你准备将应用发布到生产环境时，请运行：
> 
>  *  npm run build

此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本。

## 三、搭建一个 Vite 项目 ##

Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

一个开发服务器，它基于原生 ES 模块，提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）。

一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

<table> 
 <tbody> 
  <tr> 
   <td colspan="4" style="text-align:center;"><strong>Vite 浏 览 器 支 持</strong></td> 
  </tr> 
  <tr> 
   <td colspan="4">默认情况下，Vite 的目标是能够 支持原生 ESM script 标签、支持原生 ESM 动态导入 和 import.meta 的浏览器：</td> 
  </tr> 
  <tr> 
   <td>Chrome</td> 
   <td>Firefox</td> 
   <td>Safari</td> 
   <td>Edge</td> 
  </tr> 
  <tr> 
   <td>&gt;=87</td> 
   <td>&gt;=78</td> 
   <td>&gt;=14</td> 
   <td>&gt;=88</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td colspan="7"> <p style="text-align:center;"><strong>目前Vite支持的模板预设如下：</strong></p> </td> 
  </tr> 
  <tr> 
   <td>JavaScript</td> 
   <td>vanilla</td> 
   <td>vue&nbsp;</td> 
   <td>react&nbsp;</td> 
   <td>preact</td> 
   <td>svelte&nbsp;</td> 
   <td>lit&nbsp;</td> 
  </tr> 
  <tr> 
   <td>TypeScript</td> 
   <td>vanilla-ts</td> 
   <td>vue-ts</td> 
   <td>react-ts</td> 
   <td>preact-ts</td> 
   <td>svelte-ts</td> 
   <td>lit-ts</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

本文介绍如何在本地搭建 Vue 单页应用。  
　　创建的项目将使用基于 Vite 的构建设置，并允许我们使用 Vue 的单文件组件 (SFC)。

确保你安装了最新版本的 Node.js，

然后在命令行中运行以下命令

> 兼容性注意
> 
> Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

如果你不知道你的node.js的版本是多少，请按照上文所述步骤检测升级node

## 四、构建一个 Vite + Vue 项目 ##

构建一个 Vite + Vue 项目，npm版本不同时，命令也有所不同：

> 输入命令：
> 
> npm 6.x
> 
>  *  npm create vite@latest my-vue-app --template vue
> 
> n pm 7+, extra double-dash is needed:
> 
>  *  npm create vite@latest my-vue-app -- --template vue
> 
> y arn
> 
>  *  yarn create vite my-vue-app --template vue
> 
> pnpm
> 
>  *  pnpm create vite my-vue-app --template vue

进入你准备搭建 Vite + Vue 项目的相应目录，例如本例目录地址：C:\\00program\\vue\\vuelearn

>  *  输入命令：npm create vite@latest vueviteproject1 -- --vue

C:\00program\vue\vuelearn>npm create vite@latest vueviteproject1 -- --vue
    ? Select a framework: » - Use arrow-keys. Return to submit.
    >   Vanilla
        Vue
        React
        Preact
        Lit
        Svelte
        Others

![58420925b6894743ad3c0d7e31e76233.jpeg][]

Select a framework: »\------》 选择一个框架

我们选择Vue，回车，显示下一项选项：

? Select a variant: » - Use arrow-keys. Return to submit.
    >   JavaScript
        TypeScript
        Customize with create-vue ↗
        Nuxt ↗

选择一个编程语言： » - 使用箭头键。返回提交。

![f3f41e3e90c54ba18892e9367fb6f2f3.jpeg][]

我们选择TypeScript，回车，显示下一项如图：

C:\00program\vue\vuelearn>npm create vite@latest vueviteproject1 -- --vue
    √ Select a framework: » Vue
    √ Select a variant: » TypeScript
    
    Scaffolding project in C:\00program\vue\vuelearn\vueviteproject1...
    
    Done. Now run:
    
      cd vueviteproject1
      npm install
      npm run dev

脚手架项目构建完成 ，需要进入项目目录，输入以下两个命令：

>  *  npm install
>  *  npm run dev

![1b19557516eb4f7dbe0fcaf0b60d9445.jpeg][]

>  *  npm run dev

VITE v4.2.0  ready in 294 ms
    
      ➜  Local:   http://localhost:5173/
      ➜  Network: use --host to expose
      ➜  press h to show help

![1891318fdf5045e5b7f41f6dd3cffb5b.jpeg][]

> Shortcuts快捷方式
> 
>  *  press r to restart the server \------》按 R 重新启动服务器
>  *  press u to show server url \------》按你显示服务器网址
>  *  press o to open in browser \------》按 O 在浏览器中打开
>  *  press c to clear console \------》按 C 清除控制台
>  *  press q to quit \------》按 Q 退出

在本地用浏览器打开：http://localhost:5173

就可以看到刚才创建的基于Vite + Vue.js的项目欢迎页面，如图所示。

![3422fdc33d594d83b8e7567bbf6bca38.jpeg][]

## 五、打开Vue 项目管理器 ##

同时按window+R键,输入cmd，打开命令提示符窗口，进入 Vue 项目所在目录，例如：

C:\\00program\\vue\\vuelearn\\vueviteproject1

![27659467960b4481ad502cd5915ef645.jpeg][]

>  *  输入vue ui

打开Vue 项目管理器界面（vue ui会自动打开其网址：[http://localhost:8000/project/select][http_localhost_8000_project_select]）

![4b31f3c28e9a43debff59f41dbdd9be5.jpeg][]

## 六、Vite + Vue 项目目录结构 ##

![906192c2ee1742ee82dda28327750b99.jpeg][]

vueviteproject1项目（基于Vite + Vue项目）│  
│  
├── .vscode 目录。  
│　　　├──　v  
│　　　├──　v  
│　　　└──　v  
│  
├── node\_modules 目录 （vue 项目的文件依赖存放在这个文件夹。）  
│　　　├──　所有在package.json中定义的第三方包都会被自动下载，保存在该文件夹下。  
│　　　├──　v  
│　　　└──　v  
│  
│  
├── public 目录：存放项目公共资源。如网站LOGO等。  
│ │ 通常我们不需要对public文件夹内的资源做任何修改。  
│ │ 后续在构建打包时，public内容会直接放到dist文件夹内plugins插件资源；  
│　　　├──　v  
│　　　├──　v  
│　　　└──　v  
│  
│  
├── src 目录 ：存放 vue 项目的源代码。其下的各个文件（文件夹）分别为：  
│　　　├──　assets 目录 ：资源文件，存放 css，图片等资源。  
│　　　├──　component 目录 ：组件文件夹，存放 vue 的公共组件（核心）  
│ │ （注册于全局，在整个项目中通过关键词便可直接输出）。  
│ │  
│　　　├──　router 目录 ：用来存放 index.js，用来配置路由，定义各个页面对应的URL。  
│　　　├──　store 目录 ：组件文件夹，存放 vue 的公共组件  
│　　　├──　views 目录：放主体页面，vue 文件是可以用来充当路由 view 的。  
│　　　├──　tool：用来存放工具类 js，  
│ │ 将 js 代码封装好放入这个文件夹可以全局调用  
│ │ （如api.js，http.js 是对 http 方法和 api 方法的封装）。  
│　　　├── main.js：是项目的入口文件，初始化 vue 实例，并引入所需要的插件。  
│　　　├── app.vue：是项目的主组件，所有页面都是在该组件下进行切换的。  
│　　　├──  
│　　　└──　v  
│  
│  
├── package.json 存放项目的依赖配置  
├── .gitignore。  
├── tsconfig.json  
├── tsconfig.node.json  
├──index.html  
└──vite.config.ts

*  node\_modules文件夹，文件夹中往往会有几百个文件夹，Node项目所用到的第三方包特别多，也特别大。这些文件是由$ npm install命令产生的。所有在package.json中定义的第三方包都会被自动下载，保存在该文件夹下。
 *  src文件夹是核心源代码的所在目录，展开后如下所示（不同版本的vue-cli生成的目录会稍有不同，不过核心都是一样的），正常开发的时候一般只修改 src 文件夹下的文件。
 *  dist —— 项目构建打包后的默认输出目录。
 *  index.html 与项目根目录，在一个 Vite 项目中，index.html 在项目最外层而不是在 public 文件夹内。这是有意而为之的：在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件。

Vite 将 index.html 视为源码和模块图的一部分。Vite 解析 <script type="module" src="..."> ，这个标签指向你的 JavaScript 源码。甚至内联引入 JavaScript 的 <script type="module"> 和引用 CSS 的 <link href> 也能利用 Vite 特有的功能被解析。另外，index.html 中的 URL 将被自动转换，因此不再需要 %PUBLIC\_URL% 占位符了。

与静态 HTTP 服务器类似，Vite 也有 “根目录” 的概念，即服务文件的位置，在接下来的文档中你将看到它会以 <root> 代称。源码中的绝对 URL 路径将以项目的 “根” 作为基础来解析，因此你可以像在普通的静态文件服务器上一样编写代码（并且功能更强大！）。Vite 还能够处理依赖关系，解析处于根目录外的文件位置，这使得它即使在基于 monorepo 的方案中也十分有用。

Vite 也支持多个 .html 作入口点的 多页面应用模式。

## 七、Vite.config.ts配置 ##

转载地址：https://huaweicloud.csdn.net/638ee192dacf622b8df8d725.html

1.配置和pinia，router，axios，ref,reactive引入等等  
2.配置代理  
3.配置.ts，.vue，.tsx等等文件别名  
4.配置antdV按需加载  
5.配置antdV主题色+全局引入less+全局颜色变量  
6.配置vue使用tsx写法  
7.配置测试环境保留打印

import { defineConfig, loadEnv } from 'vite'
    import type { UserConfig, ConfigEnv } from 'vite'
    import vue from '@vitejs/plugin-vue'
    import vueJsx from '@vitejs/plugin-vue-jsx' //tsx插件引入
    import AutoImport from 'unplugin-auto-import/vite' //自动引入ref,reactive等等等
    // 配置antd-v按需加载
    import Components from 'unplugin-vue-components/vite'
    import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
    // import path from 'path';
    import { resolve, join } from 'path'
    import { wrapperEnv } from './build/utils'
    
    // defineConfig 工具函数，这样不用 jsdoc 注解也可以获取类型提示
    export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
      console.log(command, mode, '===')
      const root = process.cwd()
      const env = loadEnv(mode, root) // 环境变量对象
      console.log('环境变量------', env)
      console.log('文件路径（ process.cwd()）------', root)
      console.log('文件路径（dirname）------', __dirname + '/src')
      const { VITE_DROP_CONSOLE } = wrapperEnv(env)
    
      // // dev 独有配置
      return {
        root, //项目根目录（index.html 文件所在的位置） 默认： process.cwd()
        base: '/', //  开发或生产环境服务的公共基础路径：默认'/'   1、绝对 URL 路径名： /foo/；  2、完整的 URL： https://foo.com/； 3、空字符串或 ./（用于开发环境）
        publicDir: resolve(__dirname, './dist'), //默认'public'  作为静态资源服务的文件夹  (打包public文件夹会没有，里面得东西会直接编译在dist文件下)
        assetsInclude: resolve(__dirname, './src/assets'), // 静态资源处理
    
        // ******插件配置******
        plugins: [
          vue(),
          vueJsx(),
          AutoImport({
            imports: [
              'vue',
              'vue-router',
              'pinia',
              {
                axios: [
                  ['default', 'axios'] // import { default as axios } from 'axios',
                ]
              }
            ],
            dts: 'types/auto-import.d.ts' //生成全局引入的文件
          }),
          Components({
            resolvers: [
              AntDesignVueResolver({
                importStyle: 'less' //修改antdv主题色
              })
            ]
          })
        ], //配置插件
        // ******开发服务器配置******
        server: {
          https: true, //(使用https)启用 TLS + HTTP/2。注意：当 server.proxy 选项 也被使用时，将会仅使用 TLS
          host: true, // 监听所有地址
          port: 8080, //指定开发服务器端口：默认3000
          open: true, //启动时自动在浏览器中打开
          cors: false, //为开发服务器配置 CORS
          proxy: {
            //配置自定义代理规则
            // 字符串简写写法
            '/jpi': 'http://192.168.1.97:4567',
            '/api': {
              target: 'http://192.168.1.97:108',
              changeOrigin: true, //是否跨域
              rewrite: path => path.replace(/^\/api/, '')
            }
          }
          // hmr: {
          //   overlay: false
          // }
        },
        // ******项目构建配置******
        build: {
          target: 'modules', //设置最终构建的浏览器兼容目标  //es2015(编译成es5) | modules
          outDir: 'dist', // 构建得包名  默认：dist
          assetsDir: 'assets', // 静态资源得存放路径文件名  assets
          sourcemap: false, //构建后是否生成 source map 文件
          brotliSize: false, // 启用/禁用 brotli 压缩大小报告。 禁用该功能可能会提高大型项目的构建性能
          minify: 'esbuild', // 项目压缩 :boolean | 'terser' | 'esbuild'
          chunkSizeWarningLimit: 1000, //chunk 大小警告的限制（以 kbs 为单位）默认：500
          cssTarget: 'chrome61' //防止 vite 将 rgba() 颜色转化为 #RGBA 十六进制符号的形式  (要兼容的场景是安卓微信中的 webview 时,它不支持 CSS 中的 #RGBA 十六进制颜色符号)
        },
        // ******resolver配置******
        resolve: {
          alias: {
            // 别名配置
            // 键必须以斜线开始和结束
            '@': resolve(__dirname, 'src'),
            components: resolve(__dirname, './src/components'),
            assets: resolve(__dirname, './src/assets'),
            '#': resolve(__dirname, 'types'),
            build: resolve(__dirname, 'build')
          }
        },
        // ******打印+debugger清除配置******
        // 测试环境保留打印
        esbuild: {
          pure: VITE_DROP_CONSOLE ? ['console.log', 'debugger'] : []
        },
    
        css: {
          // 全局变量+全局引入less+配置antdv主题色
          preprocessorOptions: {
            less: {
              javascriptEnabled: true,
              // 全局变量使用：@primary-color
              modifyVars: {
                'primary-color': '#1890ff', // 全局主色
                'link-color': ' #1890ff', // 链接色
                'success-color': ' #52c41a', // 成功色
                'warning-color': ' #faad14', // 警告色
                'error-color': ' #f5222d', // 错误色
                'font-size-base': ' 14px', // 主字号
                'heading-color': ' rgba(0, 0, 0, 0.85)', // 标题色
                'text-color': ' rgba(0, 0, 0, 0.65)', // 主文本色
                'text-color-secondary': ' rgba(0, 0, 0, 0.45)', // 次文本色
                'disabled-color': ' rgba(0, 0, 0, 0.25)', // 失效色
                'border-radius-base': ' 2px', // 组件/浮层圆角
                'border-color-base': ' #d9d9d9', // 边框色
                'box-shadow-base': ' 0 2px 8px rgba(0, 0, 0, 0.15)' // 浮层阴影
              }
            }
          }
        }
      }
    })

<table> 
 <tbody> 
  <tr> 
   <td> <p><img alt="" src="https://img-blog.csdnimg.cn/61da98f39b35462eabfdad9f32f99766.png"></p> </td> 
   <td><a href="https://blog.csdn.net/weixin_69553582/article/details/129640088" title="创建基于Webpack的Vue.js项目" rel="nofollow">创建基于Webpack的Vue.js项目</a></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td> <p><img alt="" src="https://img-blog.csdnimg.cn/54caced843084f68b42ec9a8ef068934.png"></p> </td> 
   <td><a href="https://blog.csdn.net/weixin_69553582/article/details/129630880" title="vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）" rel="nofollow">vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）</a></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><img alt="" src="https://img-blog.csdnimg.cn/b3073d32f5b946aaa341c627478ac6ff.png"></td> 
   <td><a href="https://blog.csdn.net/weixin_69553582/article/details/129672897" title="vue3 项目创建(UI图形化界面方式，可视化操作Vue项目，vue ui)" rel="nofollow">vue3 项目创建(UI图形化界面方式，可视化操作Vue项目，vue ui)</a></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

**推荐阅读：**

<table> 
 <tbody> 
  <tr> 
   <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>30</td> 
   <td> <p><img alt="" height="84" src="https://img-blog.csdnimg.cn/c0f74fbb8d534b17964693dba9e1494f.png" width="150"></p> </td> 
   <td><a href="https://blog.csdn.net/weixin_69553582/article/details/129584587" title="Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）" rel="nofollow">Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）</a></td> 
  </tr> 
  <tr> 
   <td>29</td> 
   <td><img alt="" height="84" src="https://img-blog.csdnimg.cn/37d6aa3e03e241fa8db72ccdfb8f716b.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/129233327" title="SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例）" rel="nofollow">SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例）</a></p> </td> 
  </tr> 
  <tr> 
   <td>28</td> 
   <td><img alt="" height="84" src="https://img-blog.csdnimg.cn/6824ba7870344be68efb5c5f4e1dbbcf.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/129053793" title="查看jdk安装路径，在windows上实现多个java jdk的共存解决办法，安装java19后终端乱码的解决" rel="nofollow">查看jdk安装路径，在windows上实现多个java jdk的共存解决办法，安装java19后终端乱码的解决</a></p> </td> 
  </tr> 
  <tr> 
   <td>27</td> 
   <td><img alt="bba02a1c4617422c9fbccbf5325850d9.png" height="84" src="https://img-blog.csdnimg.cn/bba02a1c4617422c9fbccbf5325850d9.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/128999468" title="别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(1)" rel="nofollow">别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(1)</a></p> </td> 
  </tr> 
  <tr> 
   <td>26</td> 
   <td><img alt="fea225cb9ec14b60b2d1b797dd8278a2.png" height="84" src="https://img-blog.csdnimg.cn/fea225cb9ec14b60b2d1b797dd8278a2.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/128699908" title="2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特" rel="nofollow">2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特</a></p> </td> 
  </tr> 
  <tr> 
   <td>25</td> 
   <td><img alt="1f53fb9c6e8b4482813326affe6a82ff.png" height="84" src="https://img-blog.csdnimg.cn/1f53fb9c6e8b4482813326affe6a82ff.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/128581968" title="2023春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）" rel="nofollow">2023春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）</a></p> </td> 
  </tr> 
  <tr> 
   <td>24</td> 
   <td><img alt="6176c4061c72430eb100750af6fc4d0e.png" height="84" src="https://img-blog.csdnimg.cn/6176c4061c72430eb100750af6fc4d0e.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/128425770?spm=1001.2014.3001.5502" title="HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)" rel="nofollow">HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)</a></p> </td> 
  </tr> 
  <tr> 
   <td>23</td> 
   <td><img alt="17b403c4307c4141b8544d02f95ea06c.png" height="84" src="https://img-blog.csdnimg.cn/17b403c4307c4141b8544d02f95ea06c.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/128368639" title="草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码" rel="nofollow">草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码</a></p> </td> 
  </tr> 
  <tr> 
   <td>22</td> 
   <td><img alt="5d409c8f397a45c986ca2af7b7e725c9.png" height="84" src="https://img-blog.csdnimg.cn/5d409c8f397a45c986ca2af7b7e725c9.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/128296176" title="【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）" rel="nofollow">【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）</a></p> </td> 
  </tr> 
  <tr> 
   <td>21</td> 
   <td><img alt="0a4256d5e96d4624bdca36433237080b.png" height="84" src="https://img-blog.csdnimg.cn/0a4256d5e96d4624bdca36433237080b.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/127941542" title="python爱心源代码集锦（18款）" rel="nofollow">python爱心源代码集锦（18款）</a></p> </td> 
  </tr> 
  <tr> 
   <td>20</td> 
   <td><img alt="4d9032c9cdf54f5f9193e45e4532898c.png" height="84" src="https://img-blog.csdnimg.cn/4d9032c9cdf54f5f9193e45e4532898c.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/128141522" title="巴斯光年python turtle绘图__附源代码" rel="nofollow">巴斯光年python turtle绘图__附源代码</a></p> </td> 
  </tr> 
  <tr> 
   <td>19</td> 
   <td><img alt="074cd3c255224c5aa21ff18fdc25053c.png" height="84" src="https://img-blog.csdnimg.cn/074cd3c255224c5aa21ff18fdc25053c.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/128015962" title="Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）" rel="nofollow">Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）</a></p> </td> 
  </tr> 
  <tr> 
   <td>18</td> 
   <td><img alt="daecd7067e7c45abb875fc7a1a469f23.png" height="84" src="https://img-blog.csdnimg.cn/daecd7067e7c45abb875fc7a1a469f23.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/127799077" title="草莓熊python turtle绘图代码（玫瑰花版）附源代码" rel="nofollow">草莓熊python turtle绘图代码（玫瑰花版）附源代码</a></p> </td> 
  </tr> 
  <tr> 
   <td>17</td> 
   <td><img alt="fe88b78e78694570bf2d850ce83b1f69.png" height="84" src="https://img-blog.csdnimg.cn/fe88b78e78694570bf2d850ce83b1f69.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/127799004" title="立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦" rel="nofollow">立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦</a></p> </td> 
  </tr> 
  <tr> 
   <td>16</td> 
   <td><img alt="c5feeb25880d49c085b808bf4e041c86.png" height="84" src="https://img-blog.csdnimg.cn/c5feeb25880d49c085b808bf4e041c86.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/127505979" title="皮卡丘python turtle海龟绘图（电力球版）附源代码" rel="nofollow">皮卡丘python turtle海龟绘图（电力球版）附源代码</a></p> </td> 
  </tr> 
  <tr> 
   <td>15</td> 
   <td><img alt="38266b5036414624875447abd5311e4d.png" height="84" src="https://img-blog.csdnimg.cn/38266b5036414624875447abd5311e4d.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/127582251" title="【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)" rel="nofollow">【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)</a></p> </td> 
  </tr> 
  <tr> 
   <td>14</td> 
   <td><img alt="03ed644f9b1d411ba41c59e0a5bdcc61.png" height="84" src="https://img-blog.csdnimg.cn/03ed644f9b1d411ba41c59e0a5bdcc61.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/127131591" title="草莓熊python turtle绘图（风车版）附源代码" rel="nofollow">草莓熊python turtle绘图（风车版）附源代码</a></p> </td> 
  </tr> 
  <tr> 
   <td>13</td> 
   <td><img alt="09e08f86f127431cbfdfe395aa2f8bc9.png" height="84" src="https://img-blog.csdnimg.cn/09e08f86f127431cbfdfe395aa2f8bc9.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/126624379" title="用代码过中秋，python海龟月饼你要不要尝一口？" rel="nofollow">用代码过中秋，python海龟月饼你要不要尝一口？</a></p> </td> 
  </tr> 
  <tr> 
   <td>12</td> 
   <td><img alt="40e8b4631e2b486bab2a4ebb5bc9f410.png" height="84" src="https://img-blog.csdnimg.cn/40e8b4631e2b486bab2a4ebb5bc9f410.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/126365799" title="《 Python List 列表全实例详解系列（一）》__系列总目录、列表概念" rel="nofollow">《 Python List 列表全实例详解系列（一）》__系列总目录、列表概念</a></p> </td> 
  </tr> 
  <tr> 
   <td>11</td> 
   <td><img alt="938bc5a8bb454a41bfe0d4185da845dc.jpeg" height="84" src="https://img-blog.csdnimg.cn/938bc5a8bb454a41bfe0d4185da845dc.jpeg" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/126110424?spm=1001.2014.3001.5502" title="用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）" rel="nofollow">用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）</a></p> </td> 
  </tr> 
  <tr> 
   <td>10</td> 
   <td><img alt="0f09e73712d149ff90f0048a096596c6.png" height="84" src="https://img-blog.csdnimg.cn/0f09e73712d149ff90f0048a096596c6.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/126006585" title="Python函数方法实例详解全集(更新中...)" rel="nofollow">Python函数方法实例详解全集(更新中...)</a></p> </td> 
  </tr> 
  <tr> 
   <td>9</td> 
   <td><img alt="93d65dbd09604c4a8ed2c01df0eebc38.png" height="84" src="https://img-blog.csdnimg.cn/93d65dbd09604c4a8ed2c01df0eebc38.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/125986622" title="matplotlib 自带绘图样式效果展示速查（28种，全）" rel="nofollow">matplotlib 自带绘图样式效果展示速查（28种，全）</a></p> </td> 
  </tr> 
  <tr> 
   <td>8</td> 
   <td><img alt="aa17177aec9b4e5eb19b5d9675302de8.png" height="84" src="https://img-blog.csdnimg.cn/aa17177aec9b4e5eb19b5d9675302de8.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/125776190" title="手机屏幕坏了____怎么把里面的资料导出（18种方法）" rel="nofollow">手机屏幕坏了____怎么把里面的资料导出（18种方法）</a></p> </td> 
  </tr> 
  <tr> 
   <td>7</td> 
   <td><img alt="1750390dd9da4b39938a23ab447c6fb6.jpeg" height="84" src="https://img-blog.csdnimg.cn/1750390dd9da4b39938a23ab447c6fb6.jpeg" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/125532836" title="2023年3月TIOBE 指数头条：编程语言 Go 进入 TIOBE 指数前 10 名，多家权威机构____编程语言排行榜__薪酬状" rel="nofollow">2023年3月TIOBE 指数头条：编程语言 Go 进入 TIOBE 指数前 10 名，多家权威机构____编程语言排行榜__薪酬状</a></p> </td> 
  </tr> 
  <tr> 
   <td>6</td> 
   <td><img alt="dc8796ddccbf4aec98ac5d3e09001348.jpeg" height="103" src="https://img-blog.csdnimg.cn/dc8796ddccbf4aec98ac5d3e09001348.jpeg" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/125403845" title="Python中Print()函数的用法___实例详解(全，例多）" rel="nofollow">Python中Print()函数的用法___实例详解(全，例多）</a></p> </td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td><img alt="1ab685d264ed4ae5b510dc7fbd0d1e55.jpeg" height="103" src="https://img-blog.csdnimg.cn/1ab685d264ed4ae5b510dc7fbd0d1e55.jpeg" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/125289540" title="色彩颜色对照表（一）(16进制、RGB、CMYK、HSV、中英文名)" rel="nofollow">色彩颜色对照表（一）(16进制、RGB、CMYK、HSV、中英文名)</a></p> </td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td><img alt="80007dbf51944725bf9cf4cfc75c5a13.png" height="84" src="https://img-blog.csdnimg.cn/80007dbf51944725bf9cf4cfc75c5a13.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/124966437" title="Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）" rel="nofollow">Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）</a></p> </td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td><img alt="c6374d75c29942f2aa577ce9c5c2e12b.png" height="103" src="https://img-blog.csdnimg.cn/c6374d75c29942f2aa577ce9c5c2e12b.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/124893550" title="Tomcat 启动闪退问题解决集（八大类详细）" rel="nofollow">Tomcat 启动闪退问题解决集（八大类详细）</a></p> </td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td><img alt="5218ac5338014f389c21bdf1bfa1c599.png" height="103" src="https://img-blog.csdnimg.cn/5218ac5338014f389c21bdf1bfa1c599.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/124893517" title="Tomcat端口配置（详细）" rel="nofollow">Tomcat端口配置（详细）</a></p> </td> 
  </tr> 
  <tr> 
   <td>1</td> 
   <td><img alt="fffa2098008b4dc68c00a172f67c538d.png" height="103" src="https://img-blog.csdnimg.cn/fffa2098008b4dc68c00a172f67c538d.png" width="150"></td> 
   <td> <p><a href="https://blog.csdn.net/weixin_69553582/article/details/124845408" title="tomcat11、tomcat10 安装配置（Windows环境）（详细图文）" rel="nofollow">tomcat11、tomcat10 安装配置（Windows环境）（详细图文）</a></p> </td> 
  </tr> 
 </tbody> 
</table>

[5473d9dad6454e0d8a4cdbd7690a88c6.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/536762a08c144071872f2061881ea1b5.png
[2271c5801deb4330aed8c66e968456d1.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/0ac6765894e744fe9db9d0b58a3bd010.png
[b55a7b0182ec4206b7fca370cf1b47a0.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/2bb7a1f29dca4ccdba3584980252dd85.png
[34878ebcf8d94f60a02325a40bb7ffe4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/56a54853e5d040ee9d5e020dc38088f6.png
[Vue3_https_blog.csdn.net_weixin_69553582_article_details_129584587]: https://blog.csdn.net/weixin_69553582/article/details/129584587
[c82d93873bf24570ae1c33e74efb9458.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/7d7900074f67420c9290c2794ae30f04.png
[cec030f8944d4c03ba5cdb9d9f39db80.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/3028f47c5a204ac99d0ce889f4b7f980.png
[1bf7df64626844a8a3c3687f0c66a443.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/24badd10380c41a1b582cb56d99efa61.png
[3bc3476dadca4d42b371647f7dc749c4.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/2bbe100061354e55bbe21a6e6e6f40eb.png
[http_localhost_5173_]: http://localhost:5173/
[d4bc741df6b0482193a6cf4e3fb95ef3.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/a95ade95969e4170a0e310c50ff0b36e.png
[58420925b6894743ad3c0d7e31e76233.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/c121e60e55684aaa88c6b5b6a0bac240.png
[f3f41e3e90c54ba18892e9367fb6f2f3.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/16428a9acef44a72bca2398c2a1a0024.png
[1b19557516eb4f7dbe0fcaf0b60d9445.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/17a7f112c40f40bba295882a8c6b51fc.png
[1891318fdf5045e5b7f41f6dd3cffb5b.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/0e3260ef2af8447facd7851488c86498.png
[3422fdc33d594d83b8e7567bbf6bca38.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/46c36464840148f299252851dbd997e5.png
[27659467960b4481ad502cd5915ef645.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/9bfa0f806fc2480f854d5b333d9af769.png
[http_localhost_8000_project_select]: http://localhost:8000/project/select
[4b31f3c28e9a43debff59f41dbdd9be5.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/e11ee4a4474542ba86fe170d4b1670fd.png
[906192c2ee1742ee82dda28327750b99.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/0e903d3faa39424fbbbc28bd3e87f9cc.png