Vue学习：03-创建Vue工程_visit vuejs.org to read the documentation-优快云博客

一、创建单页面应用程序

Vue3中文官网：Vue.js - 渐进式 JavaScript 框架 | Vue.jsVue.js - 渐进式的 JavaScript 框架https://cn.vuejs.org/

创建应用：

在D盘建立一个vuestudy目录，然后使用cmd命令进入该目录，在该目录下使用下面命令建立vue项目：

pnpm create vue@latest

在这里，我们什么都不选择，建立一个最基本的vue项目就可以，项目名称为demo666，后期我们会在这个项目的基础上进行各项功能的增加。

二、项目运行效果

按照项目提示，进入该项目目录，安装所需依赖包后，运行项目。将pnpm run dev运行后显示的网址复制，打开浏览器，在地址栏中粘贴访问该网址，就可查看新建的vue项目的执行效果。

三、vue 项目的目录组成

使用VSCode打开该项目，查看项目组成：

App.vue：用来编写待渲染的模板结构，也称为根组件

<script setup></script>

<template>
  <h1>You did it!</h1>
  <p>
    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
    documentation
  </p>
</template>

<style scoped></style>

index.html：单页面程序唯一的界面文件

main.js：项目的主入口文件，把 App.vue 渲染到了 index.html 中

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

1、每个 Vue 应用都是通过 createApp 函数创建一个新的应用实例，我们传入 createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。

2、应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串，应用根组件的内容将会被渲染在容器元素里面，容器元素自己将不会被视为应用的一部分。

四、vue 组件的三个组成部分

查看App.vue文件，我们会发现，每个 .vue 组件都由三部分构成，分别是：

● template：组件的模板结构 -- 视图，template 是容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素

● script：组件的 JavaScript 行为 -- vue 实例

● style：组件的样式 -- css 样式

注意：根组件的模板通常是组件本身的一部分，但也可以直接通过在挂载容器内编写模板来单独提供，当根组件没有设置 template 选项时，Vue 将自动使用容器的 innerHTML 作为模板。

五、多个应用实例

应用实例并不只限于一个，createApp API 允许你在同一个页面中创建多个共存的 Vue 应用，而且每个应用都拥有自己的用于配置和全局资源的作用域。

const app1 = createApp({
  /* ... */
})
app1.mount('#container-1')

const app2 = createApp({
  /* ... */
})
app2.mount('#container-2')

如果你正在使用 Vue 来增强服务端渲染 HTML，并且只想要 Vue 去控制一个大型页面中特殊的一小部分，应避免将一个单独的 Vue 应用实例挂载到整个页面上，而是应该创建多个小的应用实例，将它们分别挂载到所需的元素上去。