【Vue3】使用vite创建vue项目

最新推荐文章于 2024-07-15 17:15:41 发布
最新推荐文章于 2024-07-15 17:15:41 发布
阅读量123 收藏
点赞数 2
分类专栏： Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DX390609/article/details/140327165
版权

一、安装Nodejs

参考文章https://blog.csdn.net/DX390609/article/details/140305585?spm=1001.2014.3001.5502

二、创建项目

在要创建的目录下打开命令行输入：

npm create vue@latest

vue项目创建成功：
在这里插入图片描述

三、安装vue插件

vscode打开项目文件夹，拓展-vue-offical-安装
在这里插入图片描述

四、安装依赖包：

在vscode中，快捷键ctrl+~打开终端，输入：

npm i

在这里插入图片描述

五、启动项目

npm run dev

在这里插入图片描述

全宇宙最最帅气的哆啦A梦小怪兽
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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项目
qq_41199502的博客
04-11 1343
在运行 npm install 命令之后，npm 还会自动更新 package.json 文件中的 package-lock.json（或 yarn.lock）文件，以记录确切的包版本和依赖关系。在 Vite 项目中，vite.config.ts 文件是一个 TypeScript 文件，位于项目根目录下。在HBuilderX工具上打开刚刚创建前端项目，修改 vite.config.ts 文件中的项目启动端口号，添加如下内容，然后保存文件。需要注意的是，vite.config.ts 文件是可选的。
Vite创建Vue3项目
猫老板的豆
09-16 8858
文章目录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. 输入项目名称 这里输入我们的项目名称：
使用 Vite 创建 Vue 3 项目
qq_43313093的博客
06-13 4105
以上就是使用 Vite 创建 Vue 3 项目的基本流程。需要注意的是，Vite 的开发服务器采用了快速的 HMR（热更新）方案，相比于传统的打包工具开发效率更高，但在生产环境中需要使用打包工具打包部署。另外，Vite 还有很多其他的特性和插件，可以根据实际需要进行使用和配置。等待片刻后，Vite 就会在浏览器中打开一个新的窗口，你就可以开始开发 Vue 3 项目了。其中，my-vue3-app 是项目的名称，你可以根据实际需要进行修改。
Vue3 + vite 创建项目
热门推荐
weixin_58032613的博客
02-18 1万+
项目创建 vite的介绍 首先要想使用vite来创建一个vue项目，要把vue脚手架升级成为5.0.1版本，但是有一个很大的缺陷，就是升级过后不会再向下兼容vue2的语法创建项目的方式 脚手架升级为5.0.1版本：cnpm install vue@next 或 yarn global add @vue/cli 安装新版@vue/cli 升级完之后，输入：vue -V 来查看脚手架的版本号 脚手架为5.0.1版本创建项目的语法也变了，原本在4.5.15版本的时候还可以做到向下兼容使用vue cli语法
vue3+vite创建项目-（傻瓜式教程）
01-19
Vue3 + Vite 创建项目教程 Vue.js 是一个流行的前端框架，它的最新版本Vue3引入了许多新特性，如Composition API、Suspense、Teleport等，提供了更好的性能和更灵活的开发体验。Vite是由Vue.js作者尤雨溪开发的一款...
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+...
vue3+vite+antd 后台管理系统基础模板
02-06
这个"vue3+vite+antd 后台管理系统基础模板"是一个用于快速搭建后台管理系统的项目起点。它集成了Vue3的最新特性、Vite的高效开发环境以及Antd的UI组件，为开发者提供了一个稳定且高效的开发平台。 `.env....
vite+vue3使用模块化批量发布Mockjs接口
03-29
"vite+vue3使用模块化批量发布Mockjs接口"这个主题涵盖了如何在Vite搭建的环境中，结合Vue3和Mockjs来实现接口的模块化和批量处理。这将帮助开发者在实际API未准备好或者不便于调试时，快速模拟后端数据，提高开发...
vite-vue3-template:Vite + Vue3项目模板
03-18
Vite + Vue3 项目模板是现代前端开发中的一个高效构建工具，它结合了Vue 3框架的最新特性与Vite的快速开发优势。Vite是由Vue.js的作者尤雨溪开发的一款新型构建工具，旨在解决传统Webpack在开发阶段的性能瓶颈。Vue ...
vue解决页面放大图片模糊的问题
m0_56104994的博客
07-12 280
解决页面放大，图片模糊的问题
docker将Java、vue、nginx打进镜像（涉及容器打成镜像）
最新发布
qq_37752382的博客
07-15 331
按照上文拉取centos7，然后将需要的东西直接打进脚本，这样最简单，但是在拉取过程中，初始镜像contos7安装nginx需要安装一些工具包，拉取的时候报错了，原因还是在镜像源上，并且还想在上面装一些工具，另外创建容器不应该在里面做很多初始化的东西，每次更新业务包就行，4）准备文件完成后执行下面的就行（如果配置文件不对，比如nginx的配置等先进入镜像手动调整好，没问题了，再删除掉容器和镜像重新制作镜像即可）本文不讲安装docker,安装好安装，镜像源稍微麻烦点。1）生成镜像并创建容器。
【Vue】 style中的scoped
DX390609的博客
07-15 89
在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
xiejunlan的博客
07-11 1490
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。
vue+vite项目中跨域问题解决与跨域代理的两种方式原理详解
whs15193553607的博客
07-12 1265
（1） target参数：相当于是在代理地址（geoserver或者geoserverApi）前面拼接target代理后地址就是http://localhost:8080/geoserver或（2）changeOrigin参数：开启代理在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题；（3）rewrite参数：路径改写。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 185
vue 自定义滚动条同步拖动（移动端）
Vue和Element UI 路由跳转，侧边导航的路由跳转，侧边栏拖拽
爱敲代码的卡拉米的博客
07-12 327
项目中用到了点击侧边栏的跳转，所以记录下来，方便有需要的人用到~是通过重定向定位到登陆页的，然后通过登陆页跳转到主页。首先看布局，因为我的用于页面显示的。
vue+lodop实现web端打印功能
chensi_07的博客
07-11 323
安装包中的html文件为打印实例，点击其中一个用浏览器打开，点击红框如果出现下图弹窗，说明插件安装成功了。然后安装云打印插件：CLodop_Setup_for_Win32NT.exe；32位系统安装：install_lodop32.exe；64位系统安装：install_lodop64.exe；
关于vue环境变量的使用
m0_53912016的博客
07-15 117
1、创建在根目录下2、命名格式：命名分为 开发环境、测试环境、生产环境。
vue3中vite创建项目
07-28
在Vue 3中使用Vite来创建项目十分简单。下面是一些步骤： 1. 首先，确保你的环境具备Node.js和npm的安装。 2. 打开你的命令行工具，进入你想要创建项目的目录。 3. 运行以下命令来全局安装Vite： ``` npm install -g create-vite ``` 4. 然后，运行以下命令来创建一个Vue 3项目： ``` create-vite <项目名> --template vue ``` 这里的 `<项目名>` 是你想要创建的项目的名称，可以自己定义。 5. 创建完成后，进入项目目录： ``` cd <项目名> ``` 6. 最后，运行以下命令来安装项目的依赖并启动开发服务器： ``` npm install npm run dev ``` 现在，你就成功地使用Vite创建了一个Vue 3项目。你可以在浏览器中访问 `http://localhost:3000` 来查看你的应用程序。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值