当前位置:网站首页 > Vue.js开发 > 正文

vue3怎么安装(vue3安装及环境配置)



  • 版本 :
  • 版本 :
  • 系统 :
  • :

首先,我们需要安装Node.Js。Node.js提供了运行 JavaScript 代码的环境。并且Node.js 带来了 npm,它是JavaScript世界的包管理工具。开发vue时,可以使用 npm 来安装、管理和共享各种依赖。

安装Node.js时,npm会作为默认包管理工具一同安装。

打开命令行,运行如下代码,创建一个新的vue项目

 
  

会有一些可选项,这里我们可以选择使用TypeScript

 
  

新建完成后,进入项目根目录

 
  

安装项目所需依赖

 
  

运行项目

 
  

这里时候,我们可以看到这个URL

在这里插入图片描述

复制这个URL到浏览器,可以看到如下画面,说明项目启动成功了

在这里插入图片描述

4.1 安装VSCode

下载地址 : https://code.visualstudio.com/

4.2 安装插件

这是个官方的vue插件,支持语法高亮、代码提示、代码模板等功能

在这里插入图片描述

4.3 修改为IntelliJ的快捷键

具体看这篇文章 : visual studio code-webstorm的快捷键映射_webstorm按钮映射应该选什么-CSDN博客

pkWTSeS.md.png

Chrome浏览器下载地址 : https://www.google.cn/intl/zh-CN/chrome/

5.1 Chrome安装Vue插件

进入这个网站 : 极速插件 : 安装Chrome插件,下载插件,并解压。
进入页面,开启开发者模式。
将解压后的插件拖入页面,安装完成。

具体详见这篇文章 : 下载、编译、安装、使用 vue-devtools

vue.js devtools插件的作用
安装完成后,就可以在Chrome的开发者工具里看到这一项了。
可以用来看 应用程序中所有组件的层级关系和状态,以及还有很多方便开发调试的功能。

在这里插入图片描述

5.2 chrome 移动端页面调试

在Chrome中,点击F12,进入如下页面,通过点击Toggle device toolbar,切换至移动Web调试模式。

在这里插入图片描述
具体详见 : chrome 移动Web H5 调试

到此这篇vue3怎么安装(vue3安装及环境配置)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • pcie4.0固态什么时候降价(pcie4.0固态硬盘价格)2025-06-05 23:00:05
  • vue3.0父子组件传值(vue中的父子组件传值)2025-06-05 23:00:05
  • vue路由守卫用法(vue的路由守卫有什么应用场景)2025-06-05 23:00:05
  • ubuntu20.04更新源(ubuntu更新源有什么用)2025-06-05 23:00:05
  • js深拷贝实现方式(js深拷贝json parse)2025-06-05 23:00:05
  • vue2和vue3区别大吗(vue2与vue3的区别)2025-06-05 23:00:05
  • vue父子组件的传值(vue父子组件传值v-model)2025-06-05 23:00:05
  • vue2生命周期啥时候做(vue生命周期分别做了什么)2025-06-05 23:00:05
  • vue路由跳转报错(vue2路由跳转)2025-06-05 23:00:05
  • 安装node环境 vue npm(node安装vuecli)2025-06-05 23:00:05
  • 全屏图片