DDR爱好者之家

Intellij IDEA搭建vue-cli项目的方法步骤
站长资源 2025/1/12 佚名
5 1538
DDR爱好者之家 Design By 杰米

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"text-align: center">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格式的文件了。：）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米