创建基于Webpack的Vue.js项目

旧城等待， 2024-03-25 20:38 57阅读 0赞

## 创建基于Webpack的Vue.js项目 ##

**本文目录：**

一、Webpack简介

二、创建基于Webpack的Vue.js项目

1、前提条件

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

（2）、升级你的 Node 版本

2、安装Webpack、Vue.js

（1）、安装Webpack

（2）、安装Vue.js

3、创建基于Webpack的Vue.js项目

三、Webpack下的Vue.js项目文件结构

四、打开Vue项目管理器

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

## 一、Webpack简介 ##

Webpack是一个打包工具，可以把JS、CSS、Node Module、Coffeescrip、SCSS/LESS、图片等都打包在一起，因此，现在几乎所有的SPA项目、JS项目都会用到Webpack。

![7929f203c0f146a4979a70d3892360c6.jpeg][]

其官方网站为：https://webpack.js.org/，  
GitHub为https://github.com/webpack/ webpack。

Webpack的功能非常强大，对各种技术都提供了支持，仿佛是一个“万能胶水”，把所有的技术都黏合（集成）到了一起。

## 二、创建基于Webpack的Vue.js项目 ##

Webpack+Vue.js的方式来做项目的，这样才可以做到“视图”“路由”“component”等的分离，以及快速打包、部署及项目上线。

### 1、前提条件 ###

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

#### （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安装配置、开发环境搭建(组件安装卸载)（图文详细）![icon-default.png_t_N176][]https://blog.csdn.net/weixin\_69553582/article/details/129584587][Vue3_icon-default.png_t_N176_https_blog.csdn.net_weixin_69553582_article_details_129584587]

### 2、安装Webpack、Vue.js ###

npm install表示安装某个node package（包）

\-g表示这个包安装后可以被全局使用

当确定安装好 node.js 后，重新打开 cmd 命令窗口输入：

#### （1）、安装Webpack ####

> **Webpack的安装命令如下：**
> 
>  *  npm install --save-dev webpack
>  *  或
>  *  npm install webpack -g

![5d4a8a4278204c98bc47750b8155b149.jpeg][]

> 查看webpack的版本
> 
>  *  npm webpack -v

![516a1a157b644cdb9652b3009c976ef1.jpeg][]

#### （2）、安装Vue.js ####

需要同时安装Vue和vue-cli这两个Node package。

> 运行下面的命令：
> 
>  *  npm install vue -g （或：cnpm install vue -g）
>  *  npm install @vue/cli –g
>  *  或
>  *  npm install -g @vue/cli@版本号 vue@版本号

![f3362889d7a046ccbac36217409b777c.png][]

或：

![7418d152ccb944e4aa61b7dd7cd99b37.jpeg][]

### 验证vue安装 ###

> 验证安装是否成功
> 
>  *  npm list vue
>  *  npm list vue -g

运行后，如果看到下面的消息，就说明安装成功：

![75f9b79c155d4171b89d880b4f19c9c1.jpeg][]

![32464cc9b87a4694895d881f54bf07e0.jpeg][]

###    3、创建基于Webpack的Vue.js项目 ###

创建基于Webpack的Vue.js项目，**最好在cd进入到某盘的某个位置，即项目的路径**，否则项目会新建在C:\\Users\\Administrator\\，也可以直接在想要的项目路径下输入cmd。

例如我在C:\\00program\\vue\\vuelearn，建立项目名：vue3webpack

> 我们运行以下命令：
> 
>  *  vue create vue3webpack  (将vue3webpack替换成你的项目名)

之后，会进入到交互模式：

Vue CLI v5.0.8
    ? Please pick a preset: (Use arrow keys)
    > Default ([Vue 3] babel, eslint)
      Default ([Vue 2] babel, eslint)
      Manually select features

Vue CLI v5.0.8

