关于vue.js:P1vue3-安装-简单的前端实例

6次阅读

共计 780 个字符,预计需要花费 2 分钟才能阅读完成。

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>




正文完
 0