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

本文涉及的产品
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
简介: 冷服务 默认的构建目标浏览器是能 在 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

目录
相关文章
|
3天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
2天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
21 4
|
1天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
13 3
|
2天前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
|
3天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
6天前
|
JavaScript API
vue3知识点:ref函数
vue3知识点:ref函数
16 2
|
6天前
|
API
vue3知识点:reactive函数
vue3知识点:reactive函数
13 1
|
6天前
|
JavaScript 前端开发 API
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
12 0
|
4天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
4天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
22 9