idea创建Vue项目

已于 2024-05-15 16:20:58 修改
阅读量564 收藏 6
点赞数 8
分类专栏： vue 文章标签： vue intellij-idea
于 2024-05-13 22:19:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52813800/article/details/138820459
版权

（方法1的项目本人的idea是直接创建vue3版本，方法2可以选择vue2 / vue3，可以在package.json查看vue版本）

目录

方法1：

创建项目

打开cmd

导入项目

添加router和vuex依赖

运行vue项目

方法2：

创建空文件夹

进入cmd

开始创建vue

选择Manually select features

使用idea打开项目并运行

添加配置信息

方法1：

创建项目

需要等待一段时间安装

安装完成

打开cmd

vue ui

导入项目

添加router和vuex依赖

运行vue项目

Terminal ——》输入

npm run server

出现了如下图的网址就完成了

或者直接点击界面上的右上角的绿色三角形

方法2：

创建空文件夹

进入cmd

开始创建vue

vue create 项目名

选择Manually select features

空格==选中/取消，enter键==进入下一步

选中vue3版本

下图选择的路由是使用历史模式，但是有些选择不使用历史模式

（在实际项目中，是否选择使用历史模式取决于项目需求和个人偏好。如果希望URL更加友好且不带有#符号，可以选择历史模式。如果不需要这种功能，也可以使用默认的哈希模式。启用历史模式后，需要在服务器端配置，以防止在直接访问子页面时出现404错误。）

输入项目名

项目创建完成

这里容易忽视，需要再进入下一级的文件才能运行项目

cd 项目名        #如 cd demo1

进入下一级文件夹后启动项目

npm run serve

（可以直接关闭cmd窗口了）

使用idea打开项目并运行

添加配置信息

选择“npm”——》Script框选择第一个——》点击“Apply”

项目启动成功

