两周掌握Vue3(一):安装、打包、目录结构

文章目录

  • 一、安装
    • 1.安装node.js和npm(windows)
    • 2.安装vue,创建vue项目
    • 报错:XXX不是内部或外部命令
  • 二、打包
  • 三、目录结构

nodejs版本:v20.10.0
npm版本:v10.2.3

一、安装

1.安装node.js和npm(windows)

  1. 访问Node.js官方网站(https://nodejs.org)。

  2. 在Node.js官方网站的首页,你会看到一个"下载"按钮。点击这个按钮,网站会自动检测你的操作系统,并推荐适合你的Node.js版本。如果没有自动检测到,你可以手动选择适合你系统的版本。

  3. 下载完成后,双击下载的安装程序(通常是一个 .msi 文件),然后按照提示进行安装。在安装过程中,你可以选择安装Node.js的版本和安装路径等选项。

  4. 完成安装后,你可以在命令行中输入以下命令来检查Node.js和npm的版本,以确保安装成功:

node -v
npm -v
  1. 配置cache和global路径:
    D:\setup\node是我的nodejs安装目录
npm config set cache D:\setup\cache --global
npm config set prefix D:\setup\node --global
  1. 安装比npm更快的cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org

2.安装vue,创建vue项目

  • 安装依赖:
cnpm install -g @vue/cli
  • 创建项目:

进入目录后vue create vue-app,然后按照提示进行操作。

  • 安装依赖:
cd vue-app
npm install
  • 启动:
npm run serve

然后去浏览器访问给定的url:

在这里插入图片描述

报错:XXX不是内部或外部命令

解决:https://blog.csdn.net/u012069313/article/details/124725571

二、打包

在vue-app目录下执行命令进行打包:

npm run build

然后目录中会多一个dist文件夹,就是打包后的东西都在这里面。

index.html需要修改一下,这几个地方默认是写的绝对路径,都改成相对路径:

在这里插入图片描述

然后在浏览器中打开index.html,成功访问:

在这里插入图片描述

三、目录结构

在这里插入图片描述

  • dist 打包生成的目录。
  • node modules 存放依赖包的目录。
  • public 公共资源目录。
  • src 这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
    assets: 放置一些图片,如logo等。
    components: 目录里面放了一个组件文件,可以不用。
    App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。
    main.js: 项目的核心文件。
    index.css: 样式文件。

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

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

相关文章

安科瑞电气防火限流式保护器与电动汽车充电桩的搭配使用——安科瑞 顾烊宇

摘要:随着电动汽车行业的不断发展,电动汽车充电设施的使用会变得越来越频繁和广泛。根据中汽协数据显示,2022年上半年,我国新能源汽车产销分别完成266.1万辆和260万辆,同比均增长1.2倍,市场渗透率达21.6%。因此,电动汽…

韩语发音干货,零基础韩语学习,柯桥韩语知识点之发音规律

01.连音化 当收音遇到以元音为首音的音节时,收音要和该元音相连发音。 예: 독일[도길] 밥을 [바블] 우산이[우사니] 읽어요[일거요] 02.送气 ㄱ/ㄷ/ㅂ/ㅈ遇到ㅎ,送气化读成ㅋ/ㅌ/ㅍ/ㅊ 예: 어떻게[어떠케] 좋다[조타] 많지만[만치만] 백화점[배콰…

Qt连接数据库(内含完整安装包)

遇到问题必须多思考 这里是最全的Qt连接数据库步骤 qt下载地址 链接:https://pan.baidu.com/s/1wdnTfyL9MQlNOCrSmIOxrQ?pwddgqi 提取码:dgqi --来自百度网盘超级会员V1的分享 数据库百度网盘地址 链接:https://pan.baidu.com/s/1orCczey…

GPT大模型在生物、地球、农业、气象、生态、环境科学可以应用?

以ChatGPT、LLaMA、Gemini、DALLE、Midjourney、Stable Diffusion、星火大模型、文心一言、千问为代表AI大语言模型带来了新一波人工智能浪潮,可以面向科研选题、思维导图、数据清洗、统计分析、高级编程、代码调试、算法学习、论文检索、写作、翻译、润色、文献辅助…

什么是VDA4913?

VDA 4913是VDA标准下发货通知(Despatch Advice)的报文类型代码,用于通知供应链中的相关各方有关订单发货的详细信息。这个标准化的业务单据帮助供应商、制造商和物流公司之间更加高效和准确地协作,以确保产品能够按计划准时交付&a…

【Scala】——函数式编程

1 面向对象编程和函数式编程 1.1 面向对象编程 解决问题,分解对象,行为,属性,然后通过对象的关系以及行为的调用来解决问题。 • 对象:用户 • 行为:登录、连接 JDBC、读取数据库 • 属性:用户…

Three.js 纹理贴图的实现

在线工具推荐: 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 纹理贴图简介 当我们创建一个网格时,比如我们不起眼的立…

IP定位应对恶意IP攻击:保护网络安全的新策略

随着网络攻击的日益猖獗,恶意IP攻击成为网络安全领域的一大挑战。传统的安全防护手段在应对此类攻击时显得力不从心。近年来,通过IP定位这一新技术,为应对恶意IP攻击提供了新的解决思路。 IP定位技术通过分析网络流量中的IP地址,能…

如何创建VPC并配置安全组以保护您的阿里云服务器

将您的基础架构放在云上意味着您可以接触到全球的许多人。但是,这也意味着不怀好意的人可以访问您的服务。保护您的云网络非常重要。阿里云提供虚拟专用网络 (VPC),这是一个安全隔离的私有云,将您的弹性计算服务 &…

用Python来制作一个微信聊天机器人

1. 效果展示 通过本地搭建一个flask服务器来接收信息,这里我简单使用展示,就没有对接收的信息进行处理了。 信息接收展示 发送信息展示 这里就直接使用python发送一个post请求即可,可以发送文字或者图片 代码展示 接收信息 #!/usr/bin/e…

[足式机器人]Part3 机构运动学与动力学分析与建模 Ch00-2(4) 质量刚体的在坐标系下运动

本文仅供学习使用,总结很多本现有讲述运动学或动力学书籍后的总结,从矢量的角度进行分析,方法比较传统,但更易理解,并且现有的看似抽象方法,两者本质上并无不同。 2024年底本人学位论文发表后方可摘抄 若有…

C++的一些书籍整理(个人学习)

UNIX环境高级编程(第三版) UNXI网络编程卷1 网络编程的笔记 收藏 我会了 一堆书 这个仓 数据库连接池原理介绍常用连接池介绍

《More Effective C++》学习

条款1:仔细区别 pointers 和 references 引用应该被初始化,指针可以不被初始化。不存在指向空值的引用这个事实意味着使用引用的代码效率比使用指针的要高。因为在使用引用之前不需要测试它的合法性。指针与引用的另一个重要的不同是指针可以被重新赋值…

mac环境桌面版docker错误修改daemon.json配置后,启动失败,一直卡在Docker Engine starting界面的解决方法

如下图:当桌面版docker的配置被错误的修改后,配置修改重启应用时,会一直卡在启动界面 此时需要找到mac下该桌面版docker的配置文件位置,手动修改恢复,然后重启应用。 daemon.json文件一般默认在隐藏文件夹下&#xff0…

SSL证书安装在哪?

安装SSL证书的具体步骤取决于你使用的服务器软件和操作系统。一般来说,SSL证书通常用于加密网站上的数据传输,因此安装过程主要涉及到Web服务器的配置。以下是一般步骤,但请注意这可能因你的具体环境而异。 永久免费SSL证书_永久免费https证…

一天一个设计模式---单例模式

概念 单例模式是一种创建型设计模式,其主要目的是确保一个类只有一个实例,并提供一个全局访问点。这意味着在应用程序中的任何地方,只能有一个实例存在,而不会创建多个相同类型的实例。 具体内容 单例模式通常包括以下几个要素…

Pytorch种torch.cat与torch.stack的区别

torch.cat 和 torch.stack 是 PyTorch 中用于拼接张量的两个不同的函数,它们的主要区别在于拼接的方式和创建的维度。 torch.cat: 拼接方式: torch.cat 是按照给定的维度(dim 参数)将多个张量沿着该维度拼接。在拼接的…

Unity 利用UGUI之Slider制作进度条

在Unity中使用Slider和Text组件可以制作简单的进度条。 首先在场景中右键->UI->Slider,新建一个Slider组件: 同样方法新建一个Text组件,最终如图: 创建一个进度模拟脚本,Slider_Progressbar.cs using System.C…

矿泉水除硝酸盐的方法分析

摘要:饮用水中的硝酸盐污染已成为全球性问题,对人类健康构成威胁。本文将介绍离子交换树脂技术在饮用水除硝酸盐方面的应用与优势,帮助您了解如何有效去除饮用水中的硝酸盐,保障水质安全。 正文: 一、饮用水中硝酸盐…

使用kubesphere的devops部署SpringCloud项目

devops部署SpringCloud项目 环境说明部署流程创建DevOps工程填写流水线信息创建流水线jenkinsfileDockerfiledeploy.yaml 环境说明 已经安装kubesphere的devops组件安装教程可参考官方文档:https://v3-1.docs.kubesphere.io/zh/docs/pluggable-components/devops/ 部署流程 创…