下载掌阅APP，畅读海量书库
立即打开
在了解了Vue3和其新特性后，本节开始尝试搭建其运行环境，以便我们快速进入Vue的开发流程。
那么Vue3的运行环境搭建主要包括几种方式呢？其包括两种方式，分别是页面直接引入Vue库和通过脚手架创建Vue项目。
1.页面直接引入Vue库
页面直接引入Vue库是指在HTML网页中借助script标签直接通过CDN（Content Delivery Network，内容分发网络）或者本地来引入并使用Vue，这种方式并不涉及“构建步骤”，不过可以让用户以简洁的代码模式，快速了解Vue3的一些核心语法。
这里介绍BootCDN，读者可自行查找其官方网站，首页如图1-2所示。
图1-2 BootCDN首页
新建一个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所示。
图1-3 文件结构（1）
（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项目。
图1-4 文件结构（2）
图1-5 项目运行效果
vue-devtools是基于Google Chrome浏览器的一个用于调试Vue应用的开发者浏览器扩展，可以在Vue开发者调试工具下调试代码。vue-devtools可以向开发者实时显示页面的组件构成，以及每个组件内的数据状态，能极大地帮助开发者提高程序的调试效率。本节将介绍如何安装Vue开发者调试工具vue-devtools。
vue-devtools的安装方式有3种：第1种是在Chrome应用商店中安装；第2种是在国内插件网站中下载插件后安装；第3种是下载源码后安装。本节讲解第3种安装方式，这也是笔者推荐的安装方式（官方商店不能直接访问，国内网站后期可能无法访问），安装步骤如下所示。
（1）到GitHub上下载源码，也可以在GitHub首页中搜索vue-devtools，vue-devtools页面如图1-6所示。
图1-6 GitHub中的vue-devtools页面
（2）下载压缩包，如图1-7所示。
图1-7 下载压缩包
（3）解压缩后进入命令提示符窗口，输入命令npm install，下载第三方依赖并安装。
（4）安装完毕后，输入命令npm run build，编译源程序。
（5）打开Google Chrome浏览器，点击浏览器地址栏右上角的
图标，在弹出的下拉列表中选择“更多工具”→“扩展程序”选项，如图1-8所示。
（6）执行完上面的步骤后，确保“开发者模式”处于打开状态，如图1-9所示。
图1-8 选择“扩展程序”选项
图1-9 开发者模式
（7）点击“加载已解压的扩展程序”链接，此时会弹出选择框，选择vue-devtools下的“shells\chrome”。
（8）配置完成后，在Google Chrome浏览器右上角会出现Vue的图标，如图1-10所示。
图1-10 Vue的图标
值得一提的是，当通过浏览器浏览使用Vue写的项目时，右上角的Vue图标就会变亮。