犯困的小山竹觉醒了
关注
  • 8
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
idea创建vue项目，引用elementUI教程附件
10-17
idea创建vue项目，引用elementUI并从springboot项目获取数据教程附件
Intellij IDEA搭建vue-cli项目的方法步骤
12-12
vue-cli对于node和npm的版本是有要求的。 可以通过 node -v （npm -v）查看当前版本，通过 where node （where npm）查看安装路径。 如果node版本不符合vue-cli的要求，那么可以在node官网下载稳定版本并安装。 ...
手把手教程-使用idea创建vue项目
Wang_ning__的博客
10-24 1万+
小编在第一次通过IDEA使用Vue创建脚手架时，对于网上那么多方法真实头大，在经过多次的测试后，终于有一种简单直接的方法，费话不多说，上操作方法和相应的截图。
IDEA创建vue工程，并运行。
weixin_41702950的博客
04-17 431
2.安装vue-cli 命令行工具输入：npm install -g cnpm --registry=https://registry.npm.taobao.org 安装淘宝镜像，安装完成之后如下图，则说明安装成功。3.全局安装vue-cli，输入命令: npm install -g @vue/cli ,安装完成之后输入 vue -V（大写），如图。创建好后，根据如图所示，可以在Terminal中使用命令进行启动 npm run serve，也可以使用箭头所示的启动按钮进行启动。4.继续按如图所示，
创建Vue项目详细教程 (引入Element-plus 和 ArcoDesign)
最新发布
qq_20770569的博客
06-29 1093
Vue.js（通常简称为Vue）是一个开源的渐进式JavaScript框架，用于构建用户界面。它由尤雨溪（Evan You）在2014年创建并维护至今。Vue的核心库专注于视图层，易于学习且集成到现有项目中，同时也能够为复杂的单页应用程序（SPA）提供强大的功能。
创建VUE项目，在IDea上进行开发与运行的简单流程
weixin_45928161的博客
03-07 7934
目录一、创建VUE项目1. 外部终端创建2. IDea内部终端创建3. 项目介绍4. vue 的特别之处二、在IDea上开发与运行1. 创建组件与编码2. 配置组件路由3. 设置访问关联4. 运行 一、创建VUE项目 这里只介绍其中我所熟知的两种方式 1. 外部终端创建 在存储vue项目的目录，清除路径并输入cmd，回车，进入当前目录的命令行终端 创建vue项目 注意名称不可用大写英文vue create demo_01 根据自己需要选择模式，这里我选择自定义模式 创建好的项目在IDea中打开即
用IDEA创建自定义vue3项目
m0_65985318的博客
03-04 2946
本文介绍了如何在IDEA中自定义创建vue3项目
IDEA中Vue的安装和使用【window10】
weixin_38383877的博客
02-25 738
1.首先安装npm的阿里镜像，原生npm下载依赖包过慢，镜像可以提高下载效率。3、安装webpack工具（如果以前没有安装webpack，一定要安装！1.在setting中的plugins安装Vue.js插件（本人已经安装）十.下一步就是配置好IDEA的Vue环境了（配置好了，才能编写代码！八.查看IDEA的Static Web里的Vue项目。2.安装Vue的脚手架工具vue-cli。2.配置HTML支持.vue后缀的文件。六.基本工具安装完成后，开始创建项目。九.惊喜的时刻：运行Vue项目。
idea创建VUE项目
qq_28397787的博客
08-03 1万+
VUE项目的创建
springboot第四章：使用idea创建vue项目
zhwx0537的博客
04-24 6629
运行npm install。4、配置启动和编译选项。
Idea创建vue项目
qq_46017272的博客
04-01 2万+
一、首先去官网下载node.js，并安装 node.js下载地址：Download | Node.js 我在之前就安装过，选择的是Windows64 16.14.1版本，可结合自己的系统选择 下载完成后，默认进行安装即可，安装完node后，node中会自带npm，便于以后的安装下载 我们可以在cmd中查看node版本，输入node -v 二、安装vue-cli脚手架 在cmd中输入命令：npm install -g @vue/cli@4.5.15(我这里安装的是这个版本，可以自行选.
使用IDEA开发Vue项目
Smile的博客
11-07 1万+
使用IDEA开发Vue项目 一、软件安装 1、安装Node Node官网下载，安装一直下一步 # 配置淘宝源 npm config set registry http://registry.npm.taobao.org/ 2、安装IDEA 略… 二、插件及配置 1、安装vue.js插件 IDEA plugins中搜索vue.js并安装 2、配置vue文件 3、添加右键创建.vue文件 模板格式可以自定义 <template> <div>{{msg}}</div&g
用idea创建vue项目
m0_67677436的博客
05-12 1万+
目录 一、安装node.js （1）下载安装包 （2）测试node.js是否安装成功 （3）安装vue和全局vue-cli 二、idea安装vue.js插件 三、创建vue项目 四、修改配置文件 五、配置idea运行的环境 一、安装node.js 官网下载下载地址：Download | Node.js （1）下载安装包 安装过程很简单，全部next即可。 （2）测试node.js是否安装成功 在键盘按下win+R键，输入cmd回车，打开cmd窗口； 查看版本操作：node.
IntelliJ IDEA编辑器配置vue高亮显示
10-16
接下来，我们将使用vue-cli来快速搭建一个Vue项目。打开命令行工具（如cmd或IDEA内置的Terminal），进入你想要创建项目的目录，输入以下命令： ``` vue init webpack mypro ``` 这里的"mypro"是你的项目名，可以...
IDEA上面安装vue的插件
10-11
安装完Vue.js插件后，现在可以在IDEA中创建Vue项目。在欢迎屏幕上，选择"New Project"（新建项目），在项目类型列表中，你会看到"Vue.js"选项。选择它，然后根据向导配置你的项目，例如设置项目名称、位置、使用的...
idea创建Vue项目流程
m0_64005688的博客
03-26 1838
idea从0开始安装vue并学习相关知识
手把手使用idea创建vue项目
java技术博客
05-08 1万+
手把手使用idea创建vue项目 参考网址: https://mp.weixin.qq.com/s/-AgBkwasbKHRjbLJRSJgQw 一、安装Node.js 首先要安装好Node.js,安装方法可以看我之前的文章 Node.js安装教程 小尉，公众号：51ASPNETNode.js手把手安装图文教程 二、创建vue项目 1、在IDEA中File-Open 打开一个空目录 2、然后输入命令npm install -g vue-cil 先安装vue的脚手架 然后等待安装完成。 3、安装完成
IDEA中Vue开发环境搭建
yinshengchen的博客
04-18 4870
要解决 “npm ERR!missing script: build” 错误，我们需要在 package.json 文件中定义一个名为 “build” 的构建脚本。找到项目根目录中的package.json文件，这里列出了项目所依赖的所有资源与版本号，右键该文件，打开于终端，输入npm install 命令安装所有依赖；在上述代码中，我们添加了一个名为 “build” 的构建脚本，该脚本使用 webpack 进行生产模式构建。(3) 右侧“Scripts”处输入“dev”，其它idea已经默认选好。
IDEA中如何使用Vue
热门推荐
xiaxiao520的博客
08-25 3万+
@tap @tap.stop @tap.prevent @tap.once @click @click.stop @click.prevent @click.once @change @change.lazy @change.number @change.trim v-model v-for v-text v-html v-if v-else-if v-else v-pre v-once v-bind scoped @keyup.enter :class :style v-show :key @keyup
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值