教你如何怎样在VSCode中配备并应用Vue

Vue.js是一个受欢迎的 JavaScript 库，用以搭建 Web 应用软件操作界面，Visual Studio Code 内嵌了对HTML、CSS和JavaScript的 Vue.js 搭建块的适用。针对更丰富的 Vue.js 开发工具，您可以组装适用 Vue.js IntelliSense、编码精彩片段、文件格式等的Vetur拓展。

欢迎使用 Vue #

大家将在本实例教程中应用Vue CLI。假如您是 Vue.js 架构的初学者，您可以在vuejs.org网站在寻找挺不错的文本文档和实例教程。

要组装和应用 Vue CLI 及其运作 Vue 应用软件网络服务器，您必须组装Node.js JavaScript 运作时和npm（Node.js 包管理工具）。npm 包括在 Node.js 中，您可以从Node.js 安装下载它。

提醒：要检测您的设备上是不是合理组装了 Node.js 和 npm，您可以键入node --version和npm --version。

要vue/cli在终端设备或cmd中组装, 输入：

npm install -g @vue/cli

这也许需要数分钟的时间段来组装。您现在可以根据输入以下几点来构建一个新的 Vue.js 应用软件：

vue create my-app

my-app您的应用软件文件夹名称的名字在哪儿。系统软件将提醒您挑选一个预置，您可以保存初始值(babel, eslint)，这将应用Babel将 JavaScript 变换为与浏览器兼容性的 ES5 并组装ESLint linter以检验编号不正确。建立 Vue 应用软件并组装其依靠项很有可能需要几次時间。

使我们根据导航栏到新文件夹名称并输入npm run serve以运行 Web 网络服务器并在网页中打开APP来迅速运作大家的 Vue 应用软件：

cd my-app
npm run serve

留意：假如运行出错，可能是沒有按照有关包，可以实行yarn install或是npm install或是npm run pre试一下：

yarn install
npm install
npm run pre

您应当在网页中的http://localhost:8080上见到“欢迎使用您的 Vue.js 应用软件” 。您可以按Ctrl C终止vue-cli-service网络服务器。

要在 VS Code 中开启您的 Vue 应用软件，请从终端设备（或cmd）导航栏到该my-app文件夹名称并输入code .：

cd my-app
code .

VS Code 将在文档任务管理器中运行并表明您的 Vue 应用软件。

Vetur 拓展#

如今进行src文件夹名称并挑选App.vue文档。您会注意到 VS Code 沒有表明一切英语的语法突显，而且将文档视作纯文字，如右下角通知栏中所显示。您还将见到一条通告，为文件属性建议Vetur后缀名.vue。

Vetur 拓展为 VS Code 给予了 Vue.js 语言表达作用（英语的语法高亮度、智能化认知、精彩片段、文件格式）。

从通告中，按组装以安装下载 Vetur 拓展。您应当在拓展主视图中见到 Vetur 拓展已经组装。组装结束后（很有可能需要数分钟），组装按键将变成管理方法传动齿轮按键。

如今您应当见到这.vue是 Vue 语言表达的可鉴别文件属性，而且您有着英语的语法高亮度、括号匹配和悬停叙述等语言表达作用。

智能化认知#

当您逐渐键入 时App.vue，您将见到对于 HTML 和 CSS 及其 Vue.js 特殊新项目（如Vue一部分中的申明 ( v-bind, v-for) ）的智能化提议或补齐template：

和 Vue 特性 ( methods, computed)scripts一部分：

转到界定，查询界定#

VS Code 根据 Vue 拓展语言表达服务项目能够根据Go to Definition ( F12 ) 或Peek Definition ( Alt F12 )在编辑软件中给予类型定义信息内容。将鼠标光标放到 上App，右键单击并挑选Peek Definition。一个偷窥对话框将开启，表明的App自定App.js。

按Escape关掉 Peek 对话框。

您好，全球！#

使我们将实例应用软件升级为“Hello World！”。在App.vue拆换了HelloWorld组件msg与自定特性文字“Hello World！”。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld msg="Hello World!"/>
  </div>
</template>

储存App.vue文档（Ctrl S）后，应用 重启网络服务器，npm run serve您将见到“Hello World！”。在大家继续学习 Vue.js 手机客户端调节的并且让网络服务器维持运作。

提醒：VS Code 适用全自动储存，默认设置状况下能在延迟时间后储存您的文档。查验文档菜单栏中的全自动储存选择项以开启全自动储存或立即配备客户设定。files.autoSave

Linting#

Linter 会剖析您的源码，并可以在您运作应用软件以前就潜在性问题向您看到提醒。Vue ESLint 软件 ( eslint-plugin-vue ) 查验 Vue.js 特殊的拼写错误，这种问题在编辑软件中表明为鲜红色波浪线，也表明在问题控制面板中（查询>问题 Ctrl Shift M）。

当 Vue linter 在模版中检查到好几个根原素时，您可以在下面见到一个不正确：

调节#

您可以应用内嵌的 JavaScript 程序调试调节手机客户端 Vue.js 编码。您可以从VS Code 调节菜谱网址上的 VS Code 中的Vue.js 调节菜谱中知晓其他信息。

留意：当今 vue-cli 转化成的 sourcemaps 存在的问题，这会造成 VS Code 中的调节感受发生问题。参照https://github.com/vuejs/vue-loader/issues/1163。

另一个用以调节 Vue.js 的受欢迎专用工具是vue-devtools软件。

别的拓展#

Vetur 仅仅可用以 VS Code 的诸多 Vue.js 拓展之一。您可以根据输入“vue”在“拓展”主视图 ( Ctrl Shift X ) 中开展检索。

也有一些拓展包捆缚了别人发觉对 Vue.js 开发设计有效的拓展。

大量有关VSCode的有关专业知识，请浏览：vscode实例教程！！

以上便是教你如何怎样在VSCode中配备并应用Vue的详尽具体内容，大量请关心自学java网其他相关文章！