首页 > 其他分享 >Vite+Vue3+TS创建前端页面,收费教程都没有这么详细

Vite+Vue3+TS创建前端页面,收费教程都没有这么详细

时间:2024-02-19 12:11:25浏览次数:27  
标签:npm vscode TS Vite Vue3 打开 安装 vite

原文地址:https://mp.weixin.qq.com/s/HqLgf2TCVqnndSxJw_1RTQ

一、准备工作

在学习之前,需要安装两个工具,一个是IDE,一个是Node.js:

Vs Code:  https://code.visualstudio.com/Download

Node.js: http://nodejs.cn/download/

安装过程略,安装好之后,为了在vscode中能智能提示和运行,还需安装以下几个插件:

Vue Language Features (Volar)

TypeScript Vue Plugin (Volar)

Element Plus Snippets

HTML CSS Support

Auto Rename Tag

 

二、新建vue3项目

标题虽然写Vite+Vue3+TS,其实只需照做,简单几步就完成安装:

1、新建一个study文件夹:

 

2、安装vite:

cmd进入这个目录,npm init vite@latest即可完成安装,具体步骤和参数如下:

1)先输入 npm init vite@latest

   

2)回车之后,要求我们输入项目名称,如果不输入,则默认是vite-project:

  

3)回车之后,让我们选择vite支持的框架,按上下键选vue:

4)再回车,选择ts:

 

5)安装完成,提示我们用三行命令进行接下来的操作,我们记住即可,所有的操作搬到vscode进行:

cd vite-project

npm install

npm run dev

 

三、vscode打开项目:

1、文件→打开文件夹,对应的英文为File→Open Folder:

 

2、找到刚才新建好的vite-project文件夹:

 3、打开效果如下:

四、vscode运行项目:

1、打开终端:

Terminal→New Terminal:

2、安装依赖包:

1)输入刚刚记录的命令npm install安装依赖包:

 2)安装过程持续几分钟,安装完成如下:

 3、运行:

1)输入刚刚记录的命令npm run dev:

 2)打开预览:

按住ctrl点击鼠标,会在默认浏览器打开预览:

 

搞定,就是这么简单!!!

翻译

搜索

复制

<iframe></iframe>

标签:npm,vscode,TS,Vite,Vue3,打开,安装,vite
From: https://www.cnblogs.com/lizhigang/p/18020803

相关文章

  • RevBits Email Security - Endpoint Agent分析(EDR+API集成)
    https://revbits.com/pdf/RevBits_Email_Security_Product_Brief_Securing_Email_Inboxes.pdf 邮件安全检测场景? 根据文档内容,RevBits邮件安全提供以下邮件安全检测场景:终端邮件安全代理软件直接部署在用户终端,可以在邮件进入用户收件箱时进行深度分析,检测和......
  • echarts自适应问题,echarts中怎么改变字体单位实现自适应
    参考文档:https://blog.csdn.net/MFWSCQ/article/details/102522944最初想着怎么给echarts设置vw单位或者rem,echart中怎么把legend的单位设置为vw或者rem来使表格自适应,后面发现行不通。项目中使用px-to-vw包,将所有px转为对应的vw,所有可以根据相同比例进行缩放,做到自适应效果。但......
  • ts接口03
    //接口对对象的形状进行描述可以理解为一种约束//?表示为可选属性,表示可有可无//[prop:string]代表任意属性,当不确定属性名的时候,属性类型,可以使用,但是要注意的是,一旦确定了不是any类型,而是string,number,Boolean之类的,其他的类型也会变成他的子集//[prop:string]中如......
  • v-if后的echarts显示已有dom解决方法
    控制台报错:Thereisachartinstancealreadyinitializedonthedom. 核心思路:先判断dom是否存在,如存在就调用销毁方法,再初始化正常操作。echarts内:if(this.myChart!=null&&this.myChart!=""&&this.myChart!=undefined......
  • ts基础类型02
    类型声明letnum:number=11num=10functiona(aaa:string){  console.log(aaa)}a('111')//类型声明,指定ts变量(参数,形参)的类型ts编译器,自动检测//类型声明给变量设置了类型后,该变量只能储存对应类型的值,如下letflag:boolean=trueflag=false......
  • ts编译01
    认知 TS:TS是JS的超集安装TSnpmi-gtypescript检测安装是否成功tsc-v测试(()=>{functionsayHi(str:string){returnstr}sayHi('ts')})()手动编译tsc./文件名 自动编译tsc--init自动编译后,出现一个tsconfig.j......
  • netstat和lsof两个Linux命令查看端口的区别
    一、netstat命令介绍netstat命令是一个监控TCP/IP网络的非常有用的工具,它可以显示路由表、实际的网络连接以及每一个网络接口设备的状态信息netstat用来查看系统当前系统网络状态信息,包括端口,连接情况等,常用方式如下:netstat-atunlp,各参数含义如下:•-t:指明显示TCP端口•-......
  • Vue3实现加入购物车抛物线效果组件
    前言在前几天的一次迭代中,我遇到了这么一个需求,模仿支付宝首页应用中心的编辑功能,支持编辑首页展示的应用,在支付宝应用首页编辑功能中,我注意到一种独特而细致的设计。无论是增加还是移除某个应用,都会引发一个精美的移动动画效果。这种贴心的设计在用户体验中起到了微妙而关键的作......
  • 记一次centos7.9崩溃恢复操作(limits.conf配置失误),救援模式
    引起故障的原因:调整了操作系统的内核参数文件limits.conf,* softnproc131072* hardnproc131072* softnofile65536* hardnofile131072 以上的参数都扩大了10倍,ssh登录主机就开始异常了,连上去后就直接断开了,表象就是无法新建ssh会话连接,当前的用户有sudo免密操......
  • 149. Max Points on a Line
    149.MaxPointsonaLineGivenanarrayof points where points[i]=[xi,yi] representsapointonthe X-Y plane,return themaximumnumberofpointsthatlieonthesamestraightline.Example1:Input:points=[[1,1],[2,2],[3,3]]Output:3E......