创建vue3工程

一、新建工程目录E:\vue\projectCode\npm-demo用Visual Studio Code 打开目录

二、点击新建文件夹按钮，新建vue3-01-core文件夹

三、右键vue3-01-core文件夹点击在集成终端中打开

四、初始化项目，输入npm init 一直敲回车直到创建成功如下图

npm init

五、安装vue3

npm install vue@3.2.47

六、创建vue helloworld 页面

1、点击新建文件按钮，创建helloword.html

2、文本输入！加tab 插入html 模版

3、输入代码

声明一个根节点：vue管理dom的入口
引入vue.js库文件
编写vue.js代码


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue模版语法title>
head>
<body>
    
 
    
    <div id="app">
        {{ msg }}
    div>
 
    
    <script src="./node_modules/vue/dist/vue.global.js">script>
 
    
    <script type="text/javascript">
        // 在vue.global.js 导出了Vue 实例，他向外暴露了很多方法
        const { createApp } =Vue;//不要加单引号，首字母大写
        // 通过导入的createApp 创建一个应用实例
        createApp({//传递一个对象{}
            //data选项，必须是函数，返回一个对象，在这个返回对象中的属性就是对应要vue中要使用
            data(){
                return{
                    msg: 'hello,vue3'//声明一个变量
                }
            }
        }).mount('#app');
    script>
body>
html>

4、通过liveserver 插件，运行服务。

效果如下

相关阅读:
计算机网络复习03——数据链路层
linux安装jdk
2023年浙大MEM考前80天上岸经验分享
【算法|动态规划No.19】leetcode413. 等差数列划分
「Docker入门指北」容器很难理解？带你从头到尾捋一遍
AWS无服务器应用程序开发—第九章权限（Amazon IAM）
分布式session ——Spring Session原理、实战解决子域之间的 session 共享问题、不同服务器 session 共享解决方案
2023 NewStarCTF --- wp
【入门篇】1.3 redis客户端之 jedis 高级使用示例
23111710[含文档+PPT+源码等]计算机毕业设计基于SpringBoot的体育馆场地预约赛事管理系统的设计

原文地址：https://blog.csdn.net/QWERTY55555/article/details/133589661