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 字符串连接[性能比较]
May 10 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
微信小程序实现简单表格
Feb 14 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 Javascript
vue在图片上传的时候压缩图片
Nov 18 Vue.js
分享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
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
PHP ElasticSearch做搜索实例讲解
2020/02/05 PHP
Javascript中的数学函数
2007/04/04 Javascript
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
javascript常用对话框小集
2013/09/13 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
axios学习教程全攻略
2017/03/26 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
微信小程序 网络通信实现详解
2019/07/23 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
Python中使用dom模块生成XML文件示例
2015/04/05 Python
Python运算符重载用法实例分析
2015/06/01 Python
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
Python装饰器语法糖
2019/01/02 Python
基于Python的PIL库学习详解
2019/05/10 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
基于python3实现倒叙字符串
2020/02/18 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
python实现udp传输图片功能
2020/03/20 Python
Python如何输出警告信息
2020/07/30 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
三严三实对照检查材料
2014/08/25 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python