首页 > 其他分享 >用vite创建vue3项目

用vite创建vue3项目

时间:2023-11-03 17:35:43浏览次数:32  
标签:npm 创建 blog https vue3 article net vite

打算用vite创建vue3项目

1.安装

npm init vite-app <项目名称> 
cd <项目名称> 
npm install 
npm run dev
## 执行完以上命令,就意味着你的vue3.0项目已经用上了vite了

提示  deprecated  改为:

npm init @vitejs/app

又提示deprecated   改为:

npm create vite@latest

2 输入项目名称test后,给出几个选项:

(1)Vanilla         香草/Vanilla 香草/Vanilla是一个基于Openresty实现的高性能Web应用开发框架

(2) vue

(3)react  React 让你可以通过组件来构建用户界面

(4)Preact 是 React 的轻量化替代方案,仅有 3KB。并且提供了相同的 ES6 API,还具有组件和 Virtual DOM。

(5) Lit is a simple library for building fast, lightweight web components. 

(6)Svelte 是构建 Web 应用程序的一种新方法。Svelte 是一个编译器,它将声明性组件转换成高效的 JavaScript 代码,并像做外科手术一样细粒度地更新 DOM。

(7)和(8)Solid 与 Qwik 一样,将 Signal 直接与 DOM 更新联系起来。但是,Solid 不仅可以对常规值进行此操作,还可以对结构性更改进行此操作。Qwik 不需要在启动时执行所有组件来了解状态如何连接到 DOM

我这里当然选第二项 vue  -- typescript   之后按提示:

npm install 

然后:

npm run dev

按提示  访问 :http://localhost:5173/  

Vite + Vue 的网页显示出来了,页面上有官方教程的链接。

3 看一下热更新效果

项目目录下有index.html  用记事本修改title内容,保存后几乎在1秒内就能看到浏览器标签上title的变化。

可以按照官方教程边试边学了。

 

 

 

 

参考:

https://blog.csdn.net/weixin_43861689/article/details/129398993

https://www.xjx100.cn/news/582898.html?action=onClick

https://blog.csdn.net/qq_43326668/article/details/130828139

https://blog.csdn.net/JHXL_/article/details/128785444

http://www.codebaoku.com/it-js/it-js-206082.html

https://baijiahao.baidu.com/s?id=1767634196948512008&wfr=spider&for=pc

https://www.jb51.net/article/278358.htm

https://blog.csdn.net/weixin_45605541/article/details/127962184

标签:npm,创建,blog,https,vue3,article,net,vite
From: https://www.cnblogs.com/pu369/p/17808037.html

相关文章

  • Vue3Router路由传参
    import{useRouter}from'vue-router'//首先在setup中定义constrouter=useRouter()//字符串router.push('home')//对象router.push({path:'home'})//命名的路由router.push({name:'user',params:{userId:'123......
  • 创建自定义美颜滤镜:使用第三方美颜SDK的步骤指南
    美颜滤镜在现代移动应用和直播平台中变得越来越受欢迎。它们可以让用户在自拍照片、视频聊天或实时直播中看起来更加美丽和自信。如果您是一位应用开发者,想要增加美颜滤镜功能,但又不想从头开始构建整个系统,那么使用第三方美颜SDK可能是一个明智的选择。第1步:选择适合的第三方美颜SD......
  • 无涯教程-MongoDB - 创建数据库
    在本章中,无涯教程将看到如何在MongoDB中创建数据库。MongoDB使用DATABASE_NAME用于创建数据库,该命令将创建一个新数据库(如果不存在),否则将返回现有数据库。CreateDatabase-语法useDATABASE语句的基本语法如下-useDATABASE_NAMECreateDatabase-示例如果您要使......
  • mysql创建systemd管理项
    vim/usr/lib/systemd/system/mysqld.service写入system配置:[Unit]Description=MySQLServerDocumentation=mysqld##mysql参考手册Documentation=http://dev.mysql.com/doc/refman/en/using-systemd.htmlAfter=network.targetAfter=syslog.target[Install]WantedBy=multi-u......
  • vue3 -点击按钮进入新的页面
    一、调用页面//路由import{useRouter}from'vue-routerlet$router=useRouter()//车组调整页面consthandleCar=(row:any)=>{ $router.push({path:"/test/edit",query:{setCode:row.setCode,lineName:row.lineName}})}二、新打开的页面importuseTagsViewSt......
  • vue3 用法汇总(二)
    1、列表中鼠标放在不同单元格显示不同的背景颜色<el-tablev-resize:44:data="tableData"class="tablemarking-table"borderstyle='margin:10px0px'highlight-current-rowelement-loadi......
  • 创建一个vue项目---全局环境搭建
    全局环境搭建一、环境准备1、安装node.js下载地址:https://nodejs.org/en/2、检查是否安装成功:输出版本号说明安装成功3、安装淘宝镜像(淘宝镜像速度比较快)npminstall-gcnpm-registry=https://registry.npm.taobao.org4、检查cnpm是否安装成功cnpm-v二、搭......
  • Spring,IOC创建对象的方式,无参有参
    创建一个spring模块,创建有无参构造的User实体类  方式一、无参构造创建对象  (默认的)我们知道:创建对象是调用了实体类中的构造方法的Spring这边通过配置文件也是默认调用了无参构造 二、有参构造创建对象用法1、通过下标赋值  index=“0” 因为User中就一个nam......
  • ros2 创建发布和服务
    1.创建工作空间mkdir-pdev_ws/src2.创建功能包ros2pkgcreatetest_demo--build-typeament_cmake--node-namemy_demo--dependenciesstd_msgsrclcpp 3.创建发布topic  3.1头文件#include"rclcpp/rclcpp.hpp"//rclcpp/rclcpp.hpp是ROS2中常用C++接口......
  • 使用idea以Maven方式创建父子工程项目
    idea版本:2019.2.4maven版本:3.6.1 1.创建父工程2.建子工程(module)3.删除无用文件夹 ......