Vue3 从入门到放弃 （第二篇.创建第一个Web应用）

上一篇讲到了，Vue3的一些前期准备和环境配置.(Vue3 从入门到放弃 （第一篇.环境准备）_Meta.Qing的博客-CSDN博客)

今天我们来讲讲,项目结构以及各个文件介绍，并且创建我们第一个WEB应用.

我们继续上一篇.创建完工程结构.

 

目录介绍:

dist ： 这是npm run build打包好的目录，也是用于线上部署的目录.(有关于如何部署，部署方案等后续博文会具体展开)

node_modules: 这是npm install 相关的依赖包.git提交时或者打包时候要忽略掉.在工程根目录下会有个 .gitignore 配置文件，用于忽略某些文件更改不作提交

public : 这个目录是放置index.html模板文件,或者是网页icon

src： 包含代码，资源目录

        assets: 存放图片,视频各种媒体。css文件等

        components:  组件目录. 用于存成*.vue组件.组件命名规则推荐帕斯卡命名(例如HelloWorld.vue)

        router: 路由目录.用于路径，元信息,子路由配置等

        stores:换句话就是vuex.存放全局状态.可响应式.后续章节会单独讲

        views: 路由页面,也称片段(fragment).

下面我们将具体实践操作:

 1.将App.vue 目录删掉不必要代码.

 清理完之后.

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 <script> 语法，它具有更多优势：

• 更少的样板内容，更简洁的代码。
• 能够使用纯 TypeScript 声明 props 和自定义事件。
• 更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。
• 更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。

 其次，将 component和views目录所有文件删掉.

然后再router目录下的index.js文件里,替换以下代码

import { createRouter, createWebHashHistory} from "vue-router";

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "Home",
      component: () => import("@/views/Home/index.vue"),
    },
  ],
});

export default router;

 createWebHistory （历史模式）,createWebHashHistory(哈希模式)

 直观区别：hash模式url带#号，history模式不带#号。

 我们再views创建Home文件夹,创建HomeIndex.vue文件

Home/HomeIndex.vue

<template>
  <h1>我们第一个vue3应用</h1>
</template>

<script setup>

</script>

<style></style>

 我们再次回到浏览器输入http://127.0.0.1:5173/

 就此第一个应用就成功啦