俗话说, 要想攻其玉, 必先利其器. 工作中老是在用 angular 开发, 但慢慢会有 vue 的业务, 所以需要学习学习 vue. 今天开始折腾 vue, 我是用 webstorm 开发前端的, 当使用 vue-cli 创建好一个项目后, 使用 webstorm 打开简直不能入目啊, 倒是没有啥错误提示, 倒是一大堆的各种编辑器警告, 无奈, 还得去搞好 IDE 对 vue 的支持啊.
前提
vue 的官方文档上建议新手是先不要使用 vue-cli, 而是直接先用类似于 JQuery 一样的方式引入 vue 来学习. 鉴于前面已经搞过了 angular 的 cli, 所以我还是直接从 cli 入手.
假定我们已经安装好了 node 和 npm.
全局安装 vue-cli
在终端中运行命令:
npm install --global vue-cli
全局安装 vue-cli. 然后使用 vue-cli 创建我们的项目:
vue init webpack my-project
这样我们就有个完整的项目, 并且里面会有个示例的组件, 运行:
npm run dev
然后在浏览器里面访问 http://localhost:8081 / 就可以看到项目的运行情况.
折腾 webstorm
在 webstorm 打开 vue 项目的时候, 差点就想放弃 vue 了, 实在不忍直视, 但还是得发扬一贯的探索精神啊, 遇到问题就要解决呗!
.vue 类型的文件
首先得从文件类型上入手, 在目前的版本中是没有. vue 这种文件类型的, 所以无法识别也无法高亮, 就算识别了也都是乱的. 查了下, 有些说是在文件类型上加上 *.vue 就好了, 但我加了反而更乱套了.
谷歌了半天, 发现了这篇文章, 是 webstorm 官方网站的文章 https://www.jetbrains.com/help/webstorm/vue.js.html .webstorm 已经支持 vue 了, 但是我在本地的 webstorm 完全没找到这个选项啊, 这是为啥?
看了下, 发现 webstorm 的版本是 2018 版的, 而我的 webstorm 是 2017.2. 所以我需要更新到最新版.
得, 备份下 webstorm 的设置, 然后下载最新的 webstorm 然后更新. 顺便找了个激活码: http://hb5.s.osidea.cc:1017(热乎的, 亲测可用).
果然安装后, 发现了 vue 的标记, 的确新版的是支持的.
但是发现. vue 的文件的高亮还是没有的. 看来还是得加个文件支持 (不知道是不是我前面操作的时候删除了):
preferences> editor> file types
拉下来选择 vue.js templates, 点击然后在下面的 registered patterns 里面点击加号, 然后输入 *.vue, 然后点击确定, 点击 apply 应用, 然后可以看到 webstorm 底下有个进度条, 走满后,.vue 的高亮就正常了.
unused export default
在 vue 的组件里面的 js 中有个 export default, 上面是灰色的提醒, 鼠标移上去后发现提示 unused export default, 这是因为没有具体的使用这个导出, 是 JavaScript 的一个语法提示. 我们可以在 IDE 的 configure inspection 检查配置中进行配置.
快速的方法是: 点击右下角的小人头 configure inspection. 在弹出的界面中选择: JavaScript General. 去掉选项: unused global symbol. 然后点击 ok, 可以看到灰色的提醒消失了.
来源: http://www.jb51.net/article/139782.htm