文章目录
前言
将Vue.js添加到项目的三种主要方法：
1、在页面上将其作为CDN包导入
2、使用npm安装
3、使用正式的CLI来搭建项目，该项目为现代的前端工作流提供了包括电池在内的构建设置（例如，热重载，保存时的棉绒等）
一、通过script引入的方式实现vue3应用
1、CDN
出于原型制作或学习目的，您可以将最新版本与以下各项配合使用：
<script src="https://unpkg.com/vue@next"></script>
案例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="counter">
<h1>counter:{
{
num }}</h1>
</div>
<script>
// const Counter = {
// data(){ //data(){}和data:function(){}用法相同
// return {
// num:0
// }
// },
// }
const Counter = {
data:function(){
return {
num:0
}
}
}
// 创建一个应用，将配置的对象counter的内容渲染到选择器是#counter的元素上
let app = Vue.createApp(Counter).mount("#counter")
console.log(app)//输出的是代理对象
</script>
</body>
</html>
打印结果：
二、最新vite构建工具创建vue3项目
1、Vite
Vite是一个Web开发构建工具，由于其本机ES模块导入方法，因此可以闪电般快速地提供代码。
通过在终端中运行以下命令，可以使用Vite快速设置Vue项目。
使用npm：
1、$ npm init vite-app <project-name>
2、$ cd <project-name>
3、$ npm install
4、$ npm run dev
或使用纱线：
1、$ yarn create vite-app <project-name>
2、$ cd <project-name>
3、$ yarn
4、$ yarn dev
最低0.47元/天 解锁文章
495
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
