创建一个 Vue 应用

1、确保Node.js是最新版本的。

2、安装命令：npm create vue@latest。

安装后选项功能提示：

? 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 an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
? Add ESLint for code quality? … No / Yes
? Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

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

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

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

打包应用发布到生产环境时命令：

npm run build

通过 CDN 使用 Vue

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

注意：通过 CDN 使用 Vue 时，不涉及“构建步骤”。也无法使用单文件组件 (SFC) 语法。

示例：

<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>

使用 ES 模块构建版本

示例：

<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>

注意：我们使用了 script type="module"，且导入的 CDN URL 指向的是 Vue 的 ES 模块构建版本。

启用 Import maps

<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>

拆分模块

示例：

<!-- index.html -->
<div id="app"></div>

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

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

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