创建你的第一个Vue项目(小白专享版本)
原创创建你的第一个Vue项目(小白专享版本)
原创
文章目录
🥦介绍node
Node.js是一个基于Chrome V8引擎的JavaScript运行环境，由Ryan Dahl开发并于2009年5月发布。以下是关于Node.js的详细介绍：
- 特性：
- 服务器端：Node.js运行在服务器端，为JavaScript提供运行环境。
- 非阻塞异步：Node.js采用了非阻塞型I/O机制，使得在执行I/O操作时不会造成任何阻塞。例如，当执行访问数据库的代码后，Node.js会立即转而执行其他代码，而将数据库返回结果的处理代码放在回调函数中，从而提高程序的执行效率。
- 事件驱动：Node.js使用事件驱动模型。当新的请求到来时，请求会被压入一个事件队列中，然后通过一个循环来检测队列中的事件状态变化。如果检测到有状态变化的事件，那么就执行该事件对应的处理代码。
- 应用场景：
- 服务器端开发：Node.js可以用于构建后台服务，处理接收的前端请求并返回相应的响应。
- 数据处理与实时分析：借助其事件驱动和非阻塞I/O特性，Node.js可以在处理数据流和实时分析任务时表现出很高的性能。例如，实时数据收集、处理和分析，如实时日志收集和分析、网络监控等。
- 异步任务处理：Node.js的异步编程模型可以帮助处理大量的异步任务，如文件上传、下载、邮件发送等。在这些场景中，Node.js可以有效地隔离I/O密集型任务，提高系统的并发处理能力。
- 跨平台桌面应用开发：借助Node.js和Electron框架，开发者可以构建跨平台的桌面应用，实现对本地资源的高效访问，同时使用JavaScript、HTML和CSS构建用户界面。
- 发展历程：
- 2009年，Ryan Dahl在GitHub上发布了Node.js的最初版本。
- 2010年，Node.js获得云计算服务商Joyent的资助，创始人Ryan Dahl加入Joyent全职负责Node的发展。
- 2011年，Node.js在微软的支持下发布了Windows版本。
- 至今，Node.js仍在不断发展，最新版本为20.8.1（包括npm 10.1.0）
🥦下载node.js
输入下面命令查看版本
node -v官方文档建议如下
🥦创建Vue3项目
创建一个空文件夹（最好路径不要有中文）
之后运行
npm create vue@latest如果报错，请参考【问题：创建Vue项目】npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR!
若成功则满足下图，
项目构建完成，可执行以下命令：
cd test（项目名）
npm install
npm run dev一定要进入文件里面再下载依赖包，最后启动输入网址就可以查看你的初识界面
注意：服务开启过程中才能打开界面，否则无法访问
运行后的界面如下
🥦VSCode和Vue3
官方最近的IDE是VSCode
当然我们现在并没有完成一个完整的项目，故不需要发布
🥦CDN（内容分发网络）
这段文本是在说明如何通过 CDN 使用 Vue。CDN（内容分发网络）是一种网络服务，它可以提供静态文件（如 JavaScript、CSS、图片等）的快速交付，使得网站或应用程序加载速度更快。
🥦使用全局构建版本
我们创建一个简单的HTML进行测试一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue CDN Example</title>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<button @click="reverseMessage">Reverse Message</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello, Vue!'
}
},
methods: {
reverseMessage() {
this.message = this.message.split('').reverse().join('');
}
}
});
app.mount('#app');
</script>
</body>
</html>运行结果如下
然后，我们在 script>标签中创建了一个 Vue 应用，并定义了一个 message 数据属性和一个 reverseMessage 方法。在 HTML 中，我们使用了双花括号语法 ({{}}) 来显示 message，并在按钮上绑定了 reverseMessage 方法。最后，我们使用 app.mount(‘#app’) 将 Vue 应用挂载到了页面上的一个 div>元素中。
这样，当你打开这个 HTML 文件时，就会看到一个包含“Hello, Vue!”消息的标题和一个按钮。点击按钮后，消息会被反转。
🥦ES 模块构建版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue CDN Example with ES Modules</title>
</head>
<body>
<div id="app">{{ message }}</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
</body>
</html>
🥦启用 Import maps
启用 Import Maps 是指在浏览器中启用 Import Maps 功能。Import Maps 是一项 Web 平台的新功能，它允许开发者在客户端（浏览器）中指定模块的导入路径和对应的 URL。这样一来，开发者就不再需要在每个模块中编写完整的 URL 或相对路径，而是可以在单独的配置文件中统一管理模块的导入路径，提高代码的可维护性和可读性。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。