当前位置: 首页 > news >正文

Javaweb学习之Vue项目的创建(二)

学习资料

Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

准备工作都做完了,接下来开始Vue的正式学习。

第一步,打开VS Code

在VS Code里,我们也需要使用到终端,如果不是以管理员身份打开,在新建Vue项目的时候会报错。 

可以在盘内建立一个Vue学习的文件夹,接下来的Vue项目都放这个文件夹里面。

右键点击自己Vue目录下的项目存储文件,选择在集成终端中打开。在VS Code的右侧就会弹出终端的框。此时,我们就可以在这里面输入指令创建Vue项目。

 Vue项目创建

接下来的指令都将在终端中进行。注意:由于每个博主学习的资源可能不一样,所以在一些选择上面会有差别。大家可以多找几篇博客学习以下。

输入以下指令,回车。

vue create 自己项目的名字(注意,这个名字是不可以出现大写字母的,需要连结可以使用-符号)

 如果之前的环境配置没有问题的话,接下来会弹出这个选择。

1表示使用已经配置好工具的Vue3框架,2表示使用已经配置好工具的Vue2框架,3表示使用自定义框架。这里我们选择3。箭头号指向什么,表示当前的选择就是什么。我们使用向下的按键选择模式3回车确认。 

 

 在这里大家可以根据自己的需要手动选择特征,我选择的是Babel 和Progressive Web App (PWA) Support两个特征,回车确认后,出现以下内容表示成功。

 这里的3.x和2.x表示我们选择使用vue的版本。在这里,我们选择3.x版本。

这是系统询问刚刚的配置放置在什么地方,第一个是默认位置,第二个是放置在package.json里面。我们在这里选择默认位置进行回车。

接下来还会弹出一个询问,大致内容是是否保存配置信息设为模板。这里我们选择n进行回车。

 通过等待,接下来会出现以上内容。这时,我们只需要按照提示输入cd my-demo1(cd 表示切换到子目录 ,后面跟的是子目录的名字,我当时创建的vue项目名字叫my-demo1.大家把自己的vue项目名字输进去回车就可以了)

npm run serve

跳转到子目录下,我们可以输入提示给的第二个指令让项目运行起来。

接下来会弹出两个链接,我们打开其中一个如果弹出以下界面就说明成功了。

想让项目结束运行可以按Ctrl+C来退出。

想重新打开项目,只需要跳转到当前目录下,输入打开指令就好了。

npm run serve

好了,项目的创建到这里就结束了。下一篇介绍vue的正式学习。 

相关文章:

Javaweb学习之Vue项目的创建(二)

学习资料 Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org) 准备工作都做完了,接下来开始Vue的正式学习。 第一步,打开VS Code 在VS Code里,我们也需要使用到终端,如果不是以管理员身份打开,在新建Vue项目的时候…...

『深度长文』4种有效提高LLM输出质量的方法!

LLM,全称Large Language Model,意为大型语言模型,是一种基于深度学习的AI技术,能够生成、理解和处理自然语言文本,也因此成为当前大多数AI工具的核心引擎。LLM通过学习海量的文本数据,掌握了词汇、语法、语…...

【工业机器人】工业异常检测大模型AnomalyGPT

AnomalyGPT 工业异常检测视觉大模型AnomalyGPT AnomalyGPT: Detecting Industrial Anomalies using Large Vision-Language Models AnomalyGPT是一种基于大视觉语言模型(LVLM)的新型工业异常检测(IAD)方法。它利用LVLM的能力来理…...

【PGCCC】PostgreSQL案例:planning time超长问题分析#PG初级

在使用 PostgreSQL 时,查询的执行计划(planning time)有时会出现异常长的情况,这可能会影响数据库的整体性能。分析和解决这种问题可以从多个角度入手,以下是常见原因和相应的解决思路: 1. 统计信息不准确…...

【图文并茂】ant design pro 如何给后端发送 json web token - 请求拦截器的使用

上一节有讲过 【图文并茂】ant design pro 如何对接后端个人信息接口 还差一个东西,去获取个人信息的时候,是要发送 token 的,不然会报 403. 就是说在你登录之后才去获得个人信息。这样后端才能知道是谁的信息。 token 就代码了某个人。 …...

【微信小程序】自定义组件 - behaviors

1. 什么是 behaviors 2. behaviors 的工作方式 3. 创建 behavior 调用 Behavior(Object object) 方法即可创建一个共享的 behavior 实例对象,供所有的组件使用: 4. 导入并使用 behavior 5. behavior 中所有可用的节点 6. 同名字段的覆盖和组合规则* 关…...

Linux ubuntu 24.04 安装运行《帝国时代3》免安装绿色版游戏,解决 “Could not load DATAP.BAR”等问题

Linux ubuntu 24.04 安装运行《帝国时代3》游戏,解决 “Could not load DATAP.BAR" 等问题 《帝国时代 3》是一款比较经典的即时战斗游戏,伴随了我半个高中时代,周末有时间就去泡网吧,可惜玩的都是简单人机,高难…...

