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

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vue3中svg图标的封装与使用

组件封装&#xff1a; <template><svg :class"svgClass" :style"{ width: size px, height: size px, color: color, verticalAlign:deviationem}" aria-hidden"true"><use :xlink:href"#icon-${name}" /></s…

Python编程学习笔记(2)--- 列表简介

1、列表是什么 列表由一系列按特定顺序排列的元素组成。可以创建包含字母表中所有字母、数字、0~9或所有家庭成员姓名的列表&#xff1b;也可以将任何东西加入列表中&#xff0c;其中的元素之间可以没有任何关系。列表通常包含多个元素&#xff0c;因此给列表指定一个表示复数…

基于SSM+JSP的KTV点歌系统(带1w+文档)

基于SSMJSP的KTV点歌系统(带1w文档) 开发一个KTV点歌系统可以解决不利于线下点歌的问题&#xff0c;同时管理员可以利用网络对KTV点歌系统信息进行管理&#xff0c;设计的网站保证信息的完整安全&#xff0c;这样才能提高工作效率&#xff0c;保证系统安全正常的运行。 项目简介…

vim未找到命令,且yum install vim安装vim失败

vim未找到命令&#xff0c;且yum安装vim失败 1、wget更新yum云资源&#xff0c;本次更新为华为云镜像资源 wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.huaweicloud.com/repository/conf/CentOS-7-anon.repowget报未找到命令&#xff0c;请查看文章Linux wget…

iOS UITableView自带滑动手势和父视图添加滑动手势冲突响应机制探索

场景 我们有时候会遇到这样的一个交互场景&#xff1a;我们有一个UITableView 放在一个弹窗中&#xff0c;这个弹窗可以通过滑动进行展示和消失&#xff08;跟手滑动的方式&#xff09;&#xff0c;然后这个UITableView放在弹窗中&#xff0c;并且可以滚动&#xff0c;展示一些…

昇思25天学习打卡营第19天|Diffusion扩散模型

学AI还能赢奖品&#xff1f;每天30分钟&#xff0c;25天打通AI任督二脉 (qq.com) Diffusion扩散模型 本文基于Hugging Face&#xff1a;The Annotated Diffusion Model一文翻译迁移而来&#xff0c;同时参考了由浅入深了解Diffusion Model一文。 本教程在Jupyter Notebook上成…

Python数据分析案例50——基于EEMD-LSTM的石油价格预测

案例背景 很久没更新时间序列预测有关的东西了。 之前写了很多CNN-LSTM&#xff0c;GRU-attention&#xff0c;这种神经网络之内的不同模型的缝合&#xff0c;现在写一个模态分解算法和神经网络的缝合。 虽然eemd-lstm已经在学术界被做烂了&#xff0c;但是还是很多新手小白或…

RAG 案框架(Qanything、RAGFlow、FastGPT、智谱RAG)对比

各家的技术方案 有道的QAnything 亮点在&#xff1a;rerank RAGFLow 亮点在&#xff1a;数据处理index 智谱AI 亮点在文档解析、切片、query改写及recall模型的微调 FastGPT 优点&#xff1a;灵活性更高 下面分别按照模块比较各框架的却别 功能模块QAnythingRAGFLowFastG…

MPC学习资料汇总

模型预测控制MPC学习资料汇总 需要的私信我~ 需要的私信我~ 需要的私信我~ 【01】课件内容 包含本号所有MPC课程的课件&#xff0c;以及相关MATLAB文档。 【02】课件源代码 本号所有MPC课程的源代码。 【03】MPC仿真案例 三个MPC大型仿真案例&#xff1a; 1&#xff09;…

力扣爆刷第160天之TOP100五连刷66-70(回溯、旋转图像、技巧题)

力扣爆刷第160天之TOP100五连刷66-70&#xff08;回溯、旋转图像、技巧题&#xff09; 文章目录 力扣爆刷第160天之TOP100五连刷66-70&#xff08;回溯、旋转图像、技巧题&#xff09;一、110. 平衡二叉树二、39. 组合总和三、543. 二叉树的直径四、470. 用 Rand7() 实现 Rand1…

