VUE3初学入门-02-VUE创建项目

创建VUE项目的另一个方法

  • 三种方法
    • 通过vue-cli进行创建
    • 通过npm进行创建
    • 比较
  • 部署到nginx
    • 修改配置
    • 生成部署文件

三种方法

上一篇是在VSCODE中建立工作区,然后创建,属于命令加鼠标方式。个人感觉,在VSCODE基本上都是这样的操作,不是说没有完全的鼠标操作,但在实际应用中,还是感觉命令方便一些。

在VSCODE中个人习惯是默认不打开上次工作文件夹,默认欢迎界面上会显示历史的几个项目,所以有兴趣的可以改一下配置
在这里插入图片描述
这种情况下,VSCODE打开后,会显示一个欢迎的界面。此时,点击打开文件夹,然后在对话框里创建新的文件夹即可,当然,Ctrl+Shift+`打开终端也是可以的,只不过默认是user目录,假如工作分区是在E盘,需要切换一下,操作方法自己可以感觉一下,找到自己习惯的方式。我使用的是终端,然后通过命令操作,这样在创建VUE项目时会自动创建文件夹,然后再点击打开即可。

PS C:\Users\yuandll> cd E:\_work\vsCodeWork\TestVue3\
PS E:\_work\vsCodeWork\TestVue3>     

通过vue-cli进行创建

vue-cli创建vue项目首先我们需要全局安装一下,如果安装了,就直接使用vue create创建项目

PS E:\_work\vsCodeWork\TestVue3>npm install -g @vue/cli
PS E:\_work\vsCodeWork\TestVue3>vue create 项目名

提示三个选项,前两个是默认的,第三个是选择指定的方式。(上下键盘选择,回车确认)
在这里插入图片描述
本例使用第三个:
在这里插入图片描述

  • Bibel:
  • Router:单页面应用(使用路由方式)
  • linter:代码检查工具,对代码进行静态分析,发现代码中的潜在错误。常见的检查工具:ESLint(用于检查 js 代码)、stylelint(用于检查 css 代码)、commitlint(用于检查 git 提交信息)
  • formatter: 格式化工具,用于统一编码风格。常用的是Prettier(用于格式化文件,支持多种格式的文本文件)

更多配置说明可以参考

选择VUE版本在这里插入图片描述
确认使用路由模式
在这里插入图片描述
确认检查工具
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

在这里插入图片描述

此时还不能看到代码,选择打开文件夹
在这里插入图片描述
我使用的是工作区,可以添加到工作区
在这里插入图片描述

通过npm进行创建

同前一篇一样,这边再简述一下,方便对比

PS E:\_work\vsCodeWork\TestVue3>npm create vue@latest

在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

比较

npm生成的项目是vite。生成的文件略有差别,会对配置有些影响,其他影响不大。
在这里插入图片描述

部署到nginx

如果放在nginx根目录下,一个项目时不需要配置vue项目,但是如果放了多个vue项目的话,vue需要进行配置

修改配置

vue-cli方式:修改vue.config.js,增加路径
在这里插入图片描述
vite方式:修改vite.config.js
在这里插入图片描述

生成部署文件

使用build生成部署文件,将dist目录下的文件复制到nginx的html目录下。可以使用http://localhost/my010来进行访问

npm run build

在这里插入图片描述

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

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

相关文章

Superset超火的企业级可视化BI分析工具

Superset,听起来就像是超级集合,确实,它几乎集合了所有你需要的数据功能。简单说,它就是一个现代化、功能强大的数据可视化工具。 它支持各种数据库,有着丰富的可视化选项,可以用来创建漂亮的数据仪表盘&a…

【PYG】GNN和全连接层(FC)分别在不同的类中,使用反向传播联合训练,实现端到端的训练过程

文章目录 基本步骤GNN和全连接层(FC)联合训练1. 定义GNN模型类2. 定义FC模型类3. 训练循环中的联合优化解释完整代码 GNN和全连接层(FC)分别使用不同的优化器和学习率分别进行参数更新解释 基本步骤 要从GNN(图神经网…

【JavaScript脚本宇宙】从实用工具到日期处理:深度解析JavaScript库的应用与优势

提升JavaScript开发效率利器大揭秘:6款神奇库全面解析 前言 JavaScript已成为前端开发中不可或缺的一部分。随着项目变得越来越复杂,使用模块加载库可以帮助我们更好地管理和组织代码。本文将介绍几个常用的 JavaScript 模块加载库,包括 Re…

Sklearn 入门案例教程

Sklearn 的基本概念 1.什么是 Sklearn?:Sklearn 是一个 Python 库,用于机器学习和数据科学的开发。 2.Sklearn 的组件:Sklearn 的组件包括机器学习算法、数据预处理、模型评估等。 3.Sklearn 的应用:Sklearn 的应用包…

Python面试宝典第6题:有效的括号

题目 给定一个只包括 (、)、{、}、[、] 这些字符的字符串,判断该字符串是否有效。有效字符串需要满足以下的条件。 1、左括号必须用相同类型的右括号闭合。 2、左括号必须以正确的顺序闭合。 3、每个右括号都有一个对应的相同类型的左括号。 注意:空字符…

Java中的异常处理与断路器模式

Java中的异常处理与断路器模式 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿! 在软件开发过程中,异常处理是确保程序稳定性和可靠性的关键部分。J…

2-Protocol Buffer 基础(c++)

本教程提供了使用协议缓冲区的基本介绍。通过逐步创建一个简单的示例应用程序,介绍以下内容: 1.在.proto文件中定义消息格式。 2.使用 protocol buffer 编译器。 3.使用c protocol buffer API来写入和读取消息。 一、问题描述 将要使用的示例是…

Xilinx FPGA:vivado串口输入输出控制fifo中的数据

一、实验要求 实现同步FIFO回环测试,通过串口产生数据,写入到FIFO内部,当检测到按键信号到来,将FIFO里面的数据依次读出。 二、信号流向图 三、状态转换图 四、程序设计 (1)按键消抖模块 timescale 1ns…

python-django-LlamaIndex 精简版

🚀 一键安装LlamaIndex, pip install llama-index 📁 准备你的数据文件,无论是txt还是pdf,放入data文件夹,一切就绪。 🔧 简单几步,在views.py中集成LlamaIndex,代码如…

读书笔记-《魔鬼经济学》

这是一本非常有意思的经济学启蒙书,作者探讨了许多问题,并通过数据找到答案。 我们先来看看作者眼中的“魔鬼经济学”是什么,再选一个贴近我们生活的例子进行阐述。 01 魔鬼经济学 中心思想:假如道德代表人类对世界运转方式的期…

uniapp实现一个键盘功能

前言 因为公司需要&#xff0c;所以我.... 演示 代码 键盘组件代码 <template><view class"keyboard_container"><view class"li" v-for"(item, index) in arr" :key"index" click"changArr(item)" :sty…

初学Spring之 AOP 面向切面编程

AOP&#xff08;Aspect Oriented Programming&#xff09;面向切面编程 通过预编译方式和运行期间动态代理实现程序功能的统一维护的一种技术 是面向对象&#xff08;OOP&#xff09;的延续 AOP 在 Spring 中的作用&#xff1a; 1.提供声明式事务 2.允许用户自定义切面 导…

Objects365数据集介绍

Objects365数据集介绍 什么是Objects365数据集&#xff1f;数据集的规模与内容数据集的特点数据集下载 什么是Objects365数据集&#xff1f; Objects365是一个大规模、高质量的物体检测数据集。该数据集旨在推动物体检测技术的发展&#xff0c;特别是在真实世界场景下的应用。O…

Python 学习之机器学习库(九)

Python的机器学习库种类繁多&#xff0c;每个库都有其独特的特性和应用场景。以下是一些主要的Python机器学习库&#xff0c;按照其功能和特点进行清晰归纳和分点表示&#xff1a; 1. NumPy ● 功能&#xff1a;NumPy是Python中用于科学计算的基础库&#xff0c;提供了高性能的…

【python】python当当数据分析可视化聚类支持向量机预测(源码+数据集+论文)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

基于java+springboot+vue实现的校园外卖服务系统(文末源码+Lw)292

摘 要 传统信息的管理大部分依赖于管理人员的手工登记与管理&#xff0c;然而&#xff0c;随着近些年信息技术的迅猛发展&#xff0c;让许多比较老套的信息管理模式进行了更新迭代&#xff0c;外卖信息因为其管理内容繁杂&#xff0c;管理数量繁多导致手工进行处理不能满足广…

数据库SQL Server窗口函数、聚合函数

文章目录 窗口函数窗口函数分类窗口函数示例聚合函数示例注意事项 流水表提取最新状态 窗口函数 SQL Server中的窗口函数&#xff08;也称为分析函数&#xff09;是一组非常强大的SQL功能&#xff0c;**它们允许你在结果集的行上执行计算&#xff0c;而不需要将结果集分组为多…

React-tive优质开源项目

对于初学者来说&#xff0c;接触和学习React相关的优质开源项目是一个非常好的方式来提升编程技能&#xff0c;特别是对于理解React的实际应用和最佳实践。这里推荐几个React开源项目&#xff0c;它们通常会附带详细的文档和示例代码&#xff0c;帮助新手快速上手&#xff1a; …

Java中如何实现线程池的生命周期管理

1、创建线程池 使用Executors工厂类或者ThreadPoolExecutor的构造函数来创建线程池。通常&#xff0c;推荐直接使用ThreadPoolExecutor构造函数来明确指定线程池的参数&#xff0c;如核心线程数、最大线程数、空闲线程存活时间、工作队列等。 2、执行任务 通过调用线程池的s…

使用Charles mock服务端响应数据

背景 服务端未提供接口/服务端接口返回结果有逻辑限制&#xff08;次数限制&#xff09;&#xff0c;不能通过原始接口返回多次模拟预期的返回结果&#xff0c;例如边界值情况 客户端受到接口响应数据的限制&#xff0c;无法继续开发或测试&#xff0c;会极大影响开发测试效率…