头图

1.安装node 环境

image.png

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 

image.png

webstorm创建vue项目时可以获取环境变量时,即为上述安装成功

编辑器中webstorm和 vs code 都是主流的

2.直接用 <script> 引入

下载vue.js

image.png

use CDN

#dev
<script src="https://unpkg.com/vue@next"></script>
#pro
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.33/vue.cjs.js"></script>

image.png

3.vue3 实例

  • 1). 创建div标签

image.png

  • 2). 引用vue方法mount

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@next"></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>




image.png


锅包肉
89 声望17 粉丝

这个人很懒,没有什么说的。