Intellij IDEA搭建vue-cli项目的方法步骤
1、安装/升级node环境
vue-cli对于node和npm的版本是有要求的。
可以通过 node -v （npm -v）查看当前版本，通过 where node （where npm）查看安装路径。
如果node版本不符合vue-cli的要求，那么可以在node官网下载稳定版本并安装。
安装过程比较简单，我更新时，除了修改安装路径，其他都是一直Next即可。
这里要提到一点，更新node版本后，查看版本，会发现npm的版本也已经更新了。
D:\workspace\MyProject\Jan2018>node -v && npm -v
v8.9.4
5.6.0
2、安装vue-cli
全局安装vue-cli，在命令行中执行npm install -g vue-cli
你可以在cmd打开命令行工具，也可以在Intellij IDEA的Terminal处执行。
3、Intellij IDEA准备
如果你想在Intellij IDEA的Terminal中构建vue-cli项目，还需要做一点准备。如果使用cmd构建，则跳过此步骤。
1）安装vue.js
File -> Settings -> Plugins -> Browse respositoties...
搜索vue.js，右侧提示Install（截图时已安装，未安装会提示Install）。安装成功后需要重启IDEA。
2）File Types: HTML 添加 *.vue类型
File -> Settings -> Editor -> File Types -> HTML
点Registered Patterns下的+，添加 *.vue
3）设置JS
File -> Settings -> Language & Frameworks -> JavaScript
选择 ECMAScript 6 和 Prefer Strict mode
4、构建及运行vue-cli项目
在命令行工具cmd，或者Intellij IDEA的Terminal中进入想要构建项目的目录，输入vue init webpack project-name，回车
webpack默认版本为2.0，若要指定1.0，需在webpack后加上#1.0，即vue init webpack#1.0 project-name
接下来会出现几个提示，分别是输入项目名称、描述、作者等，按实际情况选择即可。
？Project name ---- 项目名称，init命令时也填了个project-name，如果无需更改，直接回车即可；
？Project description ---- 项目描述，按需填写。无需填写可以直接回车；
？Author ---- 作者
？Vue build ---- 构建模式，一般默认第一个；
？Install vue-router? ---- 是否安装vue-router。选Y。后边构建项目会用到。
？Use ESLint to lint yout code? ---- 格式校验，按需；
？Set up unit tests ---- 测试相关，按需；
？Setup e2e tests with Nightwatch? ---- 测试相关，按需；
？Should we run ‘npm install' for you after the project has been created? ---- 按需，这里我选Yes, use NPM。如果选No，后续自己在目标
目录下执行npm install即可。
这样构建出来的项目，可以直接运行。进入项目所在目录，执行npm run dev，执行完看到以下提示：
Your application is running here: http://localhost:8080
在浏览器打开http://localhost:8080，看到这个页面，接下来就可以开始开发了。
5、Intellij IDEA新建.vue格式文件
在开发的时候，会发现新建文件时并没有.vue格式文件的选择，这时我们需要做一些设置。
File -> Settings -> Editor -> File and Code Templates -> +
模板内容可以按需。可以填也可以不填
<template>
<div> {{msg}}</div>
</template>
<style></style>
<script>
export default{ data () { return {msg: 'vue模板页'} } }
</script>
设置完成后，就能新建.vue格式的文件了。：）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
IntelliJ IDEA中查看当前类的所有继承关系图
在IntelliJ IDEA 中这个查看一个类也就是当前类的所有继承关系,包括实现的所有的接口和继承的类, 这个继承,不仅仅是一级的继承关系,包括好几层的继承.父类的父类的父类.直到最后. 可以很清楚明了的了解一个类的实现关系. diagram 英[ˈdaɪəgræm] 美[ˈdaɪəˌɡræm] n. 图表; 示意图; 图解; [数] 线图; vt. 图解; 用图表示; 下面看这个编辑器怎么以图解的形式,查看这种继承关系. (上面的是查看的Java源码的类的所有继承关系,最下面的这个是在查看s
-
IntelliJ IDEA本地代码覆盖后恢复原来的代码图解
在IntelliJ IDEA中一不小心将你本地代码给覆盖了,这个时候,你 ctrl + z 无效的时候,是不是有点小激动, 表激动 这个编辑器牛x的地方就是在这. 你还是有办法找回你的原来的代码的.而且想找回什么时候的版本都是可以的哦. 如下: 使用Local History本地历史→从编辑器的右键菜单中显示历史记录,显示当前文件的本地修改历史. 下面就记录了本地代码的历史版本,可以放心了 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢
-
IntelliJ IDEA修改内存大小,使得idea运行更流畅
idea有个配置文件,可以设置内存大小的,就跟咱的jvm的内存里面的堆大小,栈大小等等,可以设置的,而且设置了之后,你这个的性能就会得到提升.具体看下面怎么修改. 先说所要修改的文件 idea.vmoptions 的位置,这个不同的平台,估计名称可能有些差别.mac的如下图 具体怎么找到这个地方的,刚刚使用mac的估计不会,老手就会啦, option + cmd + P 隐藏或显示"访达"窗口中的路径栏 这个就是显示我上图的地步的那个路径,然后你就可以像Windows那样点点点到
-
IntelliJ IDEA中显示和关闭工具栏与目录栏的方法
工具栏:就是上面有个好多的快捷按钮的那个栏,比如撤销,上传,下载设置,扳手按钮,等等. 目录栏:就是刚刚装的时候,这个会显示,但是不知道怎么关闭,但是这个又没什么用. 如图: 就是对应的几个按钮,自己试试就知道什么效果了. 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持.如果你想了解更多相关内容请查看下面相关链接
-
IntelliJ IDEA搜索整个项目进行全局替换(有危险慎用)
我们用Eclipse或者IntelliJ IDEA编程,有时候需要将整个项目的某个字符串替换成其他的. 全局搜索我会,我还给调成ctrl+g了呢,但是遇到要全局(整个项目)替换字符串.哎哟,我有点蒙了.这不换了编辑器吗. 我用的是eclipse的keymap而且电脑又不是mac.那么问题来啦.怎么找快捷键呢. 如下: 额,顺便说下,mac的好像是ctrl+shift+r,就出来了.我还讨来了个mac截图. 本功能请谨慎使用! 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作
-
IntelliJ IDEA连接MySQL数据库详细图解
在网上down了个web项目,在 IntelliJ IDEA 这个编辑器里面跑起来,但是发现domain文件夹下的xml文件都报如下的红色提示错误: Cannot resolve table 'jrun_access' less... (Ctrl+F1) This inspection lets you spot the following problems that might occur in XML descriptors that define Hibernate mappings: R
-
IntelliJ IDEA中折叠所有Java代码,再也不怕大段的代码了
问题: 在Java文件中,想把所有的Java方法代码都一次性给折叠起来,用哪个点开哪个. 问题来源: 在新建model bean的时候,要是属性很多,那么对应的getter和setter就会很多,要是所有的方法代码都是展开状态,那么这个文件看着也不甚美观,所以,可以把方法都折叠起来. 下面看怎么设置快捷键:看法宝. 要是看不懂,系统自带的快捷键配置,大可以,自己再修改个,就像这个折叠代码的这个快件,折叠一个方法的快捷键是: ctrl + 减号. 我就把折叠所有的快捷键设置成:ctrl+shif
-
IntelliJ IDEA中查看文件内所有已声明的方法(类似eclipse的outline)
IntelliJ IDEA中实现跟eclipse一样的outline方法,查看文件内所有已经声明的方法. mac的可以在key map 里搜索下这个: file structure 然后看看自己的快捷键是啥. 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持.如果你想了解更多相关内容请查看下面相关链接
-
IntelliJ IDEA中打开拼写检查与忽略提示曲线的方法
他可以让你的代码看起来很规范. Spellchecker inspection helps locate typos and misspelling in your code, comments and literals, and fix them in one click. 拼写检查器检查有助于定位错别字和拼写错误的代码,注释和文字,并把它们固定在一个点击. 重点就是规范,不至于看着很水,到处都是警告.因为拼写错误可能是因为你的单词真的写错了,丢人吧.或者就是没有驼峰发命名 总之这么个样式的代
-
IntelliJ IDEA使用SVN分支的简单介绍
说是要创建个SVN的分支,用于单独的定制化项目的开发.与主干项目分开.所以,要创建个branch.翻译一下就是分支的意思啦. 下面看怎么操作吧. 选择项目,右键,然后如图操作. 就会出现下图. 对图稍微解释一下. copy from : 就是从哪个地方取数据来当作svn仓库的初始源码. 有2个选项,二选一. working copy: 估计就是把你本地的那个目录下面的项目文件,作为svn仓库的初始,copy 源. 注意,要是使用这个选项,有些个是不需要提交到svn管理的,比如,web项目的tar
-
IntelliJ IDEA查看方法说明文档的图解
上学的时候,习惯了用eclipse编辑器,刚刚开始工作的时候也是用的是eclipse搞的开发,对eclipse快捷键还是知道的 在eclipse上看方法的文档说明的时候,直接鼠标放上去,就可以直接显示出来方法说明文档. 但是在新换的IntelliJ IDEA编辑器中怎么办.(为啥要换编辑器,因为新编辑器确实diao.) 1.你要是没有改keymap用的是mac版本. 那就是ctrl + j 2.你要是把keymap改成了eclipse里面的keymap,(这个就是我在windows上用的 Int
-
MAC上IntelliJ IDEA的svn无法保存密码解决方案
有的人的电脑在使用 IntelliJ IDEA 的svn 时候,无法保存密码, 输入密码时,勾选保存密码还是无效. 每次都的输入密码,一次浪费2秒钟,一天浪费多少时间啊. 如下操作: 然后. 这地方,我画了几个框框. 先是选择左边的2个都是第一个选项,然后在右边的搜索框搜索"svn". 如果,没有结果,不要着急,冷静点. 下面不还是有个"+"符号呢嘛,点击添加个就好. 可以参照着我的这个,你自己把地址和账号密码给配置一下,就OK啦. 上面是我的svn的配置,可以照着
-
IntelliJ IDEA中新建Java class的解决方案
我是在别人问我的时候,才发现还可以有这个问题,主要是他新项目直接打开,什么都没配置,就打算新建文件,其实可以直接看编辑器右下角的event log,那个对话框点开的话,可以add as maven project,就是添加为maven项目.然后就不会有这问题了. 具体问题的图,如下: 然后就是具体的解释和解决方案. 如上图红圈所示,我们可以根据对项目的任意目录进行这五种目录类型标注,这个知识点非常非常重要,必须会. Sources 一般用于标注类似 src 这种可编译目录.有时候我们不单单项目的