一、Vue运行环境搭建

本文将介绍 Vue 运行环境的搭建，为后续学习做好准备。

本文内容：

运行环境搭建

页面直接引入Vue库
通过脚手架创建Vue项目

使用Vue CLI创建Vue项目
使用create-vue创建Vue项目

Vue 开发者调试工具介绍

运行环境搭建

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

页面直接引入Vue库

页面直接引入Vue库是指在HTML网页中借助script标签直接通过CDN或者本地来引入并使用Vue。要注意的是这种环境不适合于生产环境，但是我们在进入学习组件章节前的核心语法会采用这种方式引入Vue进行学习。

这里推荐一个 CDN 站点：https://www.bootcdn.cn/，搜索Vue就可以获取到对应的CDN链接。这里注意下我选择的是截止目前最新的版本3.5.13。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue3的环境搭建</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.5.13/vue.global.js"></script>
  </head>
  <body>
    <div id="app">{{ message }}</div>
    <script>
      const { createApp } = Vue

      createApp({
        data() {
          return {
            message: 'Hello Vue3!',
          }
        },
      }).mount('#app')
    </script>
  </body>
</html>

运行页面，控制台没有什么报错和警告，可以看到页面渲染并显示 "Hello Vue3!"，这就表明已经正确引入了Vue3的库。

注意：

1、我这里引入的是vue.global.js，它是完整版。

2、为了避免每次通过网络请求加载Vue库，也可以直接浏览器访问script中的链接将内容存储为一个js文件后通过script标签引入

通过脚手架创建Vue项目

在进行中大型项目工程化管理时，通常会通过脚手架的方式创建Vue项目。脚手架就可以理解成创建好项目后，它就已经给你配置好了一堆东西，类似于后端的SpringBoot。脚手架工具有多种，Vue官方提供了Vue CLI和vue-create两种完全不同的脚手架工具。其中，Vue CLI在Vue2中就已经被使用，它创建的项目是基于Webpack打包的Vue项目，访问官网可以看到其目前已经处于维护模式；而vue-create是Vue官方专门针对Vue3开发的一个全新的工具，它不再基于Webpack，而是基于新一个构建工具Vite运行时打包，启动速度会提升很多。下面分别进行介绍。

使用Vue CLI创建项目

首先确认已安装好V16版本以上的Nodejs环境（我用的是 v16.17.0），再开始Vue CLI的安装。

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

npm install -g @vue/cli

在安装完@vue-cli后，就可以在cmd终端中利用命令行接口模式创建Vue项目了。值得一提的是，使用Vue CLI创建项目的方式支持Vue的不同版本，只不过Vue3中2022年2月7日已经成为默认版本。（Vue3肯定不推荐使用Vue CLI的方式了，但是如果使用Vue2还是有必须介绍的）

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

vue create vue3-new-feature-start-webpack

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

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