首页 > 其他分享 >vite + vue3 + typescript 搭建

vite + vue3 + typescript 搭建

时间:2024-03-20 10:45:23浏览次数:22  
标签:npm node typescript project vue3 test 安装 vite

1. 安装node.js 

下载地址:https://nodejs.p2hp.com/,安装好后,cmd输入 node -v 查看版本号,出现以下图版本号内容则安装成功

2.安装vite

(本步骤可省略)可先切换淘宝镜像 npm config set registry httpsregistry.npm.taobao.org

确保node安装好,输入 npm install -g create-vite 命令,如下图,安装成功

3.创建项目

输入:create-vite test-project  ,选择Vue

 选择 typescript,回车就创建好了

创建好的项目如下:

进入test-project文件夹

 4.安装依赖

在test-project打开终端(test-project文件夹里面 按住shift + 右键)输入 npm install

 5.运行

输入 npm run dev 运行,即可访问

安装成功

 

标签:npm,node,typescript,project,vue3,test,安装,vite
From: https://www.cnblogs.com/liangp/p/18084730

相关文章

  • Vue3 Slot—插槽全家桶使用详解
    插槽是什么插槽slot就是子组件中提供给父组件使用的一个占位符,用<slot></slot>表示,父组件可以给这个占位符内填充任何模板代码,填充的内容会自动替换<slot></slot>标签。插槽被分为三种:匿名插槽、具名插槽、作用域插槽。1、匿名插槽没有名字的插槽就是匿名插槽,组件可以放......
  • vue2项目升级vue3的小变化
    1、template的slot写法变化vue2:<templateslot-scope="{row,index}"slot="action">vue3:<template#action="{row,index}">2、路由页面缓存的写法变化vue2:<keep-alive:include="cacheList"><router-view/>......
  • 基于 Vue3打造前台+中台通用提效解决方案(中)
    33、实现全屏展示功能我们知道在原生dom上,提供了一些方法来供我们开启或关闭全屏:Element.requestFullscreen()Document.exitFullscreen()Document.fullscreenDocument.fullscreenElement一般浏览器使用requestFullscreen()和exitFullscreen()来实现早期版本Chrome......
  • vue3+element plus 判断文字是否溢出,溢出显示el-tooltip
    用到elementplus表格,:show-overflow-tooltip="true"属性在 "element-plus":"2.2.27",版本不支持修改el-tooltip文本的样式: 满足2点需求:①文字只有一行不显示悬浮框;②超出一行显示省略号,鼠标有悬浮框,且保留文本的换行效果。关键代码:<el-table-columnlabel="建议内容......
  • vite给HTML注入变量
    安装插件:vite-plugin-html npminstallvite-plugin-html-D在vite.config.js中配置 #vite.config.js***import{defineConfig,loadEnv}from"vite";import{createHtmlPlugin}from"vite-plugin-html";constgetVite......
  • 前端面试题-vue2和vue3的区别
    监测机制的改变vue2对数据监测使用的是Object.definePropert()对数据进行劫持,结合发布订阅者模式来实现vue3通过使用proxyAPI对数据直接进行代理。vue3优于vue3的的地方就是:vue3的proxyAPI监测的是整个对象,而不再是某个属性消除了Vue2当中基于Object.defineProperty......
  • Vue3+El-Dialog实现弹框
    1.子组件childComponents.vue<template><divclass="hello">{{`在学习VUE3`}}</div><el-dialogtitle="提示"v-model="dialogVisble"width="30%"><span>这是一段信息</span><templat......
  • 第一章TypeScript初始化和基础类型
    初始化1.安装node和typescript1.1node安装 Node.js(nodejs.org)Node.js下载安装及环境配置教程【超详细】_nodejs下载-CSDN博客1.2typescript安装npminstalltypescript-g安装完成后初始化文件,就会有package.json文件npminit然后再初始化tstsconfig.jsonts......
  • 第二章 TypeScript任意类型
    在第二章开始前我们先安装一个插件为ts-node和一个声明文件@types/node,这样执行起来就没有第一章那么麻烦了//安装ts-node的插件npmits-node-g//安装声明文件npmi@types/node-D然后新建一个文件执行ts-node文件名.ts你会发现直接就可以输出了any任意类......
  • 第六章 TypeScript 联合类型|类型断言|交叉类型
    //联合类型//letphone:number|string=1548546215//letfn=function(type:number|boolean):boolean{//return!!type//}////letresult=fn(1)//console.log(result,'result')//交叉类型//interfacePople{//name:string//ag......