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 相关文章推荐
彪哥1.1(智能表格)提供下载
Sep 07 Javascript
新鲜出炉的js tips提示效果
Apr 03 Javascript
收集json解析的四种方法分享
Jan 17 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
JavaScript中的高级函数
Jan 04 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 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
example2.php
2006/10/09 PHP
JavaScript OOP类与继承
2009/11/15 Javascript
jQuery 性能优化手册 推荐
2010/02/23 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
举例说明如何为JavaScript的方法参数设置默认值
2015/11/17 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
Nodejs之TCP服务端与客户端聊天程序详解
2017/07/07 NodeJs
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
python基于phantomjs实现导入图片
2016/05/13 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
体育教育个人自荐信范文
2013/12/01 职场文书
委托证明的格式
2014/01/10 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
建议书标准格式
2014/03/12 职场文书
商业融资计划书
2014/04/29 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python