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或更高版本。
```
node -v
npm -v
```
如果未安装或版本过低，请前往Node.js官网下载并安装最新版本。
安装Vue CLI：
如果你还没有安装Vue CLI，可以通过npm全局安装它。打开终端或命令提示符，执行以下命令：
```
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项目的文件夹，然后执行以下命令来创建一个新项目。这个命令会启动一个交互式会话，让你选择项目的特性。
```
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将开始安装项目依赖并生成项目文件。这个过程可能需要一些时间，具体取决于你的网络连接和选择的特性数量。
进入项目目录：
项目创建完成后，你可以通过以下命令进入项目目录：
```
cd my-vue-typescript-project
```

12.1.2.3 运行和测试项目

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

启动开发服务器：
在项目目录下，运行以下命令来启动一个热重载的开发服务器：
```
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的更多高级特性，以及如何将这些技术应用于实际项目中。