使用Vite创建vue3项目

什么是vite

Vite 是新一代构建工具,由 Vue 核心团队开发,提供极快的开发体验。

它利用浏览器原生ES模块导入功能,提供了极快的热模块更新(HMR)和开发服务器启动速度。

官网:https://vitejs.cn/vite3-cn/guide/

安装vite

shell 复制代码
PS D:\code> npm config set registry https://registry.npmjs.org/
PS D:\code> npm install -g create-vite

added 1 package in 3s

1 package is looking for funding
  run `npm fund` for details

注意要使用官方源,尝试过使用淘宝、清华等国内源,均报找不到包。

创建项目

构建一个 Vite + Vue 项目

shell 复制代码
PS D:\code> npm create vite@latest my-vue3-project -- --template vue

> npx
> create-vite my-vue3-project vue

│
◇  Select a framework:
│  Vue
│
◇  Select a variant:
│  JavaScript
│
◇  Scaffolding project in D:\code\my-vue3-project...
│
└  Done. Now run:

  cd my-vue3-project
  npm install
  npm run dev

运行项目

shell 复制代码
PS D:\code> cd .\my-vue3-project\
PS D:\code\my-vue3-project> npm install

added 33 packages, and audited 34 packages in 21s

6 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
PS D:\code\my-vue3-project> npm run dev
  VITE v6.3.4  ready in 2282 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

在浏览器中输入:http://localhost:5173/

相关推荐
Hello-Mr.Wang2 小时前
Vue 3 实现 Excel 表格解析的完整指南
前端·vue·excel
发现你走远了9 小时前
『uniapp』uni-share 分享功能 使用例子(保姆级图文)
uni-app·vue·分享·uni-share
跟着阿龙学编程9 小时前
vue-table-print 一个强大的Vue 3表格打印工具,支持ElementPlus、Ant Design Vue等主流UI组件库。
vue·print
.生产的驴1 天前
Vue3 数据可视化屏幕大屏适配 页面自适应 响应式 数据大屏 大屏适配
java·c++·vue.js·后端·信息可视化·前端框架·vue
西哥写代码2 天前
基于cornerstone3D的dicom影像浏览器 第二十一章 显示DICOM TAGS
前端·javascript·vue
温酒斟与你2 天前
UniApp+Vue3微信小程序二维码生成、转图片、截图保存整页
微信小程序·uni-app·vue
charlee443 天前
实现一个前端动态模块组件(Vite+原生JS)
前端·javascript·html·vite
charlee444 天前
使用Vite创建一个动态网页的前端项目
前端·javascript·vite
flex88884 天前
【开源】一个基于 Vue3 和 Electron 开发的第三方网易云音乐客户端,具有与官方客户端相似的界面布局
开源·node.js·vue
机构师5 天前
<uniapp><vuex><状态管理>在uniapp中,如何使用vuex实现数据共享与传递?
uni-app·vue·vuex·数据管理