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 相关文章推荐
JavaScript中void(0)的具体含义解释
Feb 27 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
vue2.0实战之基础入门(1)
Mar 27 Javascript
ionic3 懒加载
Aug 16 Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
深入理解javascript prototype的相关知识
Sep 19 Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 Javascript
vue自定义组件实现双向绑定
Jan 13 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
一个网马的tips实现分析
2010/11/28 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python实现网站注册验证码生成类
2017/06/08 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
python有几个版本
2020/06/17 Python
html5绘制时钟动画
2014/12/15 HTML / CSS
HTML5通用接口详解
2016/06/12 HTML / CSS
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
计算机专业推荐信范文
2013/11/27 职场文书
事务机电主管工作职责
2014/02/25 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
Python实现socket库网络通信套接字
2021/06/04 Python
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技