1. CDN 引入
在 HTML 文件中使用 CDN 引入 Vue.js 3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 3</title>
<!-- 引入 Vue.js 3 的 CDN 链接 -->
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello, Vue 3!'
};
}
});
app.mount('#app');
</script>
</body>
</html>
2. 使用 npm 安装
在使用 npm 进行安装时,首先确保你的项目中已经安装了 Node.js。然后,使用以下命令安装 Vue:
npm install vue@next
在你的项目中使用 Vue:
// 在你的 JavaScript 文件中引入 Vue
import { createApp } from 'vue';
// 创建一个 Vue 实例
const app = createApp({
data() {
return {
message: 'Hello, Vue 3!'
};
}
});
// 挂载 Vue 实例到指定的元素
app.mount('#app');
上述两种方式都是安装 Vue.js 3 的有效方式,你可以根据项目需求选择合适的方式。当然,如果使用的是构建工具(比如 Vue CLI),它会为你处理所有的依赖关系和配置,你只需专注于编写 Vue 代码即可。
转载请注明出处:http://www.zyzy.cn/article/detail/12970/Vue3