Vue3学习笔记<->创建第一个vue项目(2)

新建一个项目目录

  找一个盘新建一个目录,我这里在D盘创建一个vuedemo目录作为项目存放的目录。使用idea打开目录。
idea代开vuedemo目录
  单击ieda底部的按钮“Terminal”,打开命令行窗口,如果命令行窗口当前目录不是“vuedemo”,就切换到“vuedemo”目录
在这里插入图片描述
  后面操作都在命令行窗口的“vuedemo”目录下执行

项目选型:vue3+vite+js,命令使用“yarn”

  • vue3: vue版本,vue2停止维护了,vue3就是唯一选择
  • vite: 项目脚手架,vite是现在比较流行的,我是新手所以选择vite,没心理负担
  • js: Java Script,以前做jsp的熟悉Java Script,所以就选它了。当然你也可以选择Type Script
  • yarn: 不用说了,使用 npm 命令也可以,不过注意一下和 yarn 命令格式区别

创建项目

  1. 安装vite:
      全局安装:yarn global add create-vite
      如果不想全局安装,跳过这一步。

  2. 执行创建vite项目命令: yarn create vite
      执行命令后按提示输入项目名称,我这里项目名是“vue3-vite-js-demo”,可以自定义你喜欢的项目名称。
    在这里插入图片描述
    3. 输入项目名称后,进入“Select a framework”界面
      使用键盘上的方向键“↑”和“↓”键,选择一个framework,这里选择“vue”选项,然后按下“回车(键盘上的“Enter”键)”键确认选择
    在这里插入图片描述

    1. 选择“vue”后,进入“Select a variant” 选择界面
        使用键盘上的方向键“↑”和“↓”键,选择一个variant,这里选择“JavaScript”选项,然后按下“回车(键盘上的“Enter”键)”键确认选择。如果要使用TypeScript,就选择“TypeScript”选项
      在这里插入图片描述

    2. 创建成功的界面
      在这里插入图片描述

  3. 查看vite版本: yarn list vite
    因为不是全局安装的vite,所有只能在项目目录中查看vite,而且不能使用vite --version查看版本
    在这里插入图片描述

按提示命令,启动工程

  1. 进入项目目录:cd vue3-vite-js-demo

  2. 在项目目录中,执行命令安装依赖:yarn 或yarn install
    在这里插入图片描述

  3. 在项目目录中,执行启动命令:yarn dev
      出现以后界面,工程启动成功,
    在这里插入图片描述

  4. 在浏览器中输入local对应的地址“http://localhost:5173”可访问当前应用,界面如下
    在这里插入图片描述
      页面中可以单击“count is 0”可看到 count 在自增
    在这里插入图片描述

项目结构:

项目根目录一般为项目名称:vue3-vite-js-demo
node_modules: 存放项目的各种依赖
public: 项目公用的文件
src: 存放各种vue文件的地方,存放代码的主要目录
src/assets: 存放页面对应的css、js以及图片文件
src/components: 存放项目使用的公共组件
src/App.vue: 根组件文件
src/main.js: 入口文件,项目中所有的页面都会加载main.js
src/style.css: css样式文件
index.html: 主页入口文件,包含了Vue应用程序的基础结构和配置
package.json: 模块基本信息项目开发所需要的模块,版本,项目名称
vite.config.js: Vite 项目的配置文件
在这里插入图片描述

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

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

相关文章

qt文件如何打包成一个独立的exe文件

QT官方给我们安装好了打包软件,就在你QT安装的位置 把这个在cmd打开C:\Qt\6.7.1\mingw_64\bin\windeployqt6.exe(或复制地址) 然后把要打包项目的exe复制到新的空文件夹,再复制他的地址 按回车后生成新文件 再下载打包软件&#…

东方航空逆向

声明(lianxi a15018601872) 本文章中所有内容仅供学习交流使用,不用于其他任何目的,抓包内容、敏感网址、数据接口等均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关! …

【AIGC】AnimateAnyone:AI赋予静态照片生命力的魔法

摘要: 在人工智能技术的不断进步中,AnimateAnyone项目以其创新性和易用性脱颖而出,成为GitHub上备受瞩目的AI项目之一。由阿里巴巴智能计算研究院开发的这一技术,允许用户通过提供一张静态照片,快速生成动态角色。本文…

Linux实用命令练习

目录 一、常用命令 二、系统命令 三、用户和组 四、权限 五、文件相关命令 六、查找 七、正则表达式 八、输入输出重定向 九、进程控制 十、其他命令 1、远程文件复制:scp 2、locate查找 3、which命令 4、设置或显示环境变量:export 5、修…

YOLO-V1

一、YOLO-V1整体思想与网络架构 1.1 YOLO算法整体思路解读 YOLO-V1: 经典的one-stage方法 把检测问题转化成回归问题,一个CNN就搞定了! 可以对视频进行实时检测,应用领域非常广! 核心思想: 1、预测一张图像中有哪些物…

11_电子设计教程基础篇(磁性元件)

文章目录 前言一、电感1、原理2、种类1、制作工艺2、用途 3、参数1、测试条件2、电感量L3、品质因素Q4、直流电阻(DCR)5、额定电流6、谐振频率SRF(Self Resonant Frequency)7、磁芯损耗 4、应用与选型 二、共模电感1、原理2、参数…

