手把手教你怎么在VSCode中配置并使用Vue

今天PHP爱好者给大家带来本篇文章给大家介绍一下在VSCode中搭建并配置Vue环境，使用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在终端或命令提示符中安装, 键入：

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 服务器并在浏览器中打开应用程序来快速运行我们的 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 应用程序，请从终端（或命令提示符）导航到该my-app文件夹并键入code .：

cd my-app
code .

VS Code 将在文件资源管理器中启动并显示您的 Vue 应用程序。

Vetur 扩展#

现在展开src文件夹并选择App.vue文件。您会注意到 VS Code 没有显示任何语法突出显示，并且将文件视为纯文本，如右下方状态栏中所示。您还将看到一条通知，为文件类型以上就是手把手教你怎么在VSCode中配置并使用Vue的详细内容，更多请关注php爱好者其它相关文章！