Intellij IDEA搭建vue-cli项目的方法步骤


Posted in Javascript onOctober 20, 2018

1、安装/升级node环境

vue-cli对于node和npm的版本是有要求的。

Intellij IDEA搭建vue-cli项目的方法步骤

可以通过 node -v (npm -v)查看当前版本,通过 where node (where npm)查看安装路径。

如果node版本不符合vue-cli的要求,那么可以在node官网下载稳定版本并安装。

Intellij IDEA搭建vue-cli项目的方法步骤

安装过程比较简单,我更新时,除了修改安装路径,其他都是一直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。

Intellij IDEA搭建vue-cli项目的方法步骤

2)File Types: HTML 添加 *.vue类型

File -> Settings -> Editor -> File Types -> HTML

点Registered Patterns下的+,添加 *.vue

Intellij IDEA搭建vue-cli项目的方法步骤

3)设置JS

File -> Settings -> Language & Frameworks -> JavaScript

选择 ECMAScript 6 和 Prefer Strict mode

Intellij IDEA搭建vue-cli项目的方法步骤

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,看到这个页面,接下来就可以开始开发了。

Intellij IDEA搭建vue-cli项目的方法步骤

5、Intellij IDEA新建.vue格式文件

在开发的时候,会发现新建文件时并没有.vue格式文件的选择,这时我们需要做一些设置。

File -> Settings -> Editor -> File and Code Templates -> +

模板内容可以按需。可以填也可以不填

Intellij IDEA搭建vue-cli项目的方法步骤

<template>
  <div> {{msg}}</div>
</template>
<style></style>
<script>
  export default{ data () { return {msg: 'vue模板页'} } }
</script>

设置完成后,就能新建.vue格式的文件了。:)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 蒙版进度条(结合图片)
Mar 10 Javascript
基于jquery的地址栏射击游戏代码
Mar 10 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
JavaScript定时器详解及实例
Aug 01 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
简介JavaScript中search()方法的使用
Jun 06 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 #Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 #Javascript
vue 项目地址去掉 #的方法
Oct 20 #Javascript
VUE-cli3使用 svg-sprite-loader
Oct 20 #Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 #Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 #Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 #Javascript
You might like
风格模板初级不完全修改教程
2006/10/09 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
一段实用的php验证码函数
2016/05/19 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
走出JavaScript初学困境—js初学
2008/12/29 Javascript
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
jquery 学习笔记一
2010/04/07 Javascript
js倒计时小程序
2013/11/05 Javascript
css配合jquery美化 select
2013/11/29 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
跟老齐学Python之Python文档
2014/10/10 Python
用Python编写一个国际象棋AI程序
2014/11/28 Python
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
Python实现队列的方法
2015/05/26 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
JNI的定义
2012/11/25 面试题
人力资源行政经理自我评价
2013/10/23 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
学生会部长竞聘书
2014/03/31 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书