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 相关文章推荐
IE与firefox之jquery用法区别
Oct 03 Javascript
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
jquery动态添加删除(tr/td)
Feb 09 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
JavaScript Ajax实现异步通信
Dec 14 Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 Javascript
小程序api实现promise封装过程解析
Nov 21 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
Nov 09 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 常用字符串函数总结
2008/03/15 PHP
PHP 加密解密内部算法
2010/04/22 PHP
php对数组排序的简单实例
2013/12/25 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
php面向对象值单例模式
2016/05/03 PHP
php如何把表单内容提交到数据库
2019/07/08 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
doctype后如何获得body.clientHeight的方法
2007/07/11 Javascript
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
py2exe 编译ico图标的代码
2013/03/08 Python
python根据文件大小打log日志
2014/10/09 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
django 读取图片到页面实例
2020/03/27 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
python 实现超级玛丽游戏
2020/11/25 Python
HTML5未来发展趋势
2016/02/01 HTML / CSS
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
企业行政文员岗位职责
2013/12/03 职场文书
优质服务活动实施方案
2014/05/02 职场文书
单位员工收入证明样本
2014/10/09 职场文书
java如何实现socket连接方法封装
2021/09/25 Java/Android