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 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
使用jquery实现select添加实现后台权限添加的效果
May 28 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
修改ligerui 默认确认按钮的方法
Dec 27 Javascript
JS实现颜色动态淡化效果
Mar 06 Javascript
vue引入js数字小键盘的实现代码
May 14 Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 Javascript
VUE 解决mode为history页面为空白的问题
Nov 01 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
php session和cookie使用说明
2010/04/07 PHP
一个典型的PHP分页实例代码分享
2011/07/28 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
php中mt_rand()随机数函数用法
2014/11/24 PHP
如何使用php实现评委评分器
2015/07/31 PHP
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
Python如何定义接口和抽象类
2020/07/28 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
Snapfish英国:在线照片打印和个性化照片礼品
2017/01/13 全球购物
保护环境标语
2014/06/09 职场文书
技术负责人岗位职责
2015/02/10 职场文书