实践:IDEA配置Vue

想学习一下VUE,NPM安装模式的成功了,看了一篇CSDN博客上面说到IDEA也可以开发VUE前端
强制推荐该博主的博客,专门写了一个项目的开发,从设计到代码,写得太具体了!!附链接
但是我的IDEA的Static Web有H5、Angular、React,就是没有VUE啊?
实践:IDEA配置Vue
那就百度一下吧,原来是要安装Vuejs插件,这就简单了,先随便建一个空白Web项目吧,然后打开 settings
实践:IDEA配置Vue
然后在plugin里面搜vue
实践:IDEA配置Vue
没有,从仓库里找:Search in respositoires
实践:IDEA配置Vue
找到Vue.js后,install,完成可在plugins中看以该插件
安装完成后,重启IDEA
关闭并删掉之前的空项目,这时我们再来新建项目
实践:IDEA配置Vue
有了!!
继续下一步试试
实践:IDEA配置Vue
初始化完成后就是一些套路信息的填写了
实践:IDEA配置Vue
实践:IDEA配置Vue
实践:IDEA配置Vue
实践:IDEA配置Vue
实践:IDEA配置Vue
要开发VUE的SPA,Vue-router这个是必装的,反正选Yes就对了
实践:IDEA配置Vue
ESLint,这玩意儿可以规范我们JavaScript代码,提高代码质量,虽然很多牛B的软件好像都是独自个性开发出来,可对于不牛B的我们来说,规范的代码还是非常有好处的,打上YES
实践:IDEA配置Vue
反正后面的选项按默认做就行了
然后就是等待IDEA自动完成一些步骤了,可以去上个WC什么的了…

最后在IDEA的终端输入:npm run dev

等命令success实践:IDEA配置Vue
在浏览器中输入:localhost:8080,就可以看以熟悉的界面了:
实践:IDEA配置Vue
如果端口8080被占用了呢,我们可以config/index.js中修改应用的端口:
实践:IDEA配置Vue
我们改成了8088,
使用Ctrl+C在终端结束应用后,再npm run dev
实践:IDEA配置Vue
看一下效果:
实践:IDEA配置Vue