1. 装置 node 环境
C02GQ39QQ05P:~ root# node -v
v14.17.1
C02GQ39QQ05P:~ root# npm install vue
C02GQ39QQ05P:~ root# npm install -g vue-cli
C02GQ39QQ05P:~ root# npm install webpack -g webstorm 创立 vue 我的项目时能够获取环境变量时，即为上述装置胜利
编辑器中 webstorm 和 vs code 都是支流的
2. 间接用 <script> 引入
下载 vue.js
use CDN
#dev
<script src="https://unpkg.com/[email protected]"></script>
#pro
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.33/vue.cjs.js"></script>
3.vue3 实例
- 1). 创立 div 标签
- 2). 援用 vue 办法 mount
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
<div id="app"></div>
<div id="counter56">
<p>{{test56}}</p>
<p> test57 </p>
</div>
<script>
const Counter = {data:function () {
return {
test56: "sssss",
test57: "sean"
}
},
}
Vue.createApp(Counter).mount('#counter56')
</script>
</body>
</html>