vsCode中编写vue项目时，webpack配置的alias别名无效
1、vsCode工具配置（settings.json文件配置所有项目可用）
解决方案一：
在插件市场中安装Path Intellisense插件并启用。根据以下提示信息，修改vsCode配置文件settings.json文件：
解决方案二：
在插件市场中安装Path Autocomplete插件并启用。根据以下提示信息，修改vsCode配置文件settings.json文件：
2、项目配置
如项目需要单独配置，可根据以下提示信息。在项目根目录中添加jsconfig.json或tsconfig.json文件：
具体配置如下：
{
"compilerOptions": {
// 项目根路径
"baseUrl": "./",
// 别名映射路径
"paths":{
"@/*": ["src/*"],
"store/*": ["src/store/modules/*"]
}
},
// 编译时排除以下目录文件使用配置规则
"exclude": [
"node_modules",
"dist"
],
// 编译时包含以下目录文件使用配置规则
"include": [
"./src/**/*.vue"
]
}
结语：vsCode工具配置别名时推荐使用第二种方案（因为第一种不太好用）
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 实例打开 ，你的断点现在应该被命中了。
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大家可以自行研究。效果是这样的
vscode vue 模板文件生成
打开vscode → 文件 → 首选项 → 用户片段 → vue.json (vue用户片段) → ctrl+s保存
新建vue文件，输入vue 回车
新建vue文件，输入vue 回车
不依赖vue-cli脚手架创建vue项目
我们一般创建vue项目都是通过vue-cli脚手架去创建，这次我尝试了通过文档完成所有项目配置包括webpack、ant-design-vue、vue-router、vuex等
项目源码：
1.新建项目
2.使用vscode打开项目
3.初始化
4.安装基本的 npm 包
5.创建文件夹以及文件
6.配置webpack.config.js
在这之前先安装一些依赖
模板解析依赖：
样式依赖:
css-loader:
文件加载依赖
解析es6语法依赖:
这是一个webpack插件，可简化HTML文件的创建以服务您的webpack捆绑软件
现在就可以配置webpack.config.js，如果有什么不清楚的可以参考官网
7.安装解析依赖
8.修改package.json文件
9.配置babel,创建.babelrc文件
修改webpack.config.js
如果编译时报错的话可能是因为你没有安装依赖:
10.主要文件：
app.vue：
index.js:
html文件：
Vue项目文件夹大致参考
1.混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
mixins文件夹下可以写各种调用ajax请求方法的方法，然后在需要调用这些方法请求数据的文件中：
这里的getCourseList文件中有请求需要的参数以及请求完成之后获取的数据 直接在文件类似this.getAllDemoClass();就能调用方法
2.components通用组件存放文件夹：
在这个文件夹下封装了项目需要的组件 然后在components下的index.js中向外暴露即可 然后在使用组件的文件中引用components即可
后续：
1.引入ant-design-vue：
具体引入操作可见官网
2.引入Vue Router
路由配置文件：router/index.js
3.引入vuex
新建store/index.js
news/index.vue
4.页面顶部进度条插件Nprogress
使用：
如何优雅地使用 VSCode 来编辑 vue 文件
先来扒一扒使用 PHPStorm 遇到的问题：
vue文件虽然可以通过插件来解决高亮问题，但是 script 标签中的 ES6 代码的识别老是出问题，箭头函数有的时候能正确识别，有的时候会报错
无法正确识别 vue 文件中的 jsx 语法
无法正确识别和高亮 vue 文件 style 标签中使用的 less 语法
vue文件中 template 部分使用了大量的自定义标签（自定义组件）和自定义属性，会报一堆 warning
经常性卡死
webpack实时编译的错误不能直接展示在代码编辑器内，还得自己到控制台中查看
如何安装 vscode
很简单，传送门： 官网下载安装
第一步，要支持 vue 文件的基本语法高亮
这里，我试过好3个插件： vue , VueHelper 和 vetur ，最终选择使用 vetur 。
安装插件： Ctrl + P 然后输入 ext install vetur 然后回车点安装即可。
p.s: vscode 的插件安装比 PHPStorm 的插件安装更快捷方便，安装完成后还不用重启整个程序，只要重新加载下工作区窗口就可以了。
安装完 vetur 后还需要加上这样一段配置下：
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
}
这时可以打开一个vue文件试试，注意下右下角状态栏是否正确识别为 vue 类型：
如果被识别为 text 或 html ，则记得要点击切换下。
第二步，要支持 vue 文件的 ESLint
可能还有人会问为什么要 ESLint ？没有 lint 的代码虽然也可能可以正确运行，但是 lint 作为编译前的一道检测成本更小，而且更快。此外， ESLint 还有很多规范是帮助我们写出更加优雅而不容易出错的代码的。
jshint 本来也是个不错的选择，但是 ESLint 对 jsx 的支持让我还是选择了 ESLint.
安装插件： Ctrl + P 然后输入 ext install eslint 然后回车点安装即可。
ESLint 不是安装后就可以用的，还需要一些环境和配置：
首先，需要全局的 ESLint , 如果没有安装可以使用 npm install -g eslint 来安装。
其次，vue文件是类 HTML 的文件，为了支持对 vue 文件的 ESLint ，需要 eslint-plugin-html 这个插件。可以使用 npm install -g eslint-plugin-html 来安装
接着，安装了 HTML 插件后，还需要在 vscode 中配置下 ESLint：
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
"eslint.options": {
"plugins": ["html"]
},
最后，别忘了在项目根目录下创建 .eslintrc.json , 如果还没创建，还可以使用下面快捷命令来创建：
这样一来 vue 中写的 js 代码也能正确地被 lint 了。
要是不小心少个括号之类的都可以有对应的报错:
多余 import 也都能报错:
还是蛮智能的。
第三步，配置构建任务
vue 项目的构建我选择用 webpack ，不过，并不是直接使用命令行下的 webpack 而是使用了 webpack 的 API 写的 node 脚本。 脚本主要有两个，一个是 build/bin/build.js 另一个是 build/bin/watch.js 分别是单次构建和实时构建。
于是乎，对应 vscode 中的 tasks 也是有两个： build 和 watch ，简单配置如下：
{
// See
// for the documentation about the tasks.json format
// use `Ctrl+P` and type `task` + SPACE + taskName to run a task
"version": "0.1.0",
"tasks": [
{
"taskName": "build",
"echoCommand": true,
"command": "node",
"args": [
"build/bin/build.js"
],
"suppressTaskName": true,
"isBuildCommand": true
},
{
"taskName": "watch",
"echoCommand": true,
"command": "node",
"args": [
"build/bin/watch.js"
],
"suppressTaskName": true,
"isBackground": true
}
]
}
这样配置好后，按 Ctrl + Shift + B 即可开始单次构建。 不过单次构建比较慢（要10秒+），一般我都用实时构建： Ctrl + P 然后输入 task watch 回车 即可开始实时构建。实时构建除了第一次比较慢，其他时候还是非常快的，一般1秒内就可以构建好。
最后，webpack 构建错误提示
webpack 构建失败后一般都会有错误提示，会显示在输出窗口中：
为啥是彩色的？ 因为装了 Output Colorizer 这个插件。
当然，这样还是不够方便 -- 实时构建是后台运行的，“输出”窗口一般也都是在后台，每次保存完文件还得点开岂不麻烦。
要是能做到像 ESLint 一样直接把错误标到编辑器上面就好了。真的可以吗？翻了下 vscode 的文档，发现有神奇的 problemMatcher -- 可以对任务输出进行解析，解析出的问题会显示在“问题”窗口中，如果还有文件名行号和列号，则会在源代码编辑窗口中对应的位置标出来。
先放个最终效果：
在这个文件的第32行，import 了一个不存在的模块，这样的错误在 ESLint 中当然是检查不出来的，然而在 webpack 的实时构建中会报错：
这个事情的困难在于两点：
如何通过 problemMatcher 把这个错误给抓出来？
如何找到错误对应的行号？（如果可能的话，还有列号）
webpack的错误输出格式并不是完全统一的，而且有些还没有行号 -- 一方面可能是 webpack 的 bug ，另一方面 vue 文件在构建的时候会拆成 template, script 和 style 三个方面进行构建，报错的行号可能对不上。
最终我的解决方案是对 webpack 的错误重新格式化输出，然后匹配：
首先，重新格式化输出需要 format-webpack-stats-errors-warnings 这个包（偶新写的）
npm install --save-dev format-webpack-stats-errors-warnings
然后，到 build/bin/build.js 和 build/bin/watch.js 中在 webpack 构建完成的回调函数中增加这个格式化后的输出：
更多使用介绍见 github
最后，在 .vscode/tasks.json 中，每个任务下添加 problemWatcher :
// ...
{
"taskName": "build",
// ...
// build 任务的:
"problemMatcher": {
"owner": "webpack",
"fileLocation": [
"relative",
"${workspaceRoot}"
],
"pattern": {
"regexp": "^!(\\w+): (\\S+)?:(\\d+),(\\d+)(?:~(?:(\\d+),)?(\\d+))?: (.*)$",
"severity": 1,
"file": 2,
"line": 3,
"column": 4,
"endLine": 5,
"endColumn": 6,
"message": 7
}
}
}
{
"taskName": "watch",
// ...
// watch 任务的：
"problemMatcher": {
"owner": "webpack",
"fileLocation": [
"relative",
"${workspaceRoot}"
],
"pattern": {
"regexp": "^!(\\w+): (\\S+)?:(\\d+),(\\d+)(?:~(?:(\\d+),)?(\\d+))?: (.*)$",
"severity": 1,
"file": 2,
"line": 3,
"column": 4,
"endLine": 5,
"endColumn": 6,
"message": 7
},
"watching": {
"activeOnStart": true,
"beginsPattern": "^\\s*Webpack begin run",
"endsPattern": "^\\s*Build complete at"
}
}
// ...
}
// ...
注：在 watch 任务中，为了匹配何时开始和何时结束，我在 webpack 构建的 run 和 watch 时增加了一个 console.log('Webpack begin run') 的打印，而在构建完成后增加了一个 console.log("Build complete at ..") 的打印。
