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

news2024/11/27 6:18:40

创建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.coloradmin.cn/o/1903451.html

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

相关文章

C++模板元编程(一)——可变参数模板

这个系列主要记录C模板元编程的常用语法 文章目录 引言语法应用函数模板可变参数的打印可变参数的最小/最大函数 类模板 参考文献 引言 在C11之前,函数模板和类模板只支持含有固定数量的模板参数。C11增强了模板功能,允许模板定义中包含任意个(包括0个)…

Pytorch 实践手写数字识别深度学习网络 LeNet-5

Pytorch 实践手写数字识别深度学习网络 LeNet-5 文章目录 Pytorch 实践手写数字识别深度学习网络 LeNet-5认识 LeNet-5认识数据集处理数据集下载数据集读取数据定义Dataset的继承类把数据进行载入载入dataloader 编写网络编写训练与测试代码实践结果展示完整代码 训练手写体识别…

什么是反射?

什么是反射? 1、反射的基本概念2、 获取Class对象3、获取类的成员变量、方法和构造方法3.1 获取成员变量3.2 获取方法3.3 获取构造方法3.4 动态调用方法 4、反射的优缺点 💖The Begin💖点点关注,收藏不迷路💖 反射&…

Unity3D 转换微信小游戏指引 02

Unity3D 转换微信小游戏指引系列(第二期) 云开发 当小游戏打包后的首包占用内存比较大(大约是 14M 左右),首包资源加载方式就不能选择小游戏包内了。 这时就需要购买服务器,把首包放到服务器上&#xff…

Drools开源业务规则引擎(二)- Drools规则语言(DRL)

文章目录 1.DRL文件的组成:2.package3.import4.function5.query6.declare7.global8.rule8.1.规则属性8.2.LHS8.2.1.语法格式8.2.2.运算符优先级8.2.3.特殊的运算符1.matches, not matches2.contains, not contains3.memberOf, not memberOf4.in, notin5.soundslike6…

尚品汇-(十三)

&#xff08;1&#xff09;查询sku列表 在ManageService 中添加 /*** SKU分页列表* param pageParam* return*/ IPage<SkuInfo> getPage(Page<SkuInfo> pageParam);接口实现类 Override public IPage<SkuInfo> getPage(Page<SkuInfo> pageParam) {Qu…

STM32-01 推挽输出-点亮LED

本文以STM32中点亮LED为例&#xff0c;解读推挽输出的原理 推挽输出介绍 所谓的推挽输出&#xff0c;就是通过控制输出控制模块&#xff0c;打开或者关闭P-MOS或者N-MOS。 ─ 推挽模式下&#xff1a;输出寄存器上的’0’激活N-MOS&#xff0c;而输出寄存器上的’1’将激活P-M…

IDEA与通义灵码的智能编程之旅

1 概述 本文主要介绍在IDEA中如何安装和使用通义灵码来助力软件编程,从而提高编程效率,创造更大的个人同企业价值。 2 安装通义灵码 2.1 打开IDEA插件市场 点击IDEA的设置按钮,下拉选择Plugins,如下: 2.2 搜索通义灵码 在搜索框中输入“通义灵码”,如下: 2.3 安…

74HC165芯片验证

目录 0x01 74HC165芯片介绍0x02 编程实现 0x01 74HC165芯片介绍 74HC165的引脚定义如下&#xff0c;长这个样子 ABCDEFGH是它的八个输入引脚&#xff0c;例如你可以将它连接按键&#xff0c;让它来读取8个按键值。也可以将他级联其它的74165&#xff0c;无需增加单片机GPIO引…

Apache Seata Mac下的Seata Demo环境搭建

本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 Mac下的Seata Demo环境搭建&#xff08;AT模式&#xff09; 前言 最近因为工作需要&#xf…

强化学习的数学原理:时序差分算法

概述 之前第五次课时学习的 蒙特卡洛 的方法是全课程当中第一次介绍的第一种 model-free 的方法&#xff0c;而本次课的 Temporal-Difference Learning 简称 TD learning &#xff08;时序差分算法&#xff09;就是第二种 model-free 的方法。而对于 蒙特卡洛方法其是一种 non…

DropNotch for Mac v1.0.1 在 Mac 刘海快速使用 AirDrop

应用介绍 DropNotch 是一款专为Mac设计的应用程序&#xff0c;可以将MacBook的凹口区域&#xff08;刘海&#xff09;转换为文件放置区。 功能特点 文件共享: 用户可以将文件拖放到MacBook的凹口区域&#xff0c;并通过AirDrop、邮件、消息等方式轻松共享。多显示器支持: 即…

【经验篇】Spring Data JPA开启批量更新时乐观锁失效问题

乐观锁机制 什么是乐观锁&#xff1f; 乐观锁的基本思想是&#xff0c;认为在大多数情况下&#xff0c;数据访问不会导致冲突。因此&#xff0c;乐观锁允许多个事务同时读取和修改相同的数据&#xff0c;而不进行显式的锁定。在提交事务之前&#xff0c;会检查是否有其他事务…

3.js - 裁剪场景(多个scence)

不给newScence添加background、environment时 给newScence添加background、environment时 源码 // ts-nocheck// 引入three.js import * as THREE from three// 导入轨道控制器 import { OrbitControls } from three/examples/jsm/controls/OrbitControls// 导入lil.gui impor…

leetcode每日一题-3033. 修改矩阵

题目描述&#xff1a; 解题思路&#xff1a;简单题目&#xff0c;思路非常直接。对列进行遍历&#xff0c;记录下最大值&#xff0c;然后再遍历一遍&#xff0c;把-1替换为最大值。需要注意的是进行列遍历和行遍历是不同的。 官方题解&#xff1a; class Solution { public:v…

工控人最爱的PLC触摸屏一体机,有多香

PLC触摸屏一体机是什么 PLC触摸屏一体机&#xff0c;听起来可能有点技术化&#xff0c;但简单来说&#xff0c;它就是一个集成了可编程逻辑控制器&#xff08;PLC&#xff09;和触摸屏的智能设备。这种设备不仅能够执行自动化控制任务&#xff0c;还能实时显示和操作设备状态&a…

作业训练二编程题3. 数的距离差

【问题描述】 给定一组正整数&#xff0c;其中最大值和最小值分别为Max和Min, 其中一个数x到Max和Min的距离差定义为&#xff1a; abs(abs(x-Max)-(x-Min)) 其中abs()为求一个数的绝对值 【输入形式】 包括两行&#xff0c;第一行一个数n&#xff0c;表示第二行有n个正整数…

如何在PD虚拟机中开启系统的嵌套虚拟化功能?pd虚拟机怎么用 Parallels Desktop 19 for Mac

PD虚拟机是一款可以在Mac电脑中运行Windows系统的应用软件。使用 Parallels Desktop for Mac 体验 macOS 和 Windows 的最优性能&#xff0c;解锁强大性能和无缝交互。 在ParallelsDesktop&#xff08;PD虚拟机&#xff09;中如何开启系统的嵌套虚拟化功能&#xff1f;下面我们…

新手教学系列——前后端分离API优化版

在之前的文章《Vue 前后端分离开发:懒人必备的API SDK》中,我介绍了通过Object对象自动生成API的方法。然而,之前的代码存在一些冗余之处。今天,我将分享一个改进版本,帮助你更高效地管理API。 改进版API SDK 首先,让我们来看一下改进后的代码: import request from …

华为OD机试 - 来自异国的客人(Java 2024 D卷 100分)

华为OD机试 2024D卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;D卷C卷A卷B卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测…