IDEA使用vue的安装与配置(详细教程)

news2025/2/27 4:57:57

在idea中使用vue首先idea的配置以及环境要搭建好,然后就按照以下操作进行就可以!(注:我使用的idea是2021.1.3 版本)

第一步

去官网下载node.js ,官网地址:https://nodejs.org/en/

然后进行安装,安装过程只需要一直点下一步就行,不需要勾选任何选项(目录可以更改,最好使用默认)

第二步

电脑打开cmd,输入 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装淘宝镜像

 

输入npm install -g @vue/cli安装脚手架

然后分别输入vue -V(这是大写的VVVVVV~~~)     node -v   和   npm -v查看相应的版本号

 (版本不一致不影响安装,可能会影响后续使用,我目前也不知道有什么影响哈哈哈哈哈)

 第三步

在此电脑随便位置创建好你需要放项目的文件夹

 

然后在cmd上进入该目录,使用 vue create xxxx创建vue项目(xxxx是你的项目名称,什么名字看个人心情,啊哈哈哈!)

 

然后进入下面的选择,Enter是确认选择,上下键是换选择,第二页的*是用空格来取消标记

 

 

 

 

 

创建好后执行蓝色提示命令运行项目

 

 等待运行好后,会出现一个地址,复制到浏览器打开,至此vue项目创建成功(恭喜你完成一半啦!!!!!!)

 

 

 第四步

打开idea,用idea打开我们刚才创建的vue项目 

然后点击 左上角的file,再点击settings(我改成了中文请忽略)

 然后选择plugins在搜索款搜Vue.js进行安装应用

 然后打开src/views/HomeView.vue,进行编辑增加以下内容(注意data前还有英文逗号,提醒粗心的小伙伴):

<h1>{{msg}}</h1>
data() {
      return {
          msg: "创建项目成功!"
      }
    }

 增加好后,回到浏览器查看

 发现图标上多了我们打进去的字!

到此安装,使用成功,更多vue的安装与问题后面文章再发。欢迎评论与指导。

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405280.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

封装一个uniapp的全局弹窗组件,vue中也可以使用,在任何页面都可以弹出

效果图&#xff1a; 场景&#xff1a; 当你对接websocket时&#xff0c;或者轮询也好&#xff0c;你需要获取到最新的信息&#xff0c;并且在任何页面弹出一个组件进行后续操作 思路&#xff1a; 1、先封装好要弹出的公共组件 2、向vue原型上挂载全局方法&#xff0c;拿到组件真…

VUE2安装步骤

一、node.js安装和配置 1.安装前&#xff0c;先看看自己电脑上有没有node.js 打开命令提示符&#xff0c;尽量选择管理员身份打开&#xff0c;或者按winR&#xff0c;输入cmd打开也行 打开后输入node -v 查看自己电脑是否安装node&#xff0c;以及版本号 node -v 我这里显示v…

vsCode中vue文件无法提示html标签

铅笔头课堂&#xff0c;有态度的前端培训 今天有同学问到老师&#xff1a;“ 老师&#xff0c;我的vue文件里书写html代码不提示了 ”&#xff0c;这个问题别说还真有点冷门&#xff0c;老师研究了一番之后终于妥善修复了这个问题&#xff0c;这里就将处理结果记录下来&#xf…

如何部署WebSpoon9.0.0(Kettle的Web版本)

前言 Kettle 是小有名气的开源ETL工具&#xff0c;现已改名为PDI&#xff08;Pentaho Data Integration&#xff09;&#xff0c;其Web版本为&#xff1a;WebSpoon&#xff0c;本文记录了从官方Git仓库中拉取代码并成功运行的过程。 一、在本地拉取并编译项目 参考来源&#…

基于Echarts实现可视化数据大屏大数据可视化

前言 &#x1f680; 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,&#xff0c;基于htmlcssjavascriptecharts制作&#xff0c; 可以在此基础上重新开发。 本项目中使用的是echarts图表库&#xff0c;ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图&…

flex 的 三个参数:flex-grow、flex-shrink、flex-basis

前言&#xff1a; 之前对于 flex 布局没有太深刻的理解&#xff0c;往往就只是给 父元素加上 display&#xff1a;flex 属性&#xff0c;在近期学习的过程中了解到 flex 属性是 flex-grow、flex-shrink、flex-basis 三个属性的缩写&#xff0c;来看下面这一个例题&#xff0c…

基于Java Web的图书管理系统

目录 1.系统简要概述 2.系统主要用到的数据库表 3.主要功能 管理员&#xff1a; 用户&#xff1a; 3.1管理员功能 3.11登录 3.12添加学生 3.13查看学生 3.14删除学生 3.15添加书籍 3.16查看书籍 3.2用户端功能 3.2.1登录 3.2.2注册 3.2.3查询图书 3.2.4借阅书籍…

前端实现分页效果

