【测试平台开发】一步步教你vue-cli创建项目学习教程

使用vue-cli创建Vue项目是一个相对简单且高效的过程。以下是一个详细的步骤指南，帮助你通过vue-cli创建Vue项目：

一、安装Node.js和npm

Vue CLI依赖于Node.js环境和npm包管理器。因此，在创建Vue项目之前，你需要确保计算机上已安装Node.js和npm。

访问Node.js官网，下载并安装适合你操作系统的Node.js版本。安装Node.js时，npm会自动安装。
安装完成后，通过命令行工具验证安装是否成功。输入以下命令：
记得添加系统环境变量

node -v npm -v 

这两条命令会分别输出Node.js和npm的版本号，如果显示版本号，则说明安装成功。

二、全局安装Vue CLI

Vue CLI是一个强大的脚手架工具，可以帮助你快速搭建Vue.js项目。你需要通过npm全局安装Vue CLI。
更换npm镜像源：

npm config set registry https://registry.npmmirror.com/ 

验证镜像源配置：

npm config get registry 

打开命令行工具，输入以下命令来全局安装Vue CLI：

npm install -g @vue/cli 

安装完成后，通过命令行工具验证Vue CLI是否安装成功。输入以下命令：

vue --version 

这条命令会输出Vue CLI的版本号，如果显示版本号，则说明安装成功。

三、创建Vue项目

在命令行工具中，进入你想要创建项目的目录，然后输入以下命令来创建一个新的Vue项目：

vue create <project-name> 

其中是你想要创建的项目名称，可以根据需要进行替换。
在创建项目过程中，Vue CLI会提示你选择一种预设配置或者手动配置项目。你可以选择默认预设（适合大多数用户的基本配置），也可以选择手动配置（如果你对项目有特殊需求）。
默认预设：Vue CLI会为你提供几个默认的预设配置，包括Vue 2和Vue 3的基本配置。你可以根据需求选择合适的预设。
手动配置：如果你需要自定义项目配置，可以选择手动配置。在手动配置中，你需要选择需要支持的特性，如Babel、TypeScript、Router、Vuex、CSS预处理器等。此外，你还可以选择Vue版本、是否使用history路由模式、CSS预处理器等选项。
根据提示完成配置后，Vue CLI会自动为你创建项目目录结构，并安装所需的依赖包。

四、进入项目目录并启动开发服务器

项目创建完成后，你需要进入项目目录。输入以下命令：

cd <project-name> 

其中是你创建的项目名称。

进入项目目录后，你可以启动开发服务器来查看项目效果。输入以下命令：

npm run serve 

这条命令会启动一个本地开发服务器，并在浏览器中打开一个新的标签页，显示你的Vue应用程序。你可以在代码中进行修改，并实时查看修改后的效果。

五、项目结构解析

创建一个Vue项目后，了解项目的文件结构和各个文件的作用是很重要的。以下是一个典型的Vue项目结构及其说明：

my-project/ ├── node_modules/ # 存放所有安装的npm包 ├── public/ # 公共资源目录，存放静态文件 │   └── index.html # 应用入口HTML文件 ├── src/ # 源代码目录 │   ├── assets/ # 存放静态资源，如图片、样式等 │   ├── components/ # 存放Vue组件 │   ├── views/ # 存放视图组件 │   ├── App.vue # 根组件 │   ├── main.js # 应用入口文件 │   └── router.js # 路由配置文件 ├── .gitignore # Git忽略文件配置 ├── babel.config.js # Babel配置文件 ├── package.json # 项目配置文件 └── README.md # 项目说明文件 

node_modules/：存放所有安装的npm包，不需要手动修改。
public/：存放静态资源，如HTML文件、图片等，主要用于不需要通过Webpack处理的文件。
src/：存放源代码，是项目开发的主要目录。
assets/：存放静态资源，如图片、样式等。
components/：存放Vue组件，组件是Vue应用的基本构建块。
views/：存放视图组件，通常是与路由关联的组件。
App.vue：根组件，是所有组件的父组件。
main.js：应用入口文件，初始化Vue实例并挂载到DOM。
router.js：路由配置文件，用于配置应用的页面导航。
.gitignore：Git忽略文件配置，用于忽略不需要提交到版本控制的文件。
babel.config.js：Babel配置文件，用于配置JavaScript编译选项。
package.json：项目配置文件，包含项目的基本信息、依赖包和脚本。

六、后续步骤

在创建项目后，你可能需要进行一些配置和优化，以满足特定需求。例如：
安装额外的依赖包：根据项目需求，安装所需的npm包。例如，安装Axios用于HTTP请求，安装Vuex用于状态管理等。
配置环境变量：在项目根目录下创建.env文件，用于存放环境变量。例如，配置API地址、密钥等。

通过以上步骤，你可以成功使用vue-cli创建一个Vue项目，并进行开发