使用VisualStudioCode开发Vue本文主要介绍在VisualStudioCode下开发Vue。 Nodejs

本文已参与[新人创作礼]活动，一起开启掘金创作之路。

前言

本文主要介绍在VisualStudioCode下开发Vue。

Nodejs、Npm、Vue的项目搭建参考下面文章。

用后台开发的逻辑理念学习VUE

在Windows下学习Nodejs、Npm和VUE

VSCode配置

首先为VSCode增加插件，ctrl+shift+X调出扩展管理界面。

Chinese (Simplified) Language Pack for Visual Studio Code： 适用于 VS Code 的中文（简体）语言包，此中文（简体）语言包为 VS Code 提供本地化界面。

Code Debugger： 无需配置launch.json即可进行单文件调试，点击右上角虫子图标或者右键菜单都可以。

禁用JS-CS-HTML Formatter： 格式化js、CSS、HTML、JSON文件。

Debugger for Chrome： 在Chrome浏览器或任何其他支持Chrome调试器协议的目标中调试JavaScript代码。

Vetur： Vue代码视图工具，不安装这个Vue代码会全部飘红。

PS：VSCode自带格式化代码功能，快捷键Alt+Shift+F。

Vue开发

首先创建一个Vue项目——vue init webpack KibaProject。

然后使用VSCode打开文件夹，打开项目。

基础配置

打开.eslintrc.js文件，这个eslint是我们的语法检查器，打开它，增加自定义规则，逗号，引号，分号检测取消。

rules: { 
    'generator-star-spacing': 'off', // allow async-await 
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',// allow debugger during development
    'quotes': 'off',
    'semi': 'off',
    'comma-dangle': 'off', 
    'no-console':  'off',
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'space-before-function-paren':  'off',
  }

脉络基础

然后找到index.html文件，这个是我们的起始页面。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>homestead_onemap</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Vue是一个单页面的项目，即他只有一个Html页面，当切换显示.vue后缀名的页面时，是由vue.js控制，将主页中id为app的div的内容替换为指定的.vue页面的内容，.vue文件是组件文件，默认用