VSCode调试vue项目
先决条件
你必须安装好 Chrome 和 VS Code。同时请确保自己在 VS Code 中安装了 Debugger for Chrome 扩展的最新版本。
在可以从 VS Code 调试你的 Vue 组件之前，你需要更新 webpack 配置以构建 source map。做了这件事之后，我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试，即便你的资源已经被 webpack 优化过了也没关系。
打开 config/index.js 并找到 devtool 属性。将其更新为：
如果使用 vue-cli3 你需要设置 vue.config.js 内的 devtool 属性：
进入Debugger视图，添加Chrome配置，将内容替换成以下内容
设置断点
此处response返回数据
启动调试
在终端使用如下命令开启这个应用
进入Debug视图，选择‘vuejs:chrome’配置，然后按F5或点击绿色的play按钮
随着一个新的 Chrome 实例打开 ，你的断点现在应该被命中了。
vue标签prop提示vscode
网络的问题。多数是网络连接异常导致。
1、首先打开电脑检查网络。
2、其次打开vue标签prop进行测试网络连接是否异常。
3、最后点击提示vscode重新进入即可。
5分钟看懂VUE项目
VUE是前端开发框架。诞生于2014年吧。
原始的前端开发框架需要工程师写html、写css、写javascript(js)。js是脚本语言，浏览器可以运行js来执行一些js支持的动作，例如点击反馈，下拉菜单、操作html的DOM元素之类。这样开放效率就很低了。
后来诞生了一些前端开发框架，VUE就是其中之一。目前在国内前端开发中，特别是手机app的h5页面的开发部分，被很多公司采用。
使用VUE开发的时候，不需要js直接操作html元素，只需要管理js的变量值，html会自动更新这些值。传统的html配合js能完成的功能，VUE都给出了实现方案，开发只写简单的html和js语句就可以实现。
VUE开发的工具一般是visio stdio code（vscode），稍微适应两天就可以熟练应用了。还是很强大的。
但是vscode本身只是编辑器，开发编译类语言需要自己配编译环境，具体我没配过。
前端开发不需要配编译环境了，只需要把需要的各种库、工具在命令行界面安装就行。具体过程网上搜“从零开始搭建vue项目”。
刚建立好的项目一定是下面这种目录结构（ranktable.vue是我后加的
这对于新手村的人会引起头晕呕吐，老子啥都没写就出来这么多文件，不但数量不少，文件种类还齐全。
学习VUE别想一下吃的太多，除非你本身前端经验丰富。否则先看懂红色箭头的几个文件吧，看懂这几个就算入门了。看的顺序严格按照下面这样。
index.html-main.js-App.vue-index.js-HelloWorld.vue
我将这几个文件大概讲一讲，你就能有个清晰的脉络了。
一、index.html
!DOCTYPE html
html
head
meta charset="utf-8"
meta name="viewport" content="width=device-width,initial-scale=1.0"
titletradedatapy/title
/head
body
div id="app"/div
/body
/html
页面开发当然是要有html了，VUE开发也不例外。这个html就是整个项目的入口了。只不过是body里面过于简单。div id="app"/div表示本html绑定了一个id为app的VUE对象。
二、main.js
new Vue({ //new Vue语句就是定义了一个VUE对象
el: '#app', //vue对象的id是app
router,
components: { App }, //vue的组件名是APP
template: 'App/' //template 名是APP
})
这就定义了一个app的VUE对象，index.html就可以找到它了。
三、App.vue
template
div id="app"
router-view/
/div
/template
script
export default {
name: 'App' //export 了名为App的组件，main.js就可以找到它了
}
/script
上面的template都理解为html的一部分片断就行了，片断可以拼接到html对应的位置，构成一个有内容的完整的页面。img src="./assets/logo.png"这句被我注释了，否则页面会显示这个图片的。下面的route-view/部分是路由，根据用户的url不同，会路由到不同的vue文件，进而展示不同的页面内容。
四、index.js
项目里有不只一个index.js，一定看准了，我要讲解的是router目录下的index.js.
//这里的配置决定了App.vue里router-view/位置会展示什么内容
export default new Router({
routes: [
{
path: '/', //当用户访问 根目录也就是默认目录会被路由到HelloWorld组件，
//这个组件的所有内容会被在App.vue里router-view/显示出来
name: 'HelloWorld',
component: HelloWorld
},
{//当用户访问 会显示ranktable.vue内容
//ranktable.vue是我后加的
path: '/ranktable',
name: '/ranktable',
component: ranktable
}
]
})
五、HelloWorld.vue
最后看看这里有什么
template
div
原来的内容被我删除了，现在页面显示这句话。
/div
/template
script
/script
vscode命令行执行npm run dev，看见下面说明成功了，将地址贴进浏览器
Compiled successfully in 983ms 15:43:26
I Your application is running here:
如果想要更复杂的功能，在helloworld.vue实现就行了，比如我要一个填表查询功能，里面改成
template
div
group title="城市"
selector placeholder="请选择城市" v-model="demo01" title="" name="district" :options="list" @on-change="onChange1"/selector
/group
group title="街道"
selector placeholder="请选择街道" v-model="demo03" title="" name="district" :options="list4" @on-change="onChange3" @click.native="onClickpz"/selector
/group
group title="小区"
selector placeholder="请选择小区" v-model="demo02" title="" name="district" :options="list3" @on-change="onChange2" @click.native="onClickheyue"/selector
/group
group title="日期"
selector placeholder="请选择日期" v-model="demo04" title="" name="district" :options="list5" @on-change="onChange4" @click.native="onClickdate"/selector
/group
group title="统计类型"
selector placeholder="请选择统计类型" v-model="demo06" title="" name="district" :options="list6" @on-change="onChange6"/selector
/group
div style="padding:15px;"
x-button type="primary" @click.native="getValue('plainValueRef')"查询/x-button
/div
/div
/template
script
import { Selector, Group, Cell, CellBox, XButton } from 'vux'
此处省略很多东西
/script
这个例子有点复杂，需要下面script里实现很多内容，引入vux的一些组件，vux大家可以自行研究。效果是这样的
vue VSCode 开发设置（html自动补全、eslint保存时格式化、vetur 格式化html）
File - Preference - Setting -搜索setting.json - Edit in settings.json
settings.json
方法1：File - Preference - Setting -搜索setting.json - Edit in settings.json
settings.json
Setting.json
方法2：File - Preference - 搜索框输入：files.autoSave
之后能看到 files.autoSave 的可选项有
off : 关闭自动保存（默认）
afterDelay: 延迟xx时间后保存，可在 "files.autoSaveDelay" 中配置延迟时间；
onFocusChange: 编辑器失去焦点时自动保存；
onWindowChange: 窗口失去焦点时(编辑器窗口的切换，桌面窗口的切换)自动保存；
安装 ESLint
vscode 中安装 ESLint 插件
然后配置 vscode 的 setting.json
File - Preference - User Snippers
vue.json文件，然后添加下面模板
然后新建.vue文件 ，写下vue然后Tap键就能生成什么的模板。
如果没有生成模板只是多了个空格或者生成的是vue标签的话，我们还得设置一下，打开settings.json，添加下面的设置
如果你的Setting.json文件有 "files.associations" 设置的话，请删除，因为他会和上面 emmet.syntaxProfiles 冲突。
files.associations 和 emmet.syntaxProfiles 都是设置html 标签的补全，如果是要用.vue模板补全功能的话，html标签补全我们就用 emmet.syntaxProfiles 来设置。
vue 的开发中 vscode 可装用于开发规范的插件有
Prettier ：规范js
ESLint: 规范js
Vuter: 规范 .vue 文件中 template
stylus: 规范 stylus
注意：以下配置是基于接下来介绍的插件设置的，如果没有安装插件是不会生效的。
或者：
其中：
4.如果使用了stylus，那么vscode安装stylus插件，进行设置，不适用冒号双引号大括号
根目录下创建eslint规则文件 .eslintrc.js
（下面browsers 多了s 正确的为 browser ）