win系统提示VCRUNTIME140_1.dll丢失或找不到的8个处理方法

在使用电脑过程中经常会遇到各种各样的问题&#xff0c;比如vcruntime140_1.dll丢失或找不到vcruntime140_1.dll无法继续执行代码就是其中的一个常见问题!那么遇到vcruntime140_1.dll丢失问题要怎么处理&#xff1f;vcruntime140_1.dll是什么&#xff1f;下面我给大家详细介绍v…

谷粒商城学习笔记-16-人人开源搭建后台管理系统

文章目录 一&#xff0c;克隆前/后端代码1&#xff0c;克隆前端工程renren-fast-value2&#xff0c;克隆后端工程renren-fast 二&#xff0c;集成后台管理系统的后端代码三&#xff0c;启动后台管理系统四&#xff0c;前端系统的安装和运行1&#xff0c;下载安装VSCode2&#x…

Crossformer_Transformer

文章目录 摘要1 引言2 相关工作多变量时间序列预测基于Transformer的MTS预测视觉Transformers 3 方法详细解释 3.1 维度-分段-方式嵌入3.2 两阶段注意力层跨时间阶段跨维度阶段 3.3 分层编码器-解码器编码器解码器 摘要 最近&#xff0c;许多深度模型被提用于多变量时间序列&a…

Pyserial设置缓冲区大小失败

文章目录 问题描述原因分析解决方案 问题描述 使用set_buffer_size()设置缓冲区大小后&#xff0c;buffer size仍为默认的4096 import time import serial ser serial.Serial(baudrate9600, timeout0.5) ser.port COM1 ser.set_buffer_size(rx_size8192) ser.open() while …

无线传感器网络(物联网通信技术)期末考试2024年真题

目录 WSN期末复习资料 第一章&#xff1a;概述 第二章MAC协议 第三章路由协议 第四章时间同步技术 第五章定位技术 第六章安全技术 第七章拓扑控制 补充TPSN、HRTS公式推导 2024年期末考试考点 一、简述 二、考试真题回忆 WSN期末复习资料 第一章&#xff1a;概述 …

基于SpringBoot的校园台球厅人员与设备管理系统

本系统是要设计一个校园台球厅人员与设备管理系统&#xff0c;这个系统能够满足校园台球厅人员与设备的管理及用户的校园台球厅人员与设备管理功能。系统的主要功能包括首页、个人中心、用户管理、会员账号管理、会员充值管理、球桌信息管理、会员预约管理、普通预约管理、留言…

15集终于编译成功了-了个球!编译TFLite Micro语音识别工程-《MCU嵌入式AI开发笔记》

15集终于编译成功了-个球&#xff01;编译TFLite Micro语音识别工程-《MCU嵌入式AI开发笔记》 还是参考这个官方文档&#xff1a; https://codelabs.developers.google.cn/codelabs/sparkfun-tensorflow#2 全是干货&#xff01; 这里面提到的这个Micro工程已经移开了&#xff1…

第一节 网络安全概述

一.网络空间安全 网络空间&#xff1a;一个由信息基础设施组成相互依赖的网络。 ---- 海陆空天&#xff08;大海、陆 地、天空、航天&#xff09; 通信保密阶段 ---- 计算机安全 ----- 信息系统安全 ----- 网络空间安全 计算机安全&#xff1a;开始秉持着“严于律己&#x…

数据结构速成--图

由于是速成专题&#xff0c;因此内容不会十分全面&#xff0c;只会涵盖考试重点&#xff0c;各学校课程要求不同 &#xff0c;大家可以按照考纲复习&#xff0c;不全面的内容&#xff0c;可以看一下小编主页数据结构初阶的内容&#xff0c;找到对应专题详细学习一下。 目录 …

设计模式之状态机模式

一、状态机模式介绍 状态机模式&#xff08;State Machine Pattern&#xff09;是一种用于描述对象行为的软件设计模式&#xff0c;属于行为型设计模式。在状态机模式中&#xff0c;对象的行为取决于其内部状态&#xff0c;并且在不同的状态下&#xff0c;对象可能会有不同的行…