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]点出统计器
Oct 11 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
Javascript学习指南
Dec 01 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 Javascript
vuex 中插件的编写案例解析
Jun 10 Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
详解如何使用React Hooks请求数据并渲染
Oct 18 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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
twig模板常用语句实例小结
2016/02/04 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
快速保存网页中所有图片的方法
2006/06/23 Javascript
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
js实现简易ATM功能
2020/10/27 Javascript
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
初步解析Python下的多进程编程
2015/04/28 Python
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
python运行时间的几种方法
2016/06/17 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
python爬虫之自制英汉字典
2019/06/24 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
QML使用Python的函数过程解析
2019/09/26 Python
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
护理专业应届毕业生推荐信
2013/11/15 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
四年级数学教学反思
2016/02/16 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android