脚手架(vue-cli)创建Vue项目的超详细过程记录

什么是 Vue-cli

Vue-cli 是一个命令行工具，通过它可以快速创建新的 Vue 工程。Vue-cli 其实是一个基于 Node.js 的命令行工具，封装了 Vue.js 相关的项目创建流程，可以帮助我们快速的创建一个 Vue.js 项目。

安装 Vue-cli

在安装 Vue-cli 之前，首先要确保 Node.js 已经安装好了。可以通过在终端里输入node -v来查看 Node.js 是否安装成功。安装完 Node.js 之后，我们就可以通过 Node.js 自带的包管理工具 npm 来安装 Vue-cli 了。

在终端里输入以下命令安装 Vue-cli：

npm install -g @vue/cli

创建 Vue 项目

安装完 Vue-cli 之后，就可以来创建自己的第一个 Vue 项目了。 在终端里输入以下命令：

vue create project-name

其中，project-name是你自己想起的命名，可以直接输入项目名称，然后回车即可。

这个命令会在当前目录下创建一个名为 project-name 的文件夹，并在这个文件夹里生成 Vue 项目的基本结构。

除了使用默认配置创建项目之外，还可以使用自定义配置来创建项目。

vue create -p default project-name

其中 -p default 表示要使用默认配置创建项目，project-name 是你自己的项目名称。

项目的目录结构

使用 Vue-cli 创建 Vue 项目时，会生成默认的目录结构：

├── node_modules
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   ├── components
│   ├── views
│   ├── App.vue
│   └── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── package-lock.json

其中，各个文件夹的作用如下：

• node_modules：存放项目依赖模块的文件夹。
• public：存放静态文件的文件夹，其中 index.html 是项目的入口文件。
• src：存放项目源码的文件夹。
• assets：存放静态资源文件，比如图片、字体等。
• components：存放组件文件夹。
• views：存放页面文件夹。
• App.vue：项目的根组件。
• main.js：项目的入口文件，初始化 Vue 实例并挂载根组件。
• .gitignore：git 忽略文件，用来管理 git 版本控制。
• babel.config.js：babel 配置文件。
• package.json：存放项目的基本信息和依赖列表的文件。
• README.md：项目的说明文件。
• package-lock.json：npm 安装依赖时生成的锁定文件。

示例说明

示例1：使用默认配置创建项目

1. 在终端里输入以下命令，安装 Vue-cli：

npm install -g @vue/cli

1. 创建项目：

vue create my-project

1. 选择默认的配置，回车即可。

2. 等待一段时间（时间会根据用户的联网速度而有所不同），创建完成后可以打开 my-project 文件夹，使用代码编辑器（比如 VS Code）来打开，进入项目所在的终端窗口，输入以下命令，启动项目：

npm run serve

1. 在浏览器中打开http://localhost:8080/，就可以看到 Vue 默认的欢迎页面了。

示例2：使用自定义配置创建项目

1. 在终端里输入以下命令，安装 Vue-cli：

npm install -g @vue/cli

1. 创建项目：

vue create -p default my-project

1. 根据需要选择 Vue 3.0 版本或者使用 Babel 转译器。

2. 选择需要的特性，可以参考Vue 3.0 官方文档。

3. 如果需要，选择需要安装的插件，可以手动选取或全部使用默认。

4. 选择自定义的 CSS 预处理器。

5. 是否选择使用单元测试，选择 No。

6. 是否选择使用 E2E 测试，选择 No。

7. 是否将配置写入 package.json，选择 Yes。

8. 等待一段时间（时间会根据用户的联网速度而有所不同），创建完成后可以打开 my-project 文件夹，使用代码编辑器（比如 VS Code）来打开，进入项目所在的终端窗口，输入以下命令，启动项目：

npm run serve

1. 在浏览器中打开http://localhost:8080/，就可以看到 Vue 默认的欢迎页面了。

结论

Vue-cli 是一个非常方便的工具，通过它可以帮助我们快速创建一个 Vue 项目，并可以根据需要使用不同的配置来创建项目。总之，Vue-cli 的出现可以极大的提高我们的开发效率。