*  Please pick a preset: (Use arrow keys)\------》请选择预设：（使用箭头键）
 *  Default (\[Vue 2\] babel, eslint)\------》默认 （\[Vue 2\] babel， eslint）
 *  Default (Vue 3) (\[Vue 3\] babel, eslint)\------》默认 （Vue 3） （\[Vue 3\] babel， eslint）
 *  > Manually select features\------》> 手动选择功能

![ce9b597149b146bea445f230cbdfc276.jpeg][]

我们选择最下面的Manually select features，然后按回车键，会出现选项，然后选择本项目中需要的特性，如下：

Vue CLI v5.0.8
 ? Please pick a preset: Manually select features
 ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, to invert selection, and
 <enter> to proceed)
 >(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

Vue CLI v5.0.8

Please pick a preset: Manually select features------》请选择一个预设：手动选择功能

Check the features needed for your project:(Press <space> to select, <a> to toggle all, to invert selection, and<enter> to proceed)------》检查项目所需的功能：（按下<space>可选择、 <a> 切换全部、 反转选择和<enter> 继续）

*  (\*) Babel\------》 Babel
 *  (\*) TypeScript\------》支持TypeScript
 *  ( ) Progressive Web App (PWA) Support\------》渐进式 Web 应用程序 （PWA） 支持
 *  (\*) Router \------》路由器
 *  (\*) Vuex\------》Vuex
 *  ( ) CSS Pre-processors \------》CSS 预处理器
 *  ( ) Linter / Formatter \------》Linter/格式化程序
 *  (\*) Unit Testing\------》单元测试
 *  ( ) E2E Testing\------》E2E 测试

根据上面的提示，我们在第一个(Babel)，第二个（TypeScript），第四个(Router)，第五个(Vuex)和第八个(Unit Testing)前面按空格键，表示选中，然后按回车键。接下来会出现版本选择，如下：

![f52023a1d69f48f3aa1e12b3f2629bc3.jpeg][]

Choose a version of Vue.js that you want to start the project with\------》选择一个 Vue.js 版本，你想用它来启动项目

*  > 3.x
 *  2.x

选择3.x之后，按回车键，出现下面的提示：

Use class-style component syntax? (y/N)\------》使用类样式的组件语法？（是/否）

我们直接按回车键，表示选择默认的 No

出现下面的提示：

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)\------》将 Babel 与 TypeScript 一起使用（modern 模式、自动检测的 polyfill、转译 JSX 需要）？（是/否）

我们直接按回车键，表示选择默认的 Yes

出现下面的提示：

Vue CLI v5.0.8
    ? Please pick a preset: Manually select features
    ? Check the features needed for your project: Babel, TS, Router, Vuex, Linter, Unit
    ? Choose a version of Vue.js that you want to start the project with 3.x
    ? Use class-style component syntax? No
    ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
    ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

\------》询问我们是否对路由使用history模式（是/否）

我们直接按回车键，表示选择默认的Yes，

接下来会看到下面的提示，

Pick a linter / formatter config: (Use arrow keys)
    > ESLint with error prevention only
      ESLint + Airbnb config
      ESLint + Standard config
      ESLint + Prettier

? Pick a linter / formatter config: (Use arrow keys)\------》选择一个 linter /格式化程序配置：（使用箭头键）  
> ESLint with error prevention only\------》仅具有错误预防功能的 ESLint  
ESLint + Airbnb config\------》ESLint + Airbnb配置  
ESLint + Standard config\------》ESLint + 标准配置  
ESLint + Prettier\------》ESLint + Prettier

我们在原来的位置上直接按回车键，表示选择默认的 Basic，

回车后会让你选择增加lint的特性功能。（按下<space>可选择、 <a> 切换全部、 反转选择和<enter>继续）

? Pick additional lint features: (Press <space> to select, <a> to toggle all, to invert selection, and <enter> to
 proceed)
 >(*) Lint on save
 ( ) Lint and fix on commit

我们在原来的位置上直接按回车键，表示选择默认的 Lint on save，

接下来会看到下面的提示，

? Pick a unit testing solution: (Use arrow keys)
    > Jest
      Mocha + Chai

让我们选择单元测试框架，如下：

Pick a unit testing solution:\------》选择一个单元测试解决方案：

*  Jest
 *  Mocha + Chai

这里选择Jest即可。

接下来会看到下面的提示，

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
    > In dedicated config files
      In package.json

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)\------》你更喜欢在哪里放置 Babel、ESLint 等的配置？（使用箭头键）

*  In dedicated config files \------》每项配置有单独的文件
 *  In package.json\------》在package.json 文件中

选择这些配置文件时单独存放，还是直接存放在package.json文件里。

这里选择放在单独的文件里（In dedicated config files）。

Save this as a preset for future projects? (y/N)

Save this as a preset for future projects? (y/N)\------》将其保存为未来项目的预设？（是/否）

这时按回车键默认No。（也可以选择保存，以方便下次使用）

至此，输入的条件结束，vue-cli会开始创建新项目的工作，在控制台上会打印如下内容：

![1c02d9b8b7b64f85b3e4844e618fc684.jpeg][]

至此，一个基于Vue3+Webpack，并且带有单元测试功能的项目就创建好了。

我们进入到该项目中，使其在本地以默认端口来运行：

>  *  cd vue3webpack
>  *  npm run serve

![8ad8290d6d22415892b70a811de48a8b.jpeg][]

然后就可以看到在本地已经运行起来了：

DONE  Compiled successfully in 3428ms                                                                          01:26:27
    
    
      App running at:
      - Local:   http://localhost:8080/
      - Network: http://192.168.1.5:8080/
    
      Note that the development build is not optimized.
      To create a production build, run npm run build.
    
    No issues found.

App running at:\------》应用运行位置：

\- Local: http://localhost:8080/\------》- 本地： http://localhost:8080/

\- Network: http://192.168.1.5:8080/\-----》- 网络：http://192.168.1.5:8080/

Note that the development build is not optimized.\------》请注意，开发版本未优化。

To create a production build, run npm run build.\------》若要创建生产版本，请运行 npm 运行生成。

No issues found.\------》未发现问题。

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

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

![0f33a786c6a2498f890d5b78a7756034.jpeg][]

项目欢迎页面

## 三、Webpack下的Vue.js项目文件结构 ##

前面我们已经安装了Webpack、vue-cli并运行成功，看到了Vue.js的第一个页面。那么接下来我们对Webpack下的Vue.js有一个全面的了解。

我们进入Vue.js项目所在的vue3webpack目录，它的文件结构如下：

![b1ade324babc432f84148ec5e47abe8f.jpeg][]

下面将针对重要的文件和文件夹依次进行说明。

打包之后的文件所在目录如下：  
vue3webpack项目（基于Webpack的Vue.js项目）│  
│  
├── .git 目录 .gitignore Git上传时，需要忽略的文件。  
│　　　├──　v  
│　　　├──　v  
│　　　└──　v  
│  
├── node\_modules 目录 （vue 项目的文件依赖存放在这个文件夹。）  
│　　　├──　所有在package.json中定义的第三方包都会被自动下载，保存在该文件夹下。  
│　　　├──　v  
│　　　└──　v  
│  
│  
├── public 目录：存放项目公共资源。如网站LOGO等，项目的主入口文件index.html。  
│ │ 通常我们不需要对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  
│  
│  
├── tests 目录 ：单元测试  
│　　　├──　v  
│　　　├──　v  
│　　　└──　v  
│  
├── package.json 存放项目的依赖配置（比如 vuex，element-UI）  
├── babel.config.js babel 转码器的配置文件。  
├── vue.config.js vue 的配置文件。  
├── yarn.lock 用来构建依赖关系树。  
├──  
└──

*  node\_modules文件夹，文件夹中往往会有几百个文件夹，Node项目所用到的第三方包特别多，也特别大。这些文件是由$ npm install命令产生的。所有在package.json中定义的第三方包都会被自动下载，保存在该文件夹下。
 *  src文件夹是核心源代码的所在目录，展开后如下所示（不同版本的vue-cli生成的目录会稍有不同，不过核心都是一样的），正常开发的时候一般只修改 src 文件夹下的文件。
 *  index.html：如果是一级页面模板的话，App.vue就是二级页面模板。所有的其他Vue.js页面都作为该模板的一部分被渲染出来。
 *  main.js：没有实际的业务逻辑，而是为了支撑整个Vue.js框架，作为程序的入口存在。
 *  dist —— 项目构建打包后的默认输出目录。

>   
> 本例中，package.json文件的内容如下：
> 
> \{  
> "name": "vue3webpack",  
> "version": "0.1.0",  
> "private": true,  
> "scripts": \{  
> "serve": "vue-cli-service serve",  
> "build": "vue-cli-service build",  
> "test:unit": "vue-cli-service test:unit",  
> "lint": "vue-cli-service lint"  
> \},  
> "dependencies": \{  
> "core-js": "^3.8.3",  
> "vue": "^3.2.13",  
> "vue-router": "^4.0.3",  
> "vuex": "^4.0.0"  
> \},  
> "devDependencies": \{  
> "@types/jest": "^27.0.1",  
> "@typescript-eslint/eslint-plugin": "^5.4.0",  
> "@typescript-eslint/parser": "^5.4.0",  
> "@vue/cli-plugin-babel": "~5.0.0",  
> "@vue/cli-plugin-eslint": "~5.0.0",  
> "@vue/cli-plugin-router": "~5.0.0",  
> "@vue/cli-plugin-typescript": "~5.0.0",  
> "@vue/cli-plugin-unit-jest": "~5.0.0",  
> "@vue/cli-plugin-vuex": "~5.0.0",  
> "@vue/cli-service": "~5.0.0",  
> "@vue/eslint-config-typescript": "^9.1.0",  
> "@vue/test-utils": "^2.0.0-0",  
> "@vue/vue3-jest": "^27.0.0-alpha.1",  
> "babel-jest": "^27.0.6",  
> "eslint": "^7.32.0",  
> "eslint-plugin-vue": "^8.0.3",  
> "jest": "^27.0.5",  
> "ts-jest": "^27.0.4",  
> "typescript": "~4.5.5"  
> \}  
> \}

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

vue有个本地图形化管理器，基于vue/cli-ui。

vue/cli-ui 是 vue-cli 内置的一套成熟的 UI。

Vue-cli 的 3.x 版本由内到外完全重写，带来了许多新特性。你可以在你的项目中选用路由、Vuex 和 Typescript 等等特性，并为项目添加“vue-cli 插件”。不过，这么多的选项也意味着它更加复杂，难以上手。相比局限的命令行界面，一个成熟的 GUI 更能帮助你发掘这些新特性，搜索和安装 vue-cli 插件，解锁更多可能。

使用方式如下：

(1) 第一步、创建 Vue 项目所在文件夹  
(2) 第二步、同时按window+R键,输入cmd，打开命令提示符窗口，进入 Vue 项目所在目录  
(3) 第三步、输入 vue ui 命令打开Vue 项目管理器

>  *  输入：vue ui

![41dce1e3457045b8bcae4516868bb1d7.jpeg][]

系统会自动打开 本地Vue 项目管理器的页面：[http://localhost:8000/project/select][http_localhost_8000_project_select]

![d234bfa0e8cf41de9a010d994c93c327.jpeg][]

在这里，可以创建、导入、管理vue项目。

<table> 
 <tbody> 
 <tr> 
 <td> <img alt="" src="https://img-blog.csdnimg.cn/61da98f39b35462eabfdad9f32f99766.png"> </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> <img alt="" src="https://img-blog.csdnimg.cn/54caced843084f68b42ec9a8ef068934.png"> </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> <img alt="" height="84" src="https://img-blog.csdnimg.cn/c0f74fbb8d534b17964693dba9e1494f.png" width="150"> </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> <a href="https://blog.csdn.net/weixin_69553582/article/details/129233327" title="SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例）" rel="nofollow">SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例）</a> </td> 
 </tr> 
 <tr> 
 <td>28</td> 
 <td><img alt="" height="84" src="https://img-blog.csdnimg.cn/6824ba7870344be68efb5c5f4e1dbbcf.png" width="150"></td> 
 <td> <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> </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> <a href="https://blog.csdn.net/weixin_69553582/article/details/128999468" title="别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(1)" rel="nofollow">别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(1)</a> </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> <a href="https://blog.csdn.net/weixin_69553582/article/details/128699908" title="2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特" rel="nofollow">2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特</a> </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> <a href="https://blog.csdn.net/weixin_69553582/article/details/128581968" title="2023春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）" rel="nofollow">2023春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）</a> </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> <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> </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> <a href="https://blog.csdn.net/weixin_69553582/article/details/128368639" title="草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码" rel="nofollow">草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码</a> </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> <a href="https://blog.csdn.net/weixin_69553582/article/details/128296176" title="【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）" rel="nofollow">【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）</a> </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> <a href="https://blog.csdn.net/weixin_69553582/article/details/127941542" title="python爱心源代码集锦（18款）" rel="nofollow">python爱心源代码集锦（18款）</a> </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> <a href="https://blog.csdn.net/weixin_69553582/article/details/128141522" title="巴斯光年python turtle绘图__附源代码" rel="nofollow">巴斯光年python turtle绘图__附源代码</a> </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> <a href="https://blog.csdn.net/weixin_69553582/article/details/128015962" title="Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）" rel="nofollow">Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）</a> </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> <a href="https://blog.csdn.net/weixin_69553582/article/details/127799077" title="草莓熊python turtle绘图代码（玫瑰花版）附源代码" rel="nofollow">草莓熊python turtle绘图代码（玫瑰花版）附源代码</a> </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> <a href="https://blog.csdn.net/weixin_69553582/article/details/127799004" title="立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦" rel="nofollow">立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦</a> </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> <a href="https://blog.csdn.net/weixin_69553582/article/details/127505979" title="皮卡丘python turtle海龟绘图（电力球版）附源代码" rel="nofollow">皮卡丘python turtle海龟绘图（电力球版）附源代码</a> </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> <a href="https://blog.csdn.net/weixin_69553582/article/details/127582251" title="【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)" rel="nofollow">【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)</a> </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> <a href="https://blog.csdn.net/weixin_69553582/article/details/127131591" title="草莓熊python turtle绘图（风车版）附源代码" rel="nofollow">草莓熊python turtle绘图（风车版）附源代码</a> </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> <a href="https://blog.csdn.net/weixin_69553582/article/details/126624379" title="用代码过中秋，python海龟月饼你要不要尝一口？" rel="nofollow">用代码过中秋，python海龟月饼你要不要尝一口？</a> </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> <a href="https://blog.csdn.net/weixin_69553582/article/details/126365799" title="《 Python List 列表全实例详解系列（一）》__系列总目录、列表概念" rel="nofollow">《 Python List 列表全实例详解系列（一）》__系列总目录、列表概念</a> </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> <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> </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> <a href="https://blog.csdn.net/weixin_69553582/article/details/126006585" title="Python函数方法实例详解全集(更新中...)" rel="nofollow">Python函数方法实例详解全集(更新中...)</a> </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> <a href="https://blog.csdn.net/weixin_69553582/article/details/125986622" title="matplotlib 自带绘图样式效果展示速查（28种，全）" rel="nofollow">matplotlib 自带绘图样式效果展示速查（28种，全）</a> </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> <a href="https://blog.csdn.net/weixin_69553582/article/details/125776190" title="手机屏幕坏了____怎么把里面的资料导出（18种方法）" rel="nofollow">手机屏幕坏了____怎么把里面的资料导出（18种方法）</a> </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> <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> </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> <a href="https://blog.csdn.net/weixin_69553582/article/details/125403845" title="Python中Print()函数的用法___实例详解(全，例多）" rel="nofollow">Python中Print()函数的用法___实例详解(全，例多）</a> </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> <a href="https://blog.csdn.net/weixin_69553582/article/details/125289540" title="色彩颜色对照表（一）(16进制、RGB、CMYK、HSV、中英文名)" rel="nofollow">色彩颜色对照表（一）(16进制、RGB、CMYK、HSV、中英文名)</a> </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> <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> </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> <a href="https://blog.csdn.net/weixin_69553582/article/details/124893550" title="Tomcat 启动闪退问题解决集（八大类详细）" rel="nofollow">Tomcat 启动闪退问题解决集（八大类详细）</a> </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> <a href="https://blog.csdn.net/weixin_69553582/article/details/124893517" title="Tomcat端口配置（详细）" rel="nofollow">Tomcat端口配置（详细）</a> </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> <a href="https://blog.csdn.net/weixin_69553582/article/details/124845408" title="tomcat11、tomcat10 安装配置（Windows环境）（详细图文）" rel="nofollow">tomcat11、tomcat10 安装配置（Windows环境）（详细图文）</a> </td> 
 </tr> 
 </tbody> 
</table>

[7929f203c0f146a4979a70d3892360c6.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/9edbe18564e24bb7ae7c4d5da9f9793f.png
[5473d9dad6454e0d8a4cdbd7690a88c6.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/eca32e66de3f45f198746abd77eebcd9.png
[2271c5801deb4330aed8c66e968456d1.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/88398e8095c3405fa878aeb0c27235dc.png
[b55a7b0182ec4206b7fca370cf1b47a0.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/e49caa0f995b44d78180ceb32931487f.png
[34878ebcf8d94f60a02325a40bb7ffe4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/a321c3b00fc84c4eb55053f3562f9cc0.png
[icon-default.png_t_N176]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/f06e2d46faff4980a3442151d5eb7466.png
[Vue3_icon-default.png_t_N176_https_blog.csdn.net_weixin_69553582_article_details_129584587]: https://blog.csdn.net/weixin_69553582/article/details/129584587
[5d4a8a4278204c98bc47750b8155b149.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/1f280c3a3b9b414c8751d745dd0eef56.png
[516a1a157b644cdb9652b3009c976ef1.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/f6db59de8a5b4d428497252bb6eba865.png
[f3362889d7a046ccbac36217409b777c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/a5e217ee44e24d75816cb3cc7c89b18e.png
[7418d152ccb944e4aa61b7dd7cd99b37.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/3d222dc8d42d4795aeb05efe2a68b7b1.png
[75f9b79c155d4171b89d880b4f19c9c1.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/592128516e3c418ab9b348fcaa936694.png
[32464cc9b87a4694895d881f54bf07e0.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/987a39667241404db6db2a99f0e8f494.png
[ce9b597149b146bea445f230cbdfc276.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/e6ccfc8478c0413294b503a0834803f4.png
[f52023a1d69f48f3aa1e12b3f2629bc3.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/c11ff511d51b46c7bdc139654e906047.png
[1c02d9b8b7b64f85b3e4844e618fc684.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/f27f8613085d407aa4770ea75ddb716a.png
[8ad8290d6d22415892b70a811de48a8b.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/2511b64abdca44a5ab7c9a68bee32434.png
[0f33a786c6a2498f890d5b78a7756034.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/e4dd3376edc64dc2ad0172c31bc8affd.png
[b1ade324babc432f84148ec5e47abe8f.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/cf2f527710824f77996f02bd4fe7209e.png
[41dce1e3457045b8bcae4516868bb1d7.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/e9f0cd6946e1492685ceca086571e001.png
[http_localhost_8000_project_select]: http://localhost:8000/project/select
[d234bfa0e8cf41de9a010d994c93c327.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/553669f75d104325944312acb8b8aff5.png