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 Object.extend
May 18 Javascript
16个最流行的JavaScript框架[推荐]
May 29 Javascript
js变换显示图片的实例
Apr 16 Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
Dec 25 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 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中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
python批量修改文件后缀示例代码分享
2013/12/24 Python
python使用socket向客户端发送数据的方法
2015/04/29 Python
Python实现二叉搜索树
2016/02/03 Python
python读取oracle函数返回值
2016/07/18 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
连锁经营管理专业大学生求职信
2013/10/30 职场文书
怎样写演讲稿
2014/01/04 职场文书
工程质量月活动方案
2014/02/19 职场文书
七匹狼男装广告词
2014/03/21 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
员工生日活动方案
2014/08/24 职场文书
看雷锋电影观后感
2015/06/10 职场文书
python manim实现排序算法动画示例
2022/08/14 Python