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 相关文章推荐
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
javascript 面向对象思想 附源码
Jul 07 Javascript
超轻量级的基于jquery的三级展开列表
Apr 26 Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 Javascript
整理Javascript事件响应学习笔记
Dec 02 Javascript
详解Vue 开发模式下跨域问题
Jun 06 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 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关联数组的10个操作技巧
2013/01/21 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
代码生成器 document.write()
2007/04/15 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
Python中每次处理一个字符的5种方法
2015/05/21 Python
Linux中Python 环境软件包安装步骤
2016/03/31 Python
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
哪些是python中web开发框架
2020/06/17 Python
python调用win32接口进行截图的示例
2020/11/11 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
幼儿园庆六一活动方案
2014/03/06 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
追讨欠款律师函
2015/05/27 职场文书