如何建立VUE开发环境

掌握vue.js开发始于一个配置良好的环境。本指南向您展示了如何设置VS Codium（用于VS代码的开源替代方案），以进行最佳vue.js开发，利用扩展，衬里和浏览器工具以提高生产力。

键突出显示：

vs codium：
• 利用VS代码进行干净的开源Vue开发体验。
• Vetur扩展名：>安装效率扩展名，以进行优质代码支持，包括语法突出显示，摘要，linting和Intellisense。
> vue cli：
• >使用vue cli来简化项目脚手架并整合基本工具，例如Eslint和Prettier。
Eslint＆Prettier：
• 配置Eslint和Prettier，以保持一致的代码样式，错误检测和自动格式。>
vue devtools：
• 利用Vue devtools（浏览器扩展程序）进行有效调试和申请状态检查。
设置编辑器（vs codium）：

>

>为操作系统下载并安装VS Codium（或VS代码）。 为简单起见，我们将其称为VS代码。

>安装兽医扩展名：

>

打开VS代码。 单击“扩展”图标（侧边栏中的方形图标）。

>

>搜索“ vetur”，然后通过pine wu。
1. 安装扩展
重新加载与激活扩展的代码。
4. VETUR特征：
通过以下方式增强VUE的开发：

语法突出显示：提供了

文件中代码元素的明确视觉区分。

>
• >摘要：>提供预定义的代码片段，以更快地开发。 键入快速SFC模板的“脚手架”。 .vue> emmet：支持快速HTML/CSS生成的Emmet缩写。 尝试
，然后按选项卡。
• 错误检查/刺激性：检测代码中的错误和潜在问题。
• > IntelliSense：提供智能代码完成建议。> div#header>h1.logo>a{site Name} 带有Vue CLI的示例项目
• 1. 确保安装node.js。
  >全球安装VUE CLI：
  2. npm install -g @vue/cli
  创建一个新项目：
  3. vue create my-project>
  在设置过程中手动选择功能，选择“ eslint Prettier”和“ save上的棉绒”，将配置文件放入
  4. >。package.json>中
  用eslint：

  vue CLI集成了代码质量检查的ESLINT。 eslint-plugin-vue>插件专门处理.vue>文件。 错误显示在终端中，并在编辑器中（安装ESLINT VS代码扩展名）显示。 您可以在文件中配置规则。package.json

  >格式化的格式：>

  > Prettier会自动格式化您的代码以保持一致性。 启用VS代码设置中的“格式”（

  ：true），以自动保存时自动格式化。 在您的editor.formatOnSave>文件中配置更漂亮的规则。package.json

  > vue浏览器工具：

  >安装vue.js devtools浏览器扩展程序（Chrome或Firefox）。 这允许检查组件，VUEX商店（如果使用）以及在开发过程中发射的事件。

  

  结论： >此设置为vue.js开发提供了强大的环境。 VS Codium，Vetur，Vue CLI，Eslint，Prettier和Vue Devtools的组合可显着提高生产率和代码质量。 请记住，请咨询每个工具的文档以获取高级配置选项。

  >

以上是如何建立VUE开发环境的详细内容。更多信息请关注PHP中文网其他相关文章！