如何建立Vue开发环境

善微科技 2019 08月09日 发布

如果你要与Vue做大量的工作,从长远来看,它会花费一些时间来投入一些时间来设置你的编码环境。强大的编辑器和一些精心挑选的工具将使您的工作效率更高,并最终成为更快乐的开发人员。


在这篇文章中,我将演示如何配置VS代码以使用Vue。我将展示如何使用ESLint和Prettier对代码进行lint和格式化,以及如何使用Vue的浏览器工具来查看Vue应用程序中的内容。当您完成阅读后,您将拥有一个可用的开发环境,并准备开始像老板一样编写Vue应用程序。


我们来吧!


想从头开始学习Vue.js?本文是我们的高级库的摘录。使用SitePoint Premium获取涵盖基础知识,项目,技巧和工具等的全部Vue书籍。现在加入只需9美元/月。


安装和设置编辑器

我说我将在本教程中使用VS Code,但我害怕我撒了谎。我实际上将使用VSCodium,它是VS Code的开源分支,没有Microsoft品牌,遥测和许可。该项目正在积极开发中,我建议您查看一下。


使用哪个编辑器并不重要; 两者都适用于Linux,Mac和Windows。您可以在此处下载最新版本的VSCodium,或在此处下载最新版本的VSCode,并以正确的方式为您的操作系统安装。


在本指南的其余部分中,为了保持一致性,我将编辑器称为VS Code。


添加Vetur扩展

当您启动编辑器时,您会注意到窗口左侧工具栏中的一组五个图标。如果单击这些图标(方形图标)的底部,将打开一个搜索栏,使您可以搜索VS Code Marketplace。在搜索栏中输入“vue”,您应该会看到列出的数十个扩展程序,每个扩展程序声称会执行略微不同的操作。


根据您的使用情况,您可能会在这里找到适合您的东西。有很多可用的。例如,如果您正在处理涉及TypeScript的Vue项目,则TSLint for Vue可能很方便。现在,我将专注于一个名为Vetur的人。


在搜索框中输入“Vetur”,然后选择Pine Wu创作的包。然后点击Install。


在VS代码中安装Vetur


一旦安装了扩展程序,点击重新加载即可激活并开始营业。


探索Vetur的特色

如果您访问项目的主页,您会看到该扩展程序为您提供了许多功能:


语法高亮

片段

蚂蚁

掉毛/错误检查

格式化

自动完成

调试

现在让我们看看其中的一些。



报告广告

注意:许多这些功能仅在您设置项目时才有效。这意味着您需要创建一个文件夹来包含您的Vue文件,使用VS Code打开该文件夹并通过VS Code的资源管理器访问这些文件。


善微科技作为长沙网站建设的优秀服务提供商,已经为上百家企事业单位提供了网站建设、微信/小程序开发、网络营销等服务,优质的服务得到了广大客户的一致认可,如果您有网站建设、微信开发、小程序开发等方面的需求,请致电:400-019-8939,我们会根据您所从事的行业领域和网站类型,在最短的时间内请我们的营销顾问与您预约后上门拜访您,直接面谈交流为您解答所有的网站建设疑问。

我们服务的城市有衡阳网站建设张家界网站建设岳阳网站建设湘潭网站建设常德网站建设益阳网站建设永州网站建设娄底网站建设怀化网站建设郴州网站建设益阳网站建设

如没特殊注明,文章均为善微网络原创,转载请注明来自https://www.sanways.cn/news/562.html