前言：前些日子入坑了许久没用的webstorm, 用惯了vscode突然开始用webstorm有些不习惯, 以前用的时候是刚学Javascript时候, 没有深入的了解webstorm, 不过新版的webstorm真的很漂亮, 让我喜欢上了（前提是自己配置一下主题、字体、颜色哟）。 最近开始用webstorm + Typescript进行书写代码, 问题什么的几乎没有，对Typescript支持还好！不过，前两天使用Vue + Typescript写代码时候遇到了问题，由于没有用过Typescript进行构建Vue项目，所以写法还是需要慢慢适应。不过有一点好处，使用Typescript构建项目还是很爽的，还没有学习Ts的小伙伴赶快去官网去学习吧！ 看了一些关于用Ts构建Vue项目的几篇文章，使用Ts构建Vue项目没有用React, Angular有优势，不过既然Vue官方支持使用Typescript，那么就不妨碍我们使用Ts，毕竟Ts是强类型的，有助于让我们写代码时候能尽快知道哪块代码是错误的，减少运行期间的错误提示！ 还是期待一下Vue3.0版本吧，据说尤大大使用Typescript重构了！！！ 下面就说一下在Webstorm里写Vue文件的注意事项及配置问题(如果小伙伴喜欢用vscode的话，那么还是用vscode吧，毕竟Ts和vscode都是一个妈生的，对Ts支持简直不要太好。只能说这是血脉。。。) 如果想在Webstorm里写Vue项目的话要安装一下Vue插件（毕竟我们要Vue只能提示嘛，方便我们写代码），点击文件 => 设置 => Plugins => 搜索框中输入vue即可，就列出了多个vue插件，大家可以选择性的安装！！ 本文为了小伙伴们更好的操作，都是用图说话，文字附加，这样一来，就很明白了！（大家看过图解系列书吗？就是这样） 正文：我这里是使用Vue-cli3.0进行安装的，不会的小伙伴可以去官方文档去查阅，很详细！安装好之后目录就是这个样子： 可以看到，vue-cli3.0和2.0的工程目录简洁了许多（vue.config.js是我后配置的，初始忽略），所有的大部分常用的配置这个脚手架都给你配置好了，如果需要自行配置的可以去官方文档进行查阅，这里就不进行讲述了。 下面步入正题（我能敲下黑板么。。。） ① 首先呢，大家都知道安装完之后会有一些组件，比如下面的图片所示： 就是这个样子的，小伙伴不了解装饰器ES7的装饰器和Typescript的装饰器可以去进行查阅！下面有链接！！！ 现在我先写一个生命周期mounted钩子： 可以看到这里是不高亮的，提示Unused method mounted. 也就是提示这个钩子没有使用。怎么解决呢？(我这里的是汉化版的webstorm ) 点击文件 => 设置 => 编辑器 => Inspections => 在搜索框搜索Unused global symbol，之后把这个勾去掉就可以了！ 勾去掉之后发现可以高亮了，不报那个提示了！如图： ② 写的方法函数会报Method can be static, 如图： 怎么解决呢？同第一步的操作步骤一样还是搜索，这回搜索Method can be static，再把勾去掉就好了。去掉勾之后如图： 这回不提示了吧，没有波浪线了！是不是很开心！ ③ 每次都用cmd命令行启动项目，敲命令（进入文件夹，再启动命令），命令代码根据文件深度，比如我的项目目录： 真的很麻烦，有车一族的小伙伴们说了，我车上有一键启动，不用钥匙拧就能启动，简直不要太方便！那有没有一键启动（傻瓜式启动）Vue项目呢？ 当然有，webstorm支持这个功能，是不是心情澎湃了呢！下面看图： 第一步，找到这个打开编辑运行/调试配置对话框（圈圈的就是了）（找的时候一定往右上瞅），如图： 然后点击一下，出现配置弹窗： 然后呢，点击左上角的加号（+），创建一个配置，如图：
这时，我们在左侧栏中找到npm，点击一下，如图：
注意，我这里配置过了！ 在第一个选项中package.json地址第一次是空的，要选择一下，点击一下下拉框就会自动提示你项目中的package.json文件的路径了，然后Script选项要填你开发模式下的命令，我这里是Vue官方默认的启动命令npm run serve，如果小伙伴使用了像npm run dev之类的命令，Scripts选项要写上dev，Command就是run，然后就可以应用 => 确定，这时“打开编辑运行/调试配置对话框“就变成了SERVE，如图：
然后呢，小伙伴按Alt + F12组合键，调出控制台，如图：
这时我要启动项目只需点击一个按钮即可，在哪里呢？还是看图吧：
就是红线上面的三角形，此时我点一下，就启动了Vue项目了，如图：
可以看到项目已经启动成功了，然后我们复制一下网址，在浏览器上粘贴就出现项目了！
要不要这么爽，轿车有一键启动，咱们项目也有一键启动！！！ 如果想重新启动项目的话，还是在三星形的位置（此时是一个刷新图标）点一下就可以重启项目了！！！ 下面附一下ES7的装饰器和Typescript装饰器（中文版）的链接，英语好的可以去看英文文档，这两个装饰器其实都差不多的： Typescript装饰器 ES7装饰器 建议大家在看这个装饰器之前，要了解一下装饰者模式！这样的话呢，理解起来会很容易的！ |
|
|
