1.3.1 运行环境搭建

那么Vue3的运行环境搭建主要包括几种方式呢？其包括两种方式，分别是页面直接引入Vue库和通过脚手架创建Vue项目。

1.页面直接引入Vue库

页面直接引入Vue库是指在HTML网页中借助script标签直接通过CDN（Content Delivery Network，内容分发网络）或者本地来引入并使用Vue，这种方式并不涉及“构建步骤”，不过可以让用户以简洁的代码模式，快速了解Vue3的一些核心语法。

这里介绍BootCDN，读者可自行查找其官方网站，首页如图1-2所示。

新建一个start.html文件，在页面中直接引入Vue脚本资源。需要注意的是，引入的版本为3.x.x，而且脚本资源为vue.global.js全局构建版本。首先在body标签中设置一个id为app的div元素，这是Vue最终挂载的DOM元素，并且标签体内的内容为插值表达式，将Vue中的响应式数据动态渲染到该表达式中。然后在script标签中解构createApp方法，调用该方法传递参数，设置data方法返回一个message的字符串信息。最后将方法运行的结果实现mount挂载，挂载目标就是之前设置的div元素。

start.html文件代码如下。

运行页面后，可以看到页面已经渲染并显示“Hello Vue3！”，这就表明Vue3的运行环境已经被成功搭建。

2.通过脚手架创建Vue项目

因为直接引入Vue库只适用于部分场景，在进行中大型项目工程化管理时，操作起来并不方便，所以下面来讲解通过脚手架创建Vue项目的方式。脚手架工具也有多种，Vue官方提供了Vue CLI和Vite两个完全不同的脚手架工具，其中，Vue CLI在Vue2中就已经被使用，它创建的是基于Webpack打包的Vue项目；而Vite是Vue官方专门针对Vue3开发的一个全新的工具，它不再基于Webpack打包，而是在运行时打包，启动速度会提升很多。下面分别进行介绍。

（1）使用Vue CLI创建Vue项目。

首先确认已经安装V16及V16以上版本的Node，再开始Vue CLI的模块安装。

在cmd终端中执行下方命令。

在安装完＠vue/cli后，就可以在cmd终端中利用命令行接口模式创建Vue项目了。值得一提的是，使用Vue CLI创建Vue项目的方式支持Vue的不同版本，只不过Vue3在2022年2月7日已经成为新的默认版本。

在cmd终端中执行下方命令。

此时会出现如下所示的选项提示，包括默认Vue3环境及创建Vue2的Vue项目类型。当然开发者还可以手动配置更多详细内容，可以利用键盘上的上下方向键进行选项切换。

如果选择了“Manually select features”选项，则后续会出现更多的参数配置项，包括是否支持TypeScript、路由、Vuex状态管理器、CSS预编译样式、Linter提示、Formatter格式化、单元测试等。除了利用键盘上的上下方向键切换，还可以利用空格键选择，最终可以通过按Enter键确认。

因为是手动配置，所以还需要明确操作的Vue目标版本是3.x还是2.x系列。

如果项目中需要进行Sass、Less、Stylus等样式预编译，则开发者可以自行选择确认。

如果还选择了Linter及Formatter，则可以考虑使用不同的ESLint提示方案，如Standard（标准模式）、Airbnb（团队建议模式）或Prettier（格式化提示模式）。

开发者可以确认Lint起效的时机（是在进行代码保存时起效，还是在git提交时起效）。

并且可以明确项目的环境配置是放置于独立的配置文件中，还是统一设置在package.json配置文件中。

最终可以将当前的配置过程保存为一个项目创建的“预设方案”，从而在下次创建项目时可以方便地利用当前项目的配置规则立即创建。当然，开发者也可以不保存“预设方案”，直接创建项目。

在确认创建项目的所有选择后，按Enter键，项目会自动构建并安装所有项目的依赖内容。项目创建成功以后，在项目根目录下运行“yarn serve”命令即可运行项目，此时，文件结构如图1-3所示。

（2）使用Vite创建Vue项目。

使用Vite创建的Vue项目将使用基于Vite的构建设置，并允许开发者使用Vue的单文件组件（SFC）。使用Vite创建Vue项目主要分为两步。

第1步：在cmd终端中运行下方命令。

第2步：上方命令将会安装并执行create-vue。create-vue是Vue官方提供的项目脚手架工具，在安装过程中可以看到一些可选功能提示，这里与使用Vue CLI创建Vue项目的提示内容类似，读者可对照上面进行参考，不再赘述，具体如下。

如果不确定某个功能是否需要使用，则可以直接按Enter键，这代表开发者选择的是No。当这些功能都被选择完成后，命令行中将会出现如下几行命令，帮助开发者安装依赖和启动服务器。

此时，文件结构如图1-4所示。

执行了上面的步骤后，会出现如图1-5所示的页面，这代表开发者已经运行起来第1个Vue项目。