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 相关文章推荐
js 通用javascript函数库整理
Aug 14 Javascript
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 Javascript
微信小程序模板template简单用法示例
Dec 04 Javascript
JavaScript判断对象和数组的两种方法
May 31 Javascript
ES6基础之数组和对象的拓展实例详解
Aug 22 Javascript
Vue 数据响应式相关总结
Jan 28 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
解析PHP的session过期设置
2013/06/29 PHP
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
js实时监听文本框状态的方法
2011/04/26 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
python和C语言混合编程实例
2014/06/04 Python
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
python实现简单温度转换的方法
2015/03/13 Python
python的else子句使用指南
2016/02/27 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
python实现淘宝购物系统
2019/10/25 Python
Python如何进行时间处理
2020/08/06 Python
python 如何引入协程和原理分析
2020/11/30 Python
平面设计师工作职责范文
2013/12/03 职场文书
中式餐厅创业计划书范文
2014/01/23 职场文书
个性发展自我评价
2014/02/11 职场文书
新员工入职欢迎词
2015/01/23 职场文书
运动会表扬稿范文
2015/05/05 职场文书
Python实现机器学习算法的分类
2021/06/03 Python
详解nginx location指令
2022/01/18 Servers