VUE安装部署+应用

qq_48566899

已于 2023-07-21 11:28:32 修改

阅读量207

点赞数

分类专栏：其他文章标签： vue.js 前端 javascript

于 2023-07-18 10:54:15 首次发布

本文链接：https://blog.csdn.net/qq_48566899/article/details/131781767

版权

其他专栏收录该内容

17 篇文章 1 订阅

订阅专栏

1.下载vscode
安装教程：https://blog.csdn.net/T1401026064/article/details/128692088
百度网盘：VSCodeUserSetup-x64-1.74.3.exe 提取码：8s8a

2.VUE教程
可以用！快捷输入代码框架。
教程：https://cn.vuejs.org/guide/quick-start.html#using-vue-from-cdn
复制链接：https://unpkg.com/vue@3
在这里插入图片描述

3.新建demo文件夹，并且将文件夹拖入vscode，然后再vscode中新建demo.html，根据上面的教程，输入代码
在这里插入图片描述
可以用！快捷输入代码框架。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">{{ message }}</div>

    <script>
      const { createApp } = Vue
      
      createApp({
        data() {
          return {
            message: 'Hello Vue!'
          }
        }
      }).mount('#app')
    </script>
</body>
</html>

然后用ctrl+s保存，之后安装插件open in browser 和live server ，然后右键open in browser
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<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="app">
        <p>姓名：{{username}}</p>
        <p>性别：{{gender}}</p>

        <p>{{desc}}</p>
        <p v-html="desc"></p>
    </div>

    <script>
        const vm = {
            data:function(){
                return {
                    username: 'zhangsan',gender:'男',desc:'<a href="http://www.baidu.com">百度</a>'

                }
            }

        }
        const app=Vue.createApp(vm)
        app.mount('#app')

    </script>
    
</body>
</html>

qq_48566899

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE安装部署+应用

教程：https://cn.vuejs.org/guide/quick-start.html#using-vue-from-cdn。安装教程：https://blog.csdn.net/T1401026064/article/details/128692088。3.新建demo文件夹，并且将文件夹拖入vscode，然后再vscode中新建demo.html，根据上面的教程，输入代码。复制链接：https://unpkg.com/vue@3。1.下载vscode。
复制链接

扫一扫