• JavaScript 之 Vue3 入门到精通+网络商城案例（一篇文章精通系列）【WebStorm版】

    JavaScript 之 Vue3 入门到精通（一篇文章精通系列）【WebStorm版】

    项目源代码：https://download.csdn.net/download/qq_44757034/86440913

    一、Vite创建Vue3 项目

    npm init vite@latest my-vue-app -- --template vue

    • 1

    在这里插入图片描述
    创建成功
    在这里插入图片描述

    在这里插入图片描述
    用WebStorm打开项目
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    自动下载好对应的依赖
    在这里插入图片描述
    启动运行项目
    在这里插入图片描述

     npm run dev

    • 1

    在这里插入图片描述
    http://127.0.0.1:5173/
    在这里插入图片描述
    提示要安装插件

    二、Vue3基本语法

    1、定义全局变量

    在这里插入图片描述

    <template>
  <h1>{{msg}}</h1>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>
<script setup>
// This starter template is using Vue 3