### Install Dependencies and Run Dev Server with Bun

Source: https://cn.vuejs.org/guide/quick-start.html

After creating a Vue project, install its dependencies using Bun and start the development server.

```sh
$ cd <your-project-name>
$ bun install
$ bun run dev
```

--------------------------------

### Install Dependencies and Run Dev Server with npm

Source: https://cn.vuejs.org/guide/quick-start.html

After creating a Vue project, install its dependencies using npm and start the development server.

```sh
$ cd <your-project-name>
$ npm install
$ npm run dev
```

--------------------------------

### Install Dependencies and Run Dev Server with Yarn

Source: https://cn.vuejs.org/guide/quick-start.html

After creating a Vue project, install its dependencies using Yarn and start the development server.

```sh
$ cd <your-project-name>
$ yarn
$ yarn dev
```

--------------------------------

### Install Dependencies and Run Dev Server with pnpm

Source: https://cn.vuejs.org/guide/quick-start.html

After creating a Vue project, install its dependencies using pnpm and start the development server.

```sh
$ cd <your-project-name>
$ pnpm install
$ pnpm run dev
```

--------------------------------

### Include Vue.js via CDN (Global Build with Composition API)

Source: https://cn.vuejs.org/guide/quick-start.html

Include the Vue.js global build version and use the Composition API with `setup()` in your HTML. This example demonstrates using `ref` for reactive data.

```html
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>
```

--------------------------------

### Configure Import Map with Setup Function

Source: https://cn.vuejs.org/guide/quick-start.html

This HTML snippet configures an import map for Vue and demonstrates using the Composition API with a setup function to manage state.

```html
<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'vue'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>
```

--------------------------------

### Include Vue.js via CDN (ES Module Build with Composition API)

Source: https://cn.vuejs.org/guide/quick-start.html

Include the Vue.js ES Module build version and use the Composition API with `setup()` in your HTML. This example demonstrates using `ref` for reactive data within an ES module context.

```html
<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>
```

--------------------------------

### Create Vue Project with npm

Source: https://cn.vuejs.org/guide/quick-start.html

Use npm to create a new Vue project with the official scaffolding tool. This command initiates an interactive setup process for your project.

```sh
$ npm create vue@latest
```

--------------------------------

### Create Vue Project with Bun

Source: https://cn.vuejs.org/guide/quick-start.html

Use Bun to create a new Vue project with the official scaffolding tool. This command initiates an interactive setup process for your project.

```sh
$ bun create vue@latest
```

--------------------------------

### Create Vue Project with pnpm

Source: https://cn.vuejs.org/guide/quick-start.html

Use pnpm to create a new Vue project with the official scaffolding tool. This command initiates an interactive setup process for your project.

```sh
$ pnpm create vue@latest
```

--------------------------------

### Create Vue Project with Yarn

Source: https://cn.vuejs.org/guide/quick-start.html

Use Yarn (v1+ or Modern) to create a new Vue project with the official scaffolding tool. This command initiates an interactive setup process for your project.

```sh
# For Yarn (v1+)
$ yarn create vue

# For Yarn Modern (v2+)
$ yarn create vue@latest
  
# For Yarn ^v4.11
$ yarn dlx create-vue@latest
```

--------------------------------

### Build Vue Project for Production with Bun

Source: https://cn.vuejs.org/guide/quick-start.html

Generate a production-ready build of your Vue application using Bun. The output will be placed in the ./dist folder.

```sh
$ bun run build
```

--------------------------------

### Build Vue Project for Production with npm

Source: https://cn.vuejs.org/guide/quick-start.html

Generate a production-ready build of your Vue application using npm. The output will be placed in the ./dist folder.

```sh
$ npm run build
```

--------------------------------

### Build Vue Project for Production with pnpm

Source: https://cn.vuejs.org/guide/quick-start.html

Generate a production-ready build of your Vue application using pnpm. The output will be placed in the ./dist folder.

```sh
$ pnpm run build
```

--------------------------------

### Import Vue using CDN

Source: https://cn.vuejs.org/guide/quick-start.html

This snippet shows the basic import statement for Vue.js using a CDN URL.

```javascript
import { createApp } from 'vue'
```

--------------------------------

### Include Vue.js via CDN (Global Build)

Source: https://cn.vuejs.org/guide/quick-start.html

Include the Vue.js global build version in your HTML using a script tag from a CDN. This makes all top-level APIs available on the global `Vue` object.

```html
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue
  
  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>
```

--------------------------------

### Configure Import Map for Vue

Source: https://cn.vuejs.org/guide/quick-start.html

This HTML snippet configures an import map to resolve the 'vue' import to a specific CDN URL. It then demonstrates mounting a Vue application.

```html
<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>
```

--------------------------------

### Build Vue Project for Production with Yarn

Source: https://cn.vuejs.org/guide/quick-start.html

Generate a production-ready build of your Vue application using Yarn. The output will be placed in the ./dist folder.

```sh
$ yarn build
```

--------------------------------

### Import Vue Component in HTML

Source: https://cn.vuejs.org/guide/quick-start.html

This HTML snippet demonstrates importing a Vue application and a custom component from a separate JavaScript file using ES modules.

```html
<div id="app"></div>

<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>
```

--------------------------------

### Include Vue.js via CDN (ES Module Build)

Source: https://cn.vuejs.org/guide/quick-start.html

Include the Vue.js ES Module build version in your HTML using a script tag with `type="module"` and import Vue. This approach is suitable for modern browsers and allows direct use of ES modules.

```html
<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  
  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>
```

--------------------------------

### Vue Component with Composition API

Source: https://cn.vuejs.org/guide/quick-start.html

This JavaScript snippet defines a Vue component using the Composition API, utilizing refs for reactive state and defining its template.

```javascript
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `<div>Count is: {{ count }}</div>`
}
```

--------------------------------

### Vue Component with Options API

Source: https://cn.vuejs.org/guide/quick-start.html

This JavaScript snippet defines a Vue component using the Options API, including its data properties and template.

```javascript
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>Count is: {{ count }}</div>`
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.