• 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