用vite创建vue3项目

发布时间 2023-11-03 17:22:08作者: pu369com

打算用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