12.1.2 快速创建Vue项目 -TypeScript和Vue从入门到精通(四)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(四)

### 12.1.2 快速创建Vue项目

在Vue.js的广阔生态系统中，高效地搭建一个项目框架是开始任何开发旅程的第一步。随着Vue 3的发布以及TypeScript的日益普及，将两者结合使用已成为构建可维护、高性能前端应用的优选方案。本章将引导你通过Vue CLI（Vue的命令行工具）快速创建一个基于Vue 3和TypeScript的项目，让你能够立即投入到实际开发中。

#### 12.1.2.1 准备环境

在开始之前，请确保你的开发环境已经安装了Node.js和npm（或yarn，如果你更喜欢使用它）。Node.js是JavaScript的运行时环境，而npm是Node.js的包管理器，它们将帮助你安装和管理Vue CLI及项目依赖。

- **检查Node.js和npm版本**：
  打开终端或命令提示符，输入以下命令来检查Node.js和npm是否已安装以及它们的版本。Vue CLI通常需要Node.js 8.9或更高版本，npm 5.6.0或更高版本。

```bash
  node -v
  npm -v
  ```

如果未安装或版本过低，请前往[Node.js官网](https://nodejs.org/)下载并安装最新版本。

- **安装Vue CLI**：
  如果你还没有安装Vue CLI，可以通过npm全局安装它。打开终端或命令提示符，执行以下命令：

```bash
  npm install -g @vue/cli
  # 或者，如果你使用yarn
  yarn global add @vue/cli
  ```

安装完成后，你可以通过运行`vue --version`来验证Vue CLI是否正确安装。

#### 12.1.2.2 创建Vue项目

现在，一切准备就绪，我们可以使用Vue CLI来创建一个新的Vue项目了。Vue CLI提供了许多预设选项，包括支持TypeScript、Vue Router、Vuex等，让你能够轻松定制项目结构。

- **创建项目**：
  在终端或命令提示符中，导航到你希望存放Vue项目的文件夹，然后执行以下命令来创建一个新项目。这个命令会启动一个交互式会话，让你选择项目的特性。

```bash
  vue create my-vue-typescript-project
  ```

将`my-vue-typescript-project`替换为你希望的项目名称。

- **选择预设**：
  Vue CLI会询问你是否要手动选择特性（Manually select features），选择是（Y）进入特性选择界面。在这里，你可以勾选以下选项来配置你的项目：
  
  - **Babel**：用于将ES6+代码转换为向后兼容的JavaScript代码。
  - **TypeScript**：选择此选项以在项目中使用TypeScript。
  - **Router**：如果你打算在项目中使用Vue Router进行页面路由管理，请勾选此选项。
  - **Vuex**：如果你的应用需要全局状态管理，可以选择Vuex。
  - **Linter / Formatter**：选择代码风格检查工具和格式化工具，如ESLint，以帮助你保持代码质量。
  
  选择完所需的特性后，Vue CLI会根据你的选择自动配置项目。

- **配置TypeScript**：
  如果你选择了TypeScript，Vue CLI会进一步询问你关于TypeScript配置的问题，如是否使用类风格的组件语法、是否开启装饰器支持等。根据你的项目需求进行选择。

- **项目创建完成**：
  完成以上步骤后，Vue CLI将开始安装项目依赖并生成项目文件。这个过程可能需要一些时间，具体取决于你的网络连接和选择的特性数量。

- **进入项目目录**：
  项目创建完成后，你可以通过以下命令进入项目目录：

```bash
  cd my-vue-typescript-project
  ```

#### 12.1.2.3 运行和测试项目

现在，你的Vue项目已经创建完毕，是时候运行它并查看效果了。

- **启动开发服务器**：
  在项目目录下，运行以下命令来启动一个热重载的开发服务器：

```bash
  npm run serve
  # 或者，如果你使用yarn
  yarn serve
  ```

这个命令会启动一个本地开发服务器，通常监听在`http://localhost:8080/`。打开浏览器访问这个地址，你应该能看到Vue项目的默认页面。

- **查看TypeScript支持**：
  为了验证TypeScript是否已正确集成到项目中，你可以查看`src/components`目录下的组件文件。Vue CLI会默认创建一个或多个`.vue`组件文件，并可能包含`.ts`扩展名的脚本部分（如果你选择了TypeScript）。此外，你还可以在`src`目录下找到`shims-vue.d.ts`和`shims-tsx.d.ts`文件，这些是为Vue和JSX/TSX提供的TypeScript声明文件。

- **修改和测试**：
  现在，你可以开始修改项目中的文件，并实时看到更改在浏览器中的反映。Vue CLI的热重载功能将自动重新编译并刷新浏览器，以显示最新的更改。

#### 12.1.2.4 深入了解项目结构

Vue CLI生成的项目结构通常包含以下关键部分：

- **`node_modules/`**：包含项目的所有依赖包。
- **`public/`**：存放静态资源，如`index.html`文件。
- **`src/`**：项目的源代码目录。
  - **`assets/`**：存放静态资源，如图片、字体等。
  - **`components/`**：存放Vue组件。
  - **`views/`**（如果选择了Vue Router）：存放页面级组件。
  - **`App.vue`**：项目的根组件。
  - **`main.ts`**（或`main.js`，取决于是否选择了TypeScript）：应用的入口文件，用于创建Vue实例。
  - **`router/`**（如果选择了Vue Router）：包含路由配置。
  - **`store/`**（如果选择了Vuex）：包含状态管理配置。
- **`tests/`**（可选）：包含测试文件。
- **`vue.config.js`**（可选）：Vue CLI的配置文件，用于覆盖默认配置。
- **`package.json`**：项目的依赖和脚本配置文件。

#### 12.1.2.5 结论

通过Vue CLI快速创建Vue 3和TypeScript项目，你能够立即开始构建功能丰富、类型安全的前端应用。Vue CLI提供的灵活配置选项和强大的生态系统支持，使得无论是初学者还是经验丰富的开发者都能高效地进行开发。现在，你已经掌握了创建Vue项目的基本步骤，接下来就可以深入探索Vue 3和TypeScript的更多高级特性，以及如何将这些技术应用于实际项目中。

该分类下的相关小册推荐：

VUE组件基础与实战

Vue.js从入门到精通(三)

Vue.js从入门到精通(一)

vuejs组件实例与底层原理精讲

Vue.js从入门到精通(二)

移动端开发指南

Vue3技术解密

TypeScript和Vue从入门到精通(五)

Vue原理与源码解析

Vue面试指南

vue项目构建基础入门与实战

TypeScript和Vue从入门到精通(三)