首页 > 其他分享 >创建Vue3+Vite+TypeScript项目

创建Vue3+Vite+TypeScript项目

时间:2024-03-12 11:11:53浏览次数:28  
标签:npm node TypeScript 项目 Vue3 Vite

一、安装node环境,安装18.0或更高版本的Node.js

  推荐使用nvm管理node版本:一看就会使用nvm实现多个版本的node自由切换 - 始是逍遥人 - 博客园 (cnblogs.com)

二、创建项目

  1、选择一个工作路径,如:E:\webproject

  2、打开cmd命令窗口进入到当前目录

    快捷方式:直接在该目录的地址栏中输入cmd即可

    

  3、执行npm create vue@latest创建项目

    

    通过左右键选择,这里选择使用TypeScript

    可以根据自己的要求自行选择

    

  4、生成项目后通过提示的命令运行

    cd wk-ux:进入到项目目录中

    npm install:安装依赖

    npm run dev:运行项目

    注:使用npm安装包慢的话可以切换成淘宝镜像会快一点:npm设置淘宝镜像 - 始是逍遥人 - 博客园 (cnblogs.com)

  5、访问地址

    

  

  到此Vue3+Vite项目搭建完成

标签:npm,node,TypeScript,项目,Vue3,Vite
From: https://www.cnblogs.com/brucewang92/p/18067876

相关文章

  • vue3—尚硅谷禹神笔记转载
    1.Vue3简介2020年9月18日,Vue.js发布版3.0版本,代号:OnePiece(n经历了:4800+次提交、40+个RFC、600+次PR、300+贡献者官方发版地址:Releasev3.0.0OnePiece·vuejs/core截止2023年10月,最新的公开版本为:3.3.41.1.【性能的提升】打包大小减少41%。初次渲染快5......
  • vue3 父子组件间通讯
    1、父组件向子组件传值父组件<fitSteps:stepActive="stepActive"><div>插槽信息</div>      <van-buttontype="primary"@click="FatherClick">下一步</van-button></fitSteps>conststepActive=ref......
  • Java登陆第三十四天——使用Vite创建工程化的Vue3项目
    VueVue是基于标准HTML、CSS和JavaScript构建的前端框架,可以更高效地开发前端页面。ViteVite是Vue团队开发的项目管理工具。Maven的主要功能引入依赖项目管理使用Maven可以工程化的管理后端代码。npm的主要功能:引入依赖vite的主要功能:项目管理使用npm+vit......
  • JeecgBoot Vue3前端项目性能优化&按需加载方案
    JeecgBootvue3前端项目在3.5.5版本之前,的确存在很严重的性能问题,大家可以参考以下文档进行升级。按需加载改造方法1、全局注册地方去掉2、组件改成异步注册3、用不到的大组件可以删掉【精简项目方案】大组件1、富文本tinyme2、Markdown3、CodeMirror4、地图数据......
  • vue3 监听鼠标点击拖动事件,移动端滑动事件,页面指针坐标事件
    PointerEventsAPI是Hmtl5的事件规范之一,它主要目的是用来将鼠标(Mouse)、触摸(touch)和触控笔(pen)三种事件整合为统一的API。Pointer指可以在屏幕上反馈一个指定坐标的输入设备。PointerEvent事件和TouchEventAPI对应的触摸事件类似,它继承扩展了TouchEvent,因此拥有TouchEven......
  • Typescript学习笔记(一)
    学习日期:03-09-2024关键字:Typescript;安装;原始数据类型;Any类型;数组;元组;Typescript是Javascript的超集,显著区别是加了静态类型风格的类型系统、es6-es10-esnext的语法支持安装npminstall-gtypescript原始数据类型Boolean、Null、Undefined、Number、BigInt、String、Sy......
  • Vue3学习(二十三)- 保存文档内容正常显示
    写在前面情人节已经接近尾声了,虽然跟我没什么关系,但是我还是很渴望,能遇到一个良人相伴一生。现在时间:内心异常平静,相对吵闹我更喜欢安静的晚上,没人打扰,enjoy自己独处的时间!保存内容显示1、任务拆解读取已保存内容将读取内容在富文本里显示2、读取已保存内容这个很好......
  • vue3开发文档
    技术要求TypeScriptVue31、用Vue+Vue-Router做一个展示网站。网站按页面划分模块,每个页面按section(部分)再划分模块。培养自己的模块化思想。2、用Vue+Vue-Router+Axios做一个带请求的网站。把请求结果放在页面上展示出来。锻炼请求接口的能力,了解前后端分离思想。3、用Vue+Vu......
  • 【vue3】学习对store中数据的使用
    src/store/modules/nav.jsimport{defineStore}from'pinia';import{handleTree}from'@/utils/ruoyi'import{list}from"@/api/nav/node";conststore=defineStore( 'nav', { state:()=>({ nodeList:[]......
  • Vue3 组合函数拖拽
    代码exportfunctionuseDragMouse(dom,container){letcontainerX=0;letcontainerY=0;letstartX=0;letstartY=0;functiondragPage(e){container.value.style.left=e.pageX-startX+containerX+"px";container.valu......