Springboot 图片

Springboot 图片 因为 server.servlet.context-path: /api 所以 url是这个的时候 http://127.0.0.1:9100/api/staticfiles/image/dd56a59d-da84-441a-8dac-1d97f9e42090.jpeg 配置代码的前面的 /api 是不要写的 package com.gk.study.config;import org.springframework.conte…...

LIMS实验室管理系统如何实现数据自动采集

随着科研技术的不断发展,LIMS实验室管理系统的应用也愈来愈广,已经成为现代化实验室管理不可或缺的工具。LIMS实验室管理系统未与仪器设备对接前,仪器设备产生的数据都是通过人工录入到系统中,再经过人工审核形成最终的数据报告。…...

全自动商用油炸锅介绍:

全自动商用油炸锅‌是一种专门为商业用途设计的厨房设备,旨在高效、节能、卫生地完成大量食品的油炸加工。这种设备通常采用油水混合技术,能够自动过滤残渣,延长换油周期,从而大大降低用油成本。全自动商用油炸锅适合中、小型油炸…...

CE修改器的简单使用

前言 这个系列目前是出于兴趣爱好,最终目的是为了可以用代码控制修改单机游戏。 这篇文章的对象是《植物大战僵尸杂交版》,其余游戏类似。 博客仅做技术研究使用,禁止用作商业用途。 1,安装CE修改器 到官网进行下载&#xff…...

element-plus el-cascader懒加载怎么指定对应的label和value。最后一级怎么判断?

<el-cascader:props"props"placeholder"请选择现地址所在地"v-model"currentaddress"ref"currentaddressRef"change"currentaddressChange"style"width:100%"clearable/> 懒加载需要用到props。 const pro…...

pdf查看密码

pdf有两种密码方式&#xff0c;一种是打开后进入文件内容页面后需要密码才能进行修改等操作&#xff0c;网上有很多方式进行移除密码操作&#xff0c;第二种是打开就需要密码&#xff0c;我这里简单记录一个暴力破解的方式&#xff0c;仅供参考 import PyPDF2 import itertools…...

从bbl和overleaf版本解决Arxiv提交后缺失参考文献Citation on page undefined on input line

debug 食用指南&#xff1a;框架/语言&#xff1a;问题描述&#xff1a;解决方案&#xff1a;问题原因&#xff1a;版本解决方案&#xff1a; 安利时间&#xff1a; 食用指南&#xff1a; 框架使用过程中的问题首先要注意版本发布时间造成方法弃用 当你在CSDN等网站查找不到最…...

Flutter【01】状态管理

声明式编程 Flutter 应用是 声明式 的&#xff0c;这也就意味着 Flutter 构建的用户界面就是应用的当前状态。 当你的 Flutter 应用的状态发生改变时&#xff08;例如&#xff0c;用户在设置界面中点击了一个开关选项&#xff09;你改变了状态&#xff0c;这将会触发用户界面…...

(转载)使用zed相机录制视频

参照下面这个链接 https://blog.csdn.net/peng_258/article/details/127457199?ops_request_misc&request_id&biz_id102&utm_termzed2%E5%BD%95%E5%88%B6%E6%95%B0%E6%8D%AE%E9%9B%86&utm_mediumdistribute.pc_search_result.none-task-blog-2~all~sobaiduweb…...

C/C++中奇妙的类型转换

1.引言 大家在学习C语言的时候&#xff0c;有没有遇见过类似于下面这样的代码呢&#xff1f; // 整形转bool int count 10; while(count--) {cout << count << endl; }// 指针转bool int* ptr cur; while(ptr) {//…… } 众所周知&#xff0c;while循环的判断…...

嵌入式AI快速入门课程-K510篇 (第三篇 环境搭建及开发板操作)

第三篇 环境搭建及开发板操作 文章目录 第三篇 环境搭建及开发板操作1.配置VMware使用桥接网卡1.1 vmware设置1.2 虚拟网络编辑器设置 2.安装软件2.2 安装 Windows 软件2.3 使用MobaXterm远程登录Ubuntu2.4 使用FileZilla在Windows和Ubuntu之间传文件2.5编程示例&#xff1a;Ub…...

C++第三十九弹---C++ STL中的无序容器:unordered_set与unordered_map使用详解

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】 目录 1 unordered_set 1.1 unordered_set的接口说明 1.1.1 unordered_set的构造 1.1.2. unordered_set的容量 1.1.3. unordered_set的迭代器 1.1…...

数学建模起步感受(赛前15天)

0基础直接上手数模&#xff0c;因为大一&#xff01;年轻就是无所畏惧&#xff01;开个玩笑&#xff0c;因为数模比赛比一年少一年… 抱着不打也是浪费的态度&#xff0c;我开始着手准备 首先python啥也不会&#xff0c;知道有元组这玩意… 仅仅在刷软考题的时候遇到python选择…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

站群服务器的应用场景都有哪些?

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分,它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构: use strict;/…...

【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...