在 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

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

image20210504104018753.png

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

通过 UI 创建

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

vue ui

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

image20210506150811233.png

下一步,选择配置:

image20210506150903223.png

创建成功:

image20210506151141385.png

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

image20210506151719930.png

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

image20210506152019726.png)
)

运行 Vue 应用

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

通过命令行运行

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

cd my-app
npm run serve

image20210506145313563.png

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

image20210506145454453.png

通过 UI 运行

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

image20210506152749539.png

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

image20210506153123216.png

将会打开下面的页面:

image20210506145454453.png

用 VS Code 打开应用

方式一

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

cd my-app
code .

方式二

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

image20210506162846240.png

相关资料

Using Vue in Visual Studio Code

Vue CLI

  • Vue.js

    Vue.js(读音 /vjuː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    231 引用 • 641 回帖 • 460 关注

广告 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...