网站首页 > 知识剖析正文

Vue 3学习:2. 项目结构及变化点（vuecli2项目结构）

nixiaole 2024-11-15 22:59:04 知识剖析 17 ℃

项目结构

使用 vite 创建的项目结构还是比较简洁的，只包含了项目运行必须的文件。细心观察可以发现， index.html 直接创建在项目的根目录下面，而不再像 vue 2 放在 public 文件夹中。

package.json

package.json 也变的简洁了，项目的运行和编译直接依赖 vite 工具。

{
  "name": "vue3-meteor",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.0.2"
  },
  "devDependencies": {
    "vite": "^1.0.0-rc.8",
    "@vue/compiler-sfc": "^3.0.2"
  }
}

index.html

index.html 的内容也有一个重大的变化，在里面增加了 <script> 引用：

<script type="module" src="/src/main.js"></script>

并设置了 type="module"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

App.vue

在 Vue 3 中，<template> 标签下支持同时存在多个节点：

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

在 Vue 2 中，如果 <template> 标签下存在多个节点会直接抛出异常。

上一篇： Blob-对象介绍（blob类型数据）
下一篇： Vue 3 组件开发(一):搭建表格编辑系统 - 环境搭建

网站首页 > 知识剖析 正文