在 Windows 搭建 Vue 开发环境

安装 VS Code

下载 Visual Studio Code 并安装。

然后在 VS Code 中安装 Vetur 插件。

安装 Vue CLI

Vue CLI 是 Vue 提供的一个开发工具，它的运行依赖 Node.js。因此，首先要安装 Node.js 和 npm，直接去 Node.js 官网 下载安装包安装即可。

在命令行窗口输入下面的命令，确认 Node.js 和 npm 已经安装成功：

C:\Users\wangzk>node --version
v14.16.0

C:\Users\wangzk>npm --version
6.14.11

然后，输入下面的命令安装 vue/cli：

npm install -g @vue/cli

创建 Vue 应用

Vue 提供了两种创建方式：

• 通过命令行
• 通过图形化界面

通过命令行创建

在命令行创建一个名为 my-app 的应用：

vue create my-app

该命令会提示你预选一个配置，选择默认配置即可：

其中，Babel 用来将代码翻译成符合 ES5 规范的 JavaScript 代码，ESLint 用来检查代码中的错误。

通过 UI 创建

在命令行输入下面的命令：

vue ui

通常情况下（之前没有创建过项目），Vue 会在浏览器中打开一个创建项目的页面：

下一步，选择配置：

创建成功：

如果之前创建过项目，vue ui 命令在浏览器中打开的是下面的页面：

点击页面左下角的【...更多】-【Vue 项目管理器】，在【Vue 项目管理器】页面可以管理现有项目、创建新的项目和导入已有的项目。

)
)

运行 Vue 应用

运行 Vue 应用同样有两种方式：

• 通过命令行命令
• 通过 UI 界面

通过命令行运行

切换到 my-app 目录，运行 npm run serve 命令：

cd my-app
npm run serve

启动成功后，访问 http://localhost:8080/ 将会看到下面的页面：

通过 UI 运行

在命令行输入 vue ui 命令，在打开的页面中点击【任务】-【serve】-【运行】。

启动成功后，点击【启动 app】

将会打开下面的页面：

用 VS Code 打开应用

方式一：

切换到应用目录，输入 code . 命令：

cd my-app
code .

方式二：

在应用目录上右键，点击【通过 Code】打开：

相关资料

Using Vue in Visual Studio Code

Vue CLI