• 创建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代码
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Vue模版语法title>
    7. head>
    8. <body>
    9.     
    10.  
    11.     
    12.     <div id="app">
    13.         {{ msg }}
    14.     div>
    15.  
    16.     
    17.     <script src="./node_modules/vue/dist/vue.global.js">script>
    18.  
    19.     
    20.     <script type="text/javascript">
    21.         // 在vue.global.js 导出了Vue 实例，他向外暴露了很多方法
    22.         const { createApp } =Vue;//不要加单引号，首字母大写
    23.         // 通过导入的createApp 创建一个应用实例
    24.         createApp({//传递一个对象{}
    25.             //data选项，必须是函数，返回一个对象，在这个返回对象中的属性就是对应要vue中要使用
    26.             data(){
    27.                 return{
    28.                     msg: 'hello,vue3'//声明一个变量
    29.                 }
    30.             }
    31.         }).mount('#app');
    32.     script>
    33. body>
    34. html>

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

    效果如下

  • 相关阅读:
    求10的阶乘之和
    win11开机动画关闭教程
    AtCoder Beginner Contest 327 A-F
    Docker 入门指南
    【职场成长】一篇文章，讲清复盘！
    从位图到布隆过滤器，C#实现
    ubuntu部署k8s
    实验7（MPLS实验）
    机器学习基础：用 Lasso 做特征选择
    在Idea中使用git
  • 原文地址：https://blog.csdn.net/QWERTY55555/article/details/133589661