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 全等号运算符使用说明
May 31 Javascript
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
原生js实现放大镜
Feb 20 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
关于Vue的路由权限管理的示例代码
Mar 06 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 Javascript
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
分享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自定义函数返回多个值
2006/11/26 PHP
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
PHP加密解密实例分析
2015/12/25 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
jsonp跨域请求实现示例
2017/03/13 Javascript
JavaScript 数据类型详解
2017/03/13 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
详解Vue-axios 设置请求头问题
2018/12/06 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
Pyhton中防止SQL注入的方法
2015/02/05 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
python+os根据文件名自动生成文本
2019/03/21 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
pytorch之添加BN的实现
2020/01/06 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
如何提高SQL Server的安全性
2016/07/25 面试题
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
企业出纳岗位职责
2014/03/12 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
公司周年庆典标语
2014/10/07 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
Java中API的使用方法详情
2022/04/06 Java/Android