前言 在实际开发中&#xff0c;大部分分页都是配合后端完成的。但是&#xff0c;有时候并不是这样&#xff0c;并非不是这样。后端会一次性返回所有的数据&#xff0c;而我们前端不可能展示所有数据&#xff0c;而是弄一个分页效果。还有一些场景也是需要前端自己弄的分页&…

JavaWeb项目(登录注册页面)全过程详细总结

JavaWeb项目(登录注册页面)全过程总结 文章目录JavaWeb项目(登录注册页面)全过程总结一、环境准备与开发工具二、创建 JavaWeb 项目2.1 新建Dynamic Web Project项目2.2 创建前端页面2.2.1 登录页面1.login.jsp2. login.js3. time.js4. focus.js animate.js2.2.2 注册页面&…

如何使用nvm切换npm版本

我比较懒惰,如非必要,不喜欢npm版本切换来切换去,感觉浪费我编程的时间.后来发现,现在偷的懒都是为将来的忙碌埋下的祸根. 言归正传,本文主要是讲解一下,如何使用nvm进行npm版本的切换. 工欲善其事必先利其器,我们先下载nvm;直接上下载链接(针对windows哈,毕竟我没mac本); 下载…

前端开发工程师简历

简历是什么 找工作之前投递的个人信息和工作能力----不全面 应该是&#xff1a;个人当前阶段的价值体现 前者&#xff1a;我能卖多少钱&#xff1b;后者&#xff1a;我现在值多少钱 建议&#xff1a;每隔半年/一年给自己做总结的时候写一份简历&#xff08;相当于个人价值总结…

render函数

render函数 通常我们都会把我们的页面结构逻辑都写在 template 中&#xff0c;然后再通过vue将我们的代码转换成虚拟DOM&#xff0c;相比于真实DOM&#xff0c;虚拟DOM是通过js代码处理的&#xff0c;所以消耗的性能相对较小&#xff0c;当然大部分情况下使用 template 创建我…

(详解)Vue设置select下拉框的默认选项(解决select空白的bug)

最近在用vue设置表单数据时发现了一个小问题&#xff1a;用vue动态渲染select下拉框时&#xff0c;select下拉框会出现空白的bug。 <template><div><select name"art-cate" v-model"select"><option disabled selected style"d…

Vue项目启动出现的问题及解决方法

今天在公司入职第二天&#xff0c;昨天拉下来的代码没有跑起来&#xff0c;看了各种博客也没有解决这个报错 今天一大早来公司&#xff0c;捋了一下顺序 ①删除要启动项目里的 node_modules 文件夹&#xff0c;这是vue项目的依赖包。 因为“node_modules”文件夹太大&#x…

《Vue插件》瀑布流插件vue-masonry的使用与踩坑记录

这是一个没有套路的前端博主&#xff0c;热衷各种前端向的骚操作&#xff0c;经常想到哪就写到哪&#xff0c;如果有感兴趣的技术和前端效果可以留言&#xff5e;博主看到后会去代替大家踩坑的&#xff5e; 主页: oliver尹的主页 格言: 跌倒了爬起来就好&#xff5e; 《Vue插件…

Moment.js的基本使用

一、Moment.js的简介 Moment.js是一个轻量级的JavaScript时间库&#xff0c;以前我们转化时间&#xff0c;都会进行很复杂的操作&#xff0c;而Moment.js的出现&#xff0c;简化了我们开发中对时间的处理&#xff0c;提高了开发效率。日常开发中&#xff0c;通常会对时间进行下…

React面试题最全

1.什么是虚拟DOM&#xff1f; 虚拟DOM是真实DOM在内存中的表示&#xff0c;ul的表示形式保存在内存中&#xff0c;并且与实际的DOM同步&#xff0c;这是一个发生在渲染函数被调用和元素在屏幕上显示的步骤&#xff0c;整个过程被称为调和 2.类组件和函数组件之间的区别是什么…

【uni-app】小程序实现微信在线聊天(私聊/群聊)

之前学习使用uni-app简单实现一个在线聊天的功能&#xff0c;今天记录一下项目核心功能的实现过程。页面UI以及功能逻辑全部来源于微信&#xff0c;即时聊天业务的实现使用socket.io&#xff0c;前端使用uni-app开发&#xff0c;后端服务器基于node实现&#xff0c;数据库选择m…

vue3生命周期及setup介绍

&#x1f337; 生命周期 下图对比了vue3&#xff08;左&#xff09;和vue2&#xff08;右&#xff09;的生命周期&#xff1a;vue3将destoryed该名成了unmounted&#xff0c;相应的beforeDestory改成了beforeUnmounted。除此之外在组合式API中新增了个钩子函数&#xff1a;set…

vue项目:大屏自适应解决方案(两种)

css缩放方案&#xff1a; 利用transform&#xff1a;scale 进行适配 推荐使用v-scale-screen 值得注意的是&#xff1a; vue 2.6、2.7 要使用 npm install v-scale-screen1.0.2 vue3&#xff1a;要使用v-scale-screen版本 npm install v-scale-screen2.0.0 用法&#x…