学习Vue3 第二章(配置环境)

简介: 冷服务 默认的构建目标浏览器是能 在 script 标签上支持原生 ESM 和 原生 ESM 动态导入

1.安装nodejs(建议装14,16,版本稳定)


装过的同学可以忽略


下载 | Node.js 中文网


装完之后会有一个命令叫 npm


可以在终端输入npm -v 来检查是否安装成功


7d2fc2a1c353444b8e9dd56e0f63145f.png


2.构建vite项目


官方文档开始 {#getting-started} | Vite中文网


vite 的优势


冷服务   默认的构建目标浏览器是能  在 script 标签上支持原生 ESM  原生 ESM 动态导入

HMR  速度快到惊人的 模块热更新(HMR)


Rollup打包  它使用 Rollup 打包你的代码,并且它是预配置的 并且支持大部分rollup插件


使用vite初始化一个项目


npm


npm init vite@latest


Yarn


yarn create vite


运行之后


项目名称


79a9f7a215224aafb904217075b3816b.png


构建的项目模板


229e41aa7c124fb8a0ed11d89a37e342.png


切换目录


npm install 安装依赖包


npm run dev 启动


06271d7048fb4dbda0447badfd4c0e1d.png


package json 命令解析


{
  "scripts": {
    "dev": "vite", // 启动开发服务器,别名:`vite dev`,`vite serve`
    "build": "vite build", // 为生产环境构建产物
    "preview": "vite preview" // 本地预览生产构建产物
  }
}


3.安装Vue cli脚手架


npm install @vue/cli -g


检查是否安装成功


89487aa89f184aa9bd5f90df990a0380.png


vue create <project>


构建我们的cli 项目可以去对比一下


nodejs 底层原理(非重要)


Node.js 主要由 V8、Libuv 和第三方库组成:


1.Libuv:跨平台的异步 IO 库,但它提供的功能不仅仅是 IO,还包括进程、线程、信号、定时器、进程间通信,线程池等。


2.第三方库:异步 DNS 解析( cares )、HTTP 解析器(旧版使用 http_parser,新版使用 llhttp)、HTTP2 解析器( nghttp2 )、 解压压缩库( zlib )、加密解密库( openssl )等等。


3.V8:实现 JS 解析、执行和支持自定义拓展,得益于 V8 支持自定义拓展,才有了 Node.js。


你也可以理解成 js应用层  桥C/C++  底层C/C++


d3718cc40bd74ad884adb38d07a5b0cb.png


libuv源码地址GitHub - libuv/libuv: Cross-platform asynchronous I/O

libuvC语言源码解析


4a958b1a38a8469fb0bd9a9a8b53667c.png

目录
相关文章
|
12月前
|
资源调度 JavaScript 前端开发
Pinia 如何在 Vue 3 项目中进行安装和配置?
Pinia 如何在 Vue 3 项目中进行安装和配置?
973 4
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
185 1
vue学习第一章
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
196 1
vue学习第三章
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
158 1
vue学习第四章
|
JavaScript 前端开发
vue学习第五章
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,正向全栈进发。如果你从我的文章中受益,欢迎关注,我将持续分享更多优质内容。你的支持是我最大的动力!🎉🎉🎉
133 1
|
6月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
540 2
|
5月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
440 137
|
9月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
1001 0
|
9月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
10月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
1317 78

热门文章

最新文章