使用vite 搭建vue 3的项目

VIP文章 已于 2022-11-30 22:13:05 修改
阅读量3.8k 收藏 7
点赞数 1
分类专栏： Vue 3 文章标签： vue.js javascript 前端
于 2022-11-30 22:12:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52984349/article/details/128122972
版权

一、目标：

使用vite搭建一个Vue 3 的项目，并启动成功。

二、准备工作

首先你要有Node.js、VSCode编辑器、Chrome浏览器

关于下载的问题Node.js可以去官网下载

链接：http://nodejs.cn/download/

下载左边的长期支持版本就好，最新版本可能会友一些问题。

最低0.47元/天 解锁文章
枕頭說他不想醒
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架
vite搭建vue3项目
09-06
vite搭建vue3项目
使用vite从头搭建一个vue3项目（一）创建vue3项目
ThisEqualThis的博客
04-02 675
打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）。vite 是一种新型前端构建工具，能够显著提升前端。一个开发服务器，它基于原生。一套构建指令，它使用。
【vue3】使用vite构建vue3项目
嗨，朋友你好！我是前端领域的工作者
03-30 2万+
使用vite构建vue3项目、vite介绍、vite对比webpack
使用vite创建vue3项目全过程-2022详细介绍(sass, vue-router, vuex, axios, elementplus)
weixin_46202067的博客
07-15 2215
使用vite创建vue3项目全过程-2022详细介绍(sass, vue-router, vuex, axios, elementplus)
详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia)
qq_44423029的博客
08-17 4万+
超详细步骤vite创建vue3项目，技术栈vue3+ts+vite+element-plus+pinia，跟着做就搭出来了（保姆级）
vite+vue3+ts 手把手教你创建一个vue3项目
热门推荐
weixin_59916662的博客
10-17 5万+
基本全程cv安装router，less / scss，pinia，axios，element / Ant Design Vue，Echarts ，mockjs，以及如何配置@别名，自定义组件，vue-devtools插件。
使用 Vite 创建 Vue 3 项目
qq_43313093的博客
06-13 3985
以上就是使用 Vite 创建 Vue 3 项目的基本流程。需要注意的是，Vite 的开发服务器采用了快速的 HMR（热更新）方案，相比于传统的打包工具开发效率更高，但在生产环境中需要使用打包工具打包部署。另外，Vite 还有很多其他的特性和插件，可以根据实际需要进行使用和配置。等待片刻后，Vite 就会在浏览器中打开一个新的窗口，你就可以开始开发 Vue 3 项目了。其中，my-vue3-app 是项目的名称，你可以根据实际需要进行修改。
vite创建vue3项目
m0_47659279的博客
05-21 2514
这种方式创建的项目最快捷，因为基本依赖都装好了。
使用Vite快速创建vue3项目（超级简单，超级快速）
z1093541823的博客
04-22 4万+
使用Vite快速创建vue3项目（超级简单，超级快速）
vite构建vue3项目
qianduan2001_5的博客
06-12 345
---------- 使用create-vue搭框架(可选router和pinia) ------------------------- 使用vite搭框架(没有router和pinia) -------------------------- 组件库element-plus ---------------------- 预处理器 Sass ---------------------- 配路由 ------------------------- 配代理 -------------
使用vite从头搭建一个vue3项目
最新发布
04-18
使用vite3搭建的一套简单的vue3项目模板，以供自由学习使用。
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vite+vue+cesium项目搭建
03-13
vite+vue+cesium项目搭建文档
手把手教你搭建vue3项目
weixin_43618130的博客
03-02 4万+
使用VUE3开发很久了，但一直没进行总结和记录，忙里偷闲整理搭建一套VUE3项目，正好记录一下，按照我的教程让你开启vue3之旅吧！
使用vite搭建vue3项目（vite + vue3 + vue router + pinia + element plus）
m0_58565372的博客
01-03 4399
1.更改http://localhost:3000/到8080与Network路由访问（server对象为新增，其余的都是源代码）或者一步到位通过附加的命令行选项直接指定项目名称和你想要使用的模板（根据自己npm版本来选择不同的命令行）（2）修改vite.config.ts配置文件代码，（resolve对象为新增，其余都是源代码）（1）在src目录下新建router文件夹，在router里创建index.ts文件。4.安装css 预处理器 sass。（1）在main.ts引入。（1）在main.ts引入。
Vite创建Vue3项目
猫老板的豆
09-16 8777
文章目录Vite创建Vue3项目1. 输入项目名称2. 选择框架3. 选择不同的vue4. 项目创建完成5. 项目结构6. 启动项目Vue3中使用jsx1. 安装插件2. 注册插件3. 使用插件注意 Vite创建Vue3项目 Vite 需要 Node.js 版本 >= 12.0.0。（node -v 查看自己当前的node版本） 使用 yarn：yarn create @vitejs/app 使用 npm：npm init @vitejs/app 1. 输入项目名称 这里输入我们的项目名称：
手把手带你搭建vue3项目
dandelion_zjw的博客
05-13 1051
这里写自定义目录标题项目准备cli卸载安装Node创建项目（一）vue create [project-name]1.选择模板2.选择配置项（1）选择vue版本（2）是否使用class风格组件语法（3）是否使用babel语法转义（4）是否使用history路由模式（5）CSS预编译（6）eslint校验规则（7）eslint在什么时候进行校验（8）单元测试（大多数不需要）（9）E2E方案（一般不需要）（10）babel postCSS eslint的配置保存在哪3.保存配置4.waiting......5.
pnpm和vite搭建vue3项目
04-03
1. 安装pnpm 首先，需要安装pnpm。可以使用以下命令： ``` npm install -g pnpm ...使用pnpm和Vite搭建Vue 3项目非常简单。只需要几个简单的步骤就可以创建一个新项目，并快速地进行开发和构建。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值