1

Vue学习笔记01：伊始

 1 year ago
source link: https://direct5dom.github.io/2022/08/09/Vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B001/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Vue学习笔记01：伊始

2022-08-09Vue学习笔记

script标签引入

对于学习Vue或制作原型来说，直接用<script>嵌入CDN是最好的选择。只需要再HTML文件中使用：

<script src="https://unpkg.com/vue@next"></script>

对于生产环境，推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏。

构建工具 (本地构建)

进入一个目录，在命令行输入：

npm init vue@latest

这一指令将会安装并执行create-vue，它是Vue官方的项目脚手架工具。

这里将会看到一些诸如TypeScript和测试支持之类的可选功能提示：

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

如果不确定是否要开启某个功能，可以直接按下回车键选择No。

在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

cd <your-project-name>
npm install
npm run dev

请注意，生成的项目中的示例组件是使用组合式API和<script setup>编写的，而非选项式API。

准备将应用发布到生产环境时，请运行：

npm run build

此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本。

IDE准备

官方推荐的是Visual Studio Code + Volar 扩展。

创建一个Vue应用

应用实例 (createApp)

每个Vue应用都是从createApp函数创建一个新的应用实例开始的：

import { createApp } from 'vue'

const app = createApp({
  /* 根组件选项 */
})

根组件 (RootComponent)

传入createApp的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。

如果使用单文件组件，可以直接从另一个文件中导入根组件。

import { createApp } from 'vue'
// 从一个单文件组件中导入根组件
import App from './App.vue'

const app = createApp(App)

大多数应用都是被组织成一个嵌套的、可重用的组件树。举个例子，一个todo应用组件树可能是这样的：

App (root component)
├─ TodoList
│  └─ TodoItem
│     ├─ TodoDeleteButton
│     └─ TodoEditButton
└─ TodoFooter
   ├─ TodoClearButton
   └─ TodoStatistics

挂载应用 (.mount())

应用实例必须在调用了.mount()方法后才会渲染出来。

该方法接收一个“容器”参数，可以是一个实际的DOM元素或是一个CSS选择器字符串：

<div id="app"></div>
app.mount('#app')

应用根组件的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。

.mount()方法应该始终在整个应用配置和资源注册完成后被调用。同时请注意，不同于其他资源注册方法，它的返回值是根组件实例而非应用实例。

DOM 中的根组件模板

当在未采用构建流程的情况下使用 Vue 时，我们可以在挂载容器中直接书写根组件模板：

<div id="app">
  <button @click="count++">{{ count }}</button>
</div>
import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')

当根组件没有设置template选项时，Vue将自动使用容器的innerHTML作为模板。

应用配置 (.config)

应用实例会暴露一个.config对象允许我们配置一些应用级的选项，例如定义一个应用级的错误处理器，它将捕获所有由子组件上抛而未被处理的错误：

app.config.errorHandler = (err) => {
  /* 处理错误 */
}

应用实例还提供了一些方法来注册应用范围内可用的资源，例如注册一个组件：

app.component('TodoDeleteButton', TodoDeleteButton)

这使得TodoDeleteButton在应用的任何地方都是可用的。我们会在指南的后续章节中讨论关于组件和其他资源的注册。

确保在挂载应用实例之前完成所有应用配置！

多个应用实例

应用实例并不只限于一个。

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

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

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

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK