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 相关文章推荐
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
extJS中常用的4种Ajax异步提交方式
Mar 07 Javascript
js对象基础实例分析
Jan 13 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
使用ES6语法重构React代码详解
May 09 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 Javascript
JavaScript模块详解
Dec 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
业余方法DIY电子管FM收音机
2021/03/02 无线电
PHP 5.0对象模型深度探索之绑定
2006/09/05 PHP
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
js实现的日期操作类DateTime函数代码
2010/03/16 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
Vue中Quill富文本编辑器的使用教程
2018/09/21 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
python控制台中实现进度条功能
2015/11/10 Python
Python3处理HTTP请求的实例
2018/05/10 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
屈臣氏俄罗斯在线商店:Watsons俄罗斯
2020/08/03 全球购物
远程教育心得体会
2014/01/03 职场文书
科级干部考察材料
2014/02/15 职场文书
就职演讲稿范文
2014/05/19 职场文书
护理专业求职信
2014/06/15 职场文书
宿舍标语大全
2014/06/19 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
2014年统战工作总结
2014/12/09 职场文书
2015年三万活动总结
2015/03/25 职场文书
材料采购员岗位职责
2015/04/03 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书