当前位置：网站首页 > IT知识 > 正文

vue3项目创建并运行

liuian 2025-01-05 18:42 117 浏览

vue搭建

准备环境

npm
node
webpack
vs code

npm

使用brew命令行进行下载安装指定版本：

brew install npm

查看版本号：

$ npm -v
8.15.0

Node

进入官网nodejs，根据自己电脑的版本进行下载安装，如果是mac电脑，可以直接使用brew命令行进行下载。
安装指定版本号：

brew install node@16

安装完成后，使用node -v的命令查看版本号，本地使用的版本是：16.15.1

$ node -v
v16.15.1

webpack

JavaScript 应用程序的静态模块打包工具

vsCode

官网根据当前系统版本直接下载安装

安装插件：

vetur：语法、语义高亮

创建一个 Vue 应用

前提：已安装 16.0 或更高版本的 Node.js

vue3官网示例步骤：

打开命令行终端
在终端cd到想要创建项目的目录，本次在桌面创建： cd Desktop
npm安装最新版本vue：npm init vue@latest
这个指令会安装并执行创建vue的项目，项目名称为：vue-demo，它是 Vue 官方的项目脚手架工具。
在安装过程中，会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

整体项目不确定是否要开启某个功能，则可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

 cd vue-demo「进入创建的项目路径下」 
 npm install
 npm run dev

目录结构解读

node_modules：所有的相关依赖的文件夹，文件夹很大，不要移动。
src：源码文件，所有的源码都在该文件夹内。
package.json：通过该文件具体看项目有哪些依赖。

更多技术文章: https://qrcode.ceba.ceshiren.com/link?from=toutiao&name=toutiao&project_id=qrcode&author=Muller

安装指定版本npm

上一篇：深入了解Npm
下一篇：手把手教你安装elasticsearch

相关推荐

谷歌在线浏览器（谷歌在线代理浏览器）: 1.打开谷歌浏览器设置，点击右上方按钮2.点击设置3.点击同步功能和Google服务4.点击登录Chrome即可手机和电脑都可以下载谷歌浏览器。登录时需要创建一个账号和邮箱，需要记住自己的账号和密码，同时手机和电脑可以同步。...; 2026-01-08 09:05 liuian

vs2019微软官网下载（microsoft visual studio官方下载）: 原因是可能您的电脑环境不符合VS2022安装要求，或者您的安装程序出现了问题。所以导致了安装失败。同时，您可以尝试重新下载安装程序，或者检查电脑所有驱动程序是否更新到最新版本，或者关闭杀毒软件等其他可...

家用无线路由器哪个好（家用无线路由器哪个好用又实惠）: 各有优劣，不能单纯的说是无线的好还是优先的好：1、有线路由器网络稳定，不会跳PING。但不能发射WiFi信号给手机上网，需要走线，受到布线约束。2、无线路由器和有线路由器最大的区别体现在和电脑的连接方...

u盘世界十大排名（u盘全球排名）: 1、首先主板支持u启动其次u盘空间足够再者将u盘进行引导式格式化，如usb-hdd模式（一般1g的u盘不能格zip模式）系统安装程序复制进u盘开机从u盘启动就行了。2、首先在U盘中安装java...

应用程序无法正常启动0xc0000006: Windows10中的0xc0000006映像错误　　这是在Windows10中修复错误映像错误0xc0000006的方法–　　【1】卸载Windows更新　　几乎每个“错误映像错误”的典型原因是...

qq空间说说怎么设置权限（qq空间说说在哪里设置权限）: 1、首先在电脑上将qq软件打开，输入账号和密码登录到qq页面上。2、接着在qq的主界面点击最上方的Z进入到个人qq空间页面。3、进入到qq到空间之后，在右上角找到齿轮的图标点击它，并选择权限设置。4、接着在左侧的空间设置里面选择评论留言防骚...; 2026-01-08 06:55 liuian

docx是什么格式的文件（docx是什么格式的文件怎么转word）: docx是Office2007之后版本使用的文本格式。设置方法如下：1、首先在电脑上面找到一份word文档，将它打开。2、打开之后，在文档上面找到文件选项，点击文件进入。3、进入之后，在屏幕的下拉菜单...

苹果笔记本pro和air哪个好（苹果笔记本air与pro哪个好）: 买苹果笔记本，买pro好，他在处理器上有一定升级。使用的是最新的处理器，所以性能表现方面会有一些优势。但是相比。它的系统比较卡顿，使用起来不是很流畅，影响日常使用，所以最好还是买后者好一些。它的性能更加稳定，各种方面都比较不错，在日常使用...; 2026-01-08 05:55 liuian

笔记本一直重启开不了机怎么办: 那就是笔记本坏掉了呀，坏掉了就去售后维修看一下呀原因及解决方法如下1.我们需要确认一下笔记本电脑是否有电。如果笔记本电脑的电量不足，就会出现无法开机的情况。此时，我们需要将电脑连接到电源插座上，充电一...

电脑不能开机是怎么回事: 电脑不能开机可能有多种原因，以下是一些常见的问题和解决方法：1.电源问题：检查电源插头是否插紧，是否有电源输出。可以尝试更换电源线或电源插头。2.内部硬件故障：电脑内部硬件出现问题可能导致电脑无法...

自家wifi取个名（自家wifi取个名推荐）

itunesstore下载安装（itunes下载安装教程）: 回答如下：是的，下载和安装应用程序需要使用iTunes帐户登录。这是为了确保您有权使用该应用程序，并且可以在需要时重新安装该应用程序。您可以使用现有的iTunes帐户或创建一个新的帐户来登录。App...

windows软件中心（win10应用中心）: windows安全中心是windows系统的一个安全综合控制面板，包含有防火墙状态提示，杀毒软件状态提示，自动更新提示等系统基本安全信息。Windows安全中心的前身是MicrosoftSecu...

苹果动态壁纸怎么设置自己的视频: 苹果图库里的视频做成动态壁纸方法如下：1/7点击Livephoto进入处理视频工具页面后，找到并点击里面的Livephoto选项。2/7选择视频在跳转的选择页面中，选择并点击一个要进行处理的视频。3/...

查看qq密码的软件（查询qq密码软件）: 可以按照如下方式进行查看：1、打开QQ安全中心应用，使用当前已有的QQ账号登录，登陆成功之后，点击页面右下角“工具箱”图标；2、接下来，在打开的页面中，点击“修改密码”菜单；3、最后，在打开的修改密码页面中，在网页中直接输入新的密码，点击“...; 2026-01-08 02:05 liuian

一周热门

最近发表

首页
收录
顶部