VUE3【学习二】：使用 Vite 快速构建 Vue3 项目及createApp()和mount()方法讲解

已于 2022-03-30 23:14:19 修改
阅读量1.4k 收藏
点赞数
分类专栏： vue vue问题解答 文章标签： vue.js html 前端框架
于 2022-03-30 23:12:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42486438/article/details/123858206
版权
本文介绍了如何使用Vite快速创建Vue3项目，通过npm初始化，安装依赖，运行dev服务器来启动项目。在浏览器中可以看到计数器功能，通过createApp创建应用并利用mount挂载到DOM元素。同时，文章提到了Vue3中的组件通信，包括props和事件处理，详细阐述了createApp和mount的作用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、在本地新建文件夹，VSCode打开，输入以下命令：npm init vite-app <project-name>（备注：< 这里填入自己的项目名称 >）

二、按照提示，进入刚创建的文件夹

三、输入：npm install ，安装相关的基础的依赖包

四、 npm run dev运行程序

访问http://localhost:3000/ 即可看到新建的项目

最低0.47元/天 解锁文章
详解Vite创建Vue3项目+vue-router+ts+vite+element-plus
qq_44552416的博客
01-17 2391
在之前的文章中写过“Vue3+TS+ElementPlus的安装和使用教程【详细讲解】”，但那篇文章写的是创建vue3的项目没有使用到Vite构建工具进行创建还是使用的常规webpacket构建工具进行创建的。提到Vite和webpacket的时候我们可以简单说一下。Vite 和 Webpack 都是现代化的前端构建工具，它们可以帮助开发者优化前端项目的构建和性能。虽然它们的目标是相似的，但它们在设计和实现方面有许多不同之处。具体的区别和工作原理我们可以看此文章“vite和webpack的区别和作用。
从零开始：如何用 Vue 3 和 Vite 创建现代前端项目
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
02-14 1904
希望本文对你在 Vue 3 项目的开发过程中有所帮助，下一步可以根据项目需求进行更多的插件集成和自定义配置，打造一个符合你需求的现代化前端项目。的极速构建与开发体验，使得开发过程更加高效和灵活。如果你还没有试过 Vite，建议尽快体验它，尤其是在开发速度和构建优化方面，Vite 会给你带来巨大的帮助。从零开始搭建一个前端项目，并展示一些常见的项目配置和优化技巧，帮助开发者高效创建并维护现代化的前端应用。则是一个现代化的构建工具，它通过引入原生 ES 模块支持和极快的开发模式，成为前端开发的新宠。
create-vite-app:在几秒钟内创建一个由Vite驱动的应用程序！
03-18
[存档] create-vite-app 此已移至 。
通过 Vite 的 create-app 学习如何实现一个简易版 CLI
五柳
02-08 2810
前言 前段时间，尤雨溪回答了一个广大网友都好奇的一个问题：Vite 会不会取代 Vue CLI？ 答案是：是的！ 那么，你开始学 Vite 了吗？用过 Vite 的同学应该都熟悉，创建一个 Vite 的项目模版是通过 npm init @vitejs/app 的方式。而 npm init 命令是在 npm@6.1.0 开始支持的，实际上它是先帮你安装 Vite 的 @vitejs/create-app 包（package），然后再执行 create-app 命令。 至于 @vitejs/create-ap
Vue 3 中通过 createApp 创建的 app 实例的所有核心方法，包含完整示例、使用说明及对比表格
最新发布
爱的叹息的专栏
04-28 1048
Vue 3 中通过 createApp 创建的 app 实例的所有核心方法，包含完整示例、使用说明及对比表格
推荐开源项目：【create-vite-app】 - 极速的Vite应用创建工具
gitblog_00040的博客
05-19 542
推荐开源项目：【create-vite-app】 - 极速的Vite应用创建工具 create-vite-appCreate a Vite-powered app in seconds!项目地址:https://gitcode.com/gh_mirrors/cr/create-vite-app 1. 项目介绍 create-vite-app（已更新为create-vite）是一个简洁而高效的命令...
VUE3源码-CreateApp与mount
lln0001的博客
10-14 983
vue3中实例化一个vue，是从createApp开始的，那我们createApp到底做了啥呢？ createApp源码 const createApp = ((...args) => { const app = ensureRenderer().createApp(...args); { injectNativeTagCheck(app); injectCompilerOptionsCheck(app); } ..
create-vite-app projectName create-vite-app : 无法加载文件
zhangtw的博客
05-05 356
因为windows10没有管理权限，所以我们要设置权限 打开终端 输入npm install -g create-vite-app后选择A或Y 在重新建立项目
1小时搞定Vue3+vite+Element UI或者Element Plus开发后台管理系统，使用vite构建管理项目，前后端分离包含mysql数据库，网站后台
编程小石头
04-29 5425
我们通常给小程序或者app开发后台时，不可避免的要用到可视化的数据管理后台，而vue和Element是我们目前比较主流的开发管理后台的主流搭配。所以今天石头哥就带大家来一起学习下vue3和Element plus的开发。
【Vite+Vue3+TS】基于Vite+Vue3+TypeScript+ESLint+Prettier+Stylelint搭建项目（亲测超详细）
aDiaoYa_的博客
01-25 3387
结合了很多项目和文章，总结一篇项目构建的笔记。 温馨提示：文章末尾记录了我在搭建项目过程中，遇到的一些问题和解决办法 ~
Vue+Vite创建vue3项目,create-vite-app xxxx报错
weixin_43305450的博客
09-07 1507
Vue+Vite创建vue3项目,create-vite-app xxxx报错
Vue项目开发，单文件组件，Vite构建工具与内置 create-vue 脚手架工具，路由
qq_63322025的博客
10-19 858
Vue项目开发，单文件组件，Vite构建工具与内置 create-vue 脚手架工具，路由
vue项目用created()初始化页面所需的数据
weixin_42966151的博客
12-02 3937
有过这种情况，在页面加载时，初始化所需的数据，就需要用created()了。vue.js中created方法是一个生命周期钩子函数，一个vue实例被生成后会调用这个函数。一个vue实例被生成后还要绑定到某个html元素上，之后还要进行编译，然后再插入到document中。以下，以一个用户信息页面举例，用axios进行post请求，使用node.js连接mysql访问数据并返回给当前form表单。第三步，新建created（）方法，并在其中调用初始化数据的方法。第一步，新建一个form表单。
Vue3 注册组件、使用样式、props的使用和绑定类名
m0_52411807的博客
06-26 812
在项目目录打开cmd输入 main.js src目录下的App.vue 01.gobalReg下的Swiper.vue和Test.vue 02.prviateReg下的Search.vue 上述组件的显示效果 03.style目录下的App.vue和List.vue 显示效果 显示效果 05.class&style下的App.vue和Style.vue 显示效果.........
Vue - 使用vite创建工程
qq_33962481的博客
12-26 445
文章目录一、什么是vite二、vite使用流程 一、什么是vite vite是新一代前端构建工具 二、vite使用流程 创建工程 : npm init vite-app <project-name> 进入工程目录 : cd <project-name> 安装依赖 : npm install 运行 : npm run dev ...
vue3+vite搭建项目（五）
weixin_52921391的博客
05-27 614
接着上一节更新的内容，这一章主要讲讲vue3的生命周期 先复习一下vue2的生命周期 vue3的生命周期
vite+vue3，引入echarts的四种方式
weixin_57541273的博客
11-11 6421
首先安装依赖 npm install echarts --save 第一种，在mounted中调用 main.js中 import { createApp } from 'vue' import * as echarts from 'echarts' import router from './router' import './assets/style.css' import App from './App.vue' const app = createApp(App) app.use(r
构建vue3.0工程两种方式
xzg199153的博客
06-12 207
使用查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
用vite构建vue3应该注意的点
weixin_51364599的博客
04-13 1508
试试vite加vue3
探索Vue 3游乐场：体验Vue 3全新特性与API
Vite作为Vue 3的官方构建工具，是一个轻量级、快速的开发服务器，能够提供即时热更新和快速的构建速度，与Vue 3的配合使用可以进一步提高开发体验。 综上所述，Vue 3游乐场是一个集成了Vue 3全部新特性的学习平台，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值