在 Windows 搭建 Vue 开发环境

  |   0 评论   |   0 浏览

安装 VS Code

下载 Visual Studio Code 并安装。

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

安装 Vue CLI

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

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

1C:\Users\wangzk>node --version
2v14.16.0
3
4C:\Users\wangzk>npm --version
56.14.11

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

1npm install -g @vue/cli

创建 Vue 应用

Vue 提供了两种创建方式:

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

通过命令行创建

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

1vue create my-app

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

image20210504104018753.png

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

通过 UI 创建

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

1vue ui

通常情况下(之前没有创建过项目),Vue 会在浏览器中打开一个创建项目的页面:

image20210506150811233.png

下一步,选择配置:

image20210506150903223.png

创建成功:

image20210506151141385.png

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

image20210506151719930.png

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

image20210506152019726.png)
)

运行 Vue 应用

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

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

通过命令行运行

切换到 my-app 目录,运行 npm run serve 命令:

1cd my-app
2npm run serve

image20210506145313563.png

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

image20210506145454453.png

通过 UI 运行

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

image20210506152749539.png

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

image20210506153123216.png

将会打开下面的页面:

image20210506145454453.png

用 VS Code 打开应用

方式一

切换到应用目录,输入 code . 命令:

1cd my-app
2code .

方式二

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

image20210506162846240.png

相关资料

Using Vue in Visual Studio Code

Vue CLI