《昇思25天学习打卡营第15天 | 昇思MindSpore基于MindSpore的红酒分类实验》

15天 本节学了通过MindSpore的完成红酒分类。 1.K近邻算法(K-Nearest-Neighbor, KNN)是一种用于分类和回归的非参数统计方法,是机器学习最基础的算法之一。 1.1分类问题 1.2回归问题 1.3距离的定义 2.数据处理 2.1 数据准备 2.2 数据读取与处…

动画重定向——当给一个人物模型用别人物的动画时,会遇到人物与动画不匹配问题,怎么解决呢?

每日一句:实践出真知,试错方确信 目录 最开始我想的原因! 分析一下动画相关参数 Animator组件参数详解: 人物模型的导入设置参数: Skinned Mesh Renderer组件详解: Skinned Mesh Renderer工作原理 设置Skinned …

AI大模型的崛起:第四次工业革命的前奏?

在当今这个信息爆炸的时代,人工智能(AI)大模型的崛起引起了广泛的关注和讨论。有人将其视为第四次工业革命的前奏,然而,这真的可能吗?本文将探讨这一问题,并对中国AI大模型的发展进行简要分析。…

MyBatis第一节

目录 1. 简介2. 配置3. doing3.1 创建一个表3.2 打开IDEA,创建一个maven项目3.3 导入依赖的jar包3.4 创建entity3.5 编写mapper映射文件(编写SQL)3.6 编写主配置文件3.7 编写接口3.8 测试 参考链接 1. 简介 它是一款半自动的ORM持久层框架,具有较高的SQ…

Qt:4.信号和槽

目录 1.信号源、信号和槽: 2.Qt类的继承关系: 3.自定义槽函数: 4.第一种信号和槽的连接的方法: 5.第二种信号和槽的连接的方法: 6.自定义信号: 7.发射信号: 8.信号和槽的传参:…

神经网络在机器学习中的应用:手写数字识别

机器学习是人工智能的一个分支,它使计算机能够从数据中学习并做出决策或预测。神经网络作为机器学习的核心算法之一,因其强大的非线性拟合能力而广泛应用于各种领域,包括图像识别、自然语言处理和游戏等。本文将介绍如何使用神经网络对MNIST数…

《昇思25天学习打卡营第17天 | 昇思MindSporeCycleGAN图像风格迁移互换》

17天 本节学习了CycleGAN图像风格迁移互换。 CycleGAN即循环对抗生成网络,该模型实现了一种在没有配对示例的情况下学习将图像从源域 X 转换到目标域 Y 的方法。该模型一个重要应用领域是域迁移,可以通俗地理解为图像风格迁移。其实在 CycleGAN 之前&a…

WP黑格导航主题BlackCandy

BlackCandy-V2.0全新升级!首推专题区(推荐分类)更多自定义颜色!选择自己喜欢的色系,焕然一新的UI设计,更加扁平和现代化! WP黑格导航主题BlackCandy

计算机科学基础简单介绍(1—6)

计算机影响了我们生活的方方面面,在我们这个时代完全渗透了我们的生活。 最早是算盘、星盘、时钟、尺卡等古老的计算工具,后来出现了进步计算机,类似与汽车里程表的一种机械工具,但是他也是手工制品。经过历史的演变与发展&#x…

gbase 8c分布式升级步骤

GBase 8c 多模多态企业级分布式数据库具备高性能、高可用、弹性伸缩、高安全性等特性,可以部署在物理机、虚拟机、容器、私有云和公有云,为关键行业核心系统、互联网业务系统和政企业务系统提供安全、稳定、可靠的数据存储和管理服务。GBase 8c支持行存、…

大数据之路 读书笔记 Day2

大数据之路 读书笔记 Day2 日志采集——浏览器的页面采集 一、分类 #mermaid-svg-8c9sRexRDdSB9pWA {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-8c9sRexRDdSB9pWA .error-icon{fill:#552222;}#mermaid-svg-8c9…

【python爬虫实战】爬取豆瓣top250(网站有反爬虫机制肿么办)

关于请求头headers: 值得注意的是,与上一篇 :​​​​​​【python爬虫实战】爬取书店网站的 书名&价格(注释详解)-CSDN博客 爬取书名不同,这次爬取豆瓣网站必须使用“请求头headers”,不然将没有输…

js使用异步方法(promise)返回回调参数内的值,

需求分析 使用回调方式的异步方法时,需要返回异步操作的结果,这个时候就不能直接在回调函数内返回值,因为回调函数需要等待异步操作结束才执行,而同步调用返回值时,异步操作没有结束,回调函数就没有执行完成…

每天五分钟深度学习框架pytorch:tensor向量之间常用的运算操作

本文重点 在数学中经常有加减乘除运算,在tensor中也不例外,也有类似的运算,本节课程我们将学习tensor中的运算 常见运算 加法+或者add import torch import numpy as np a=torch.rand(16,3,28,28) b=torch.rand(1,3,28,28) print(a+b) import torch import numpy as np a…