如何创建一个vue项目——零基础也可以学会

目录

1.第一步：安装软件

2.第二部：创建一个vue3项目

2.1手动命令创建vue3项目

2.2通过命令模版创建vue3项目

2.3通过软件创建vue3项目

2.4生成的vue3目录

---

1.第一步：安装软件

工欲善其事，必先利其器，在制作vue前端可视大屏之前，先要在电脑上安装一些前端制作软件（制作前段的软件有很多，这里以我使用的为准）

如何安装node.js-CSDN博客

Node，主要的作用是环境的搭建和包的安装，是一个前段比较基础的工具，注意版本，不同的版本对应的安装包不同，一定要看清安装的版本

如何安装Visual Studio Code-CSDN博客

Visual Studio Code史上最强前端编辑器，是一个工具平台，上面集成了多种开发工具。

Download WebStorm: The JavaScript and TypeScript IDE by JetBrains

WebStorm和PyCham、IntelliJ IDEA是JetBrains旗下的产品，一个系列的软件，WebStrom比较适合前段页面的开发和应用。

Mysql数据库

在安装mysql数据库和对应的可视化工具Navicat。

如何在window是安装mysql数据库（从零开始）_windows 安装mysql-CSDN博客

mysql（数据库）可视化工具——Navicat Premium-CSDN博客

在按照上面的方法，将所有软件安装成功之后，前期的准备工作就完成了，可以开始创建和编辑vue项目了

2.第二部：创建一个vue3项目

这里要先说一下，vue目前（2025.2.9写这篇文章的时间）主要有3个大版本，vue1，vue2，vue3，由于vue是尤慈溪于2019年开始创建，版本迭代较快，vue2和vue3，用得都比较多，这里主要讲解vue3。

2.1手动命令创建vue3项目

打开命令框，搜索cmd，点击命令提示框

选择对应的目录（这里以我的目录为例：C:\Users\zjl15>）

命令：

#使用npm create命令创建项目
npm create vite@latest
#使用yarn create命令创建项目
yarn create vite
#命令二其一
#1.
#使用npm create命令创建项目
npm create vite@latest
#编辑项名

#选择vue项目，选择JavaScript组件

在对应目录下打开文件

cd  vite-project
#安装对应组件
npm install
#命令运行
npm run dev
#点击对应页面

#2

yarn create vite

#编辑项名

#选择vue项目，选择JavaScript组件

#在对应目录下打开文件

cd  vite-project1

yarn

yarn dev

#点击网页

2.2通过命令模版创建vue3项目

#使用npm 6 或者更低版本创建项目

npm create vite@latest  <项目名>  --temple <模版名称>

#使用 npm 7 或者更高版本创建项目

npm create vite@latest  <项目名> -- --temple <模版名称>

#使用yarn create 命令创建项目

yarn create vite <项目名> --temple <模版名称>



yarn create vite hello-vite1  --temple vue

cd hello-vite

yarn

yarn dev

2.3通过软件创建vue3项目

打开桌面WebStorm软件，点击创建项目（New Project）

选择vue.js，选择对应的文件位置目录，和对应的环境，点击创建（create）

等待加载，完成之后出现如下界面

打开命令行（Terminal），输入对应安装命令npm install

安装完成之后，点击运行

点击网页，打开对应页面

2.4生成的vue3目录

上面生成的目录可能并不完整，项目是比较完整目录，根据自己的项目修改

public/: 存放静态资源，这些资源不会被 webpack 处理，直接复制到构建输出目录。

src/: 项目的源代码目录，包含所有的 Vue 组件、样式、工具函数等。

assets/: 存放静态资源，如图片、字体等，这些资源会被 webpack 处理。

components/: 存放公共组件，这些组件可以在多个页面中复用。

views/: 存放页面组件，通常与路由配置对应。

router/: 存放路由配置文件，定义项目的路由规则。

store/: 存放 Vuex 状态管理相关的文件。

styles/: 存放全局样式文件。

App.vue: 项目的根组件，所有页面组件都会在这里被渲染。

main.js: 项目的入口文件，初始化 Vue 实例并挂载到 DOM。

utils/: 存放工具函数，如 API 请求封装、通用函数等

.env: 环境变量配置文件，用于配置不同环境下的变量。

.gitignore: Git 忽略文件配置，指定哪些文件或目录不被 Git 跟踪。

babel.config.js: Babel 配置文件，用于配置 JavaScript 的编译规则。

package.json: 项目的依赖和脚本配置，包含项目的依赖包、启动命令、构建命令等

README.md: 项目的说明文件，通常包含项目的介绍、安装步骤、使用说明等。

vue.config.js: Vue CLI 的配置文件，用于自定义 webpack 配置、代理设置等。

其他可能的目录

tests/: 存放测试文件，如单元测试、端到端测试等。

plugins/: 存放 Vue 插件，如自定义指令、全局组件等。

services/: 存放与后端 API 交互的服务层代码。

directives/: 存放自定义指令。

这个目录结构是一个常见的 Vue 3 项目结构，具体项目可能会根据需求进行调整。

到这里，你已经学会如何创建一个vue3项目了！！