# 安装

# Vue CLI 设置

您可以使用 Vue CLI 轻松设置您的 Vue 类组件项目。运行以下命令创建一个新项目

$ vue create hello-world

系统会询问您是否使用预设。选择“手动选择功能”

选中 TypeScript 功能以使用 Vue 类组件。如果需要，您还可以添加其他功能

对于问题“使用类样式组件语法？”，请按 y

您可以根据自己的喜好回答剩余的问题。完成此设置过程后，Vue CLI 会创建一个包含已安装 Vue 类组件的新项目目录。

# 手动设置

如果您更喜欢手动设置，请通过 npm 安装它并配置您的构建工具。

# npm

您可以使用 npm 命令安装 Vue 类组件。请确保也安装 Vue 核心库，因为 Vue 类组件依赖于它

$ npm install --save vue vue-class-component

如果您更喜欢，可以使用 yarn 命令

$ yarn add --save vue vue-class-component

# 构建设置

要使用 Vue 类组件，您需要在您的项目中配置 TypeScript 或 Babel，因为它依赖于 ECMAScript 阶段 1 装饰器，这是在浏览器上运行所需的转译。

# TypeScript

在您的项目根目录上创建 tsconfig.json 并指定 experimentalDecorators 选项，以便它转译装饰器语法

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "strict": true,
    "experimentalDecorators": true
  }
}

# Babel

安装 @babel/plugin-proposal-decorators 和 @babel/plugin-proposal-class-properties

$ npm install --save-dev @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties

然后在您的项目根目录上配置 .babelrc

{
  "plugins": [
    ["@babel/proposal-decorators", { "legacy": true }],
    ["@babel/proposal-class-properties", { "loose": true }]
  ]
}

请注意，需要 legacy 和 loose 选项，因为 Vue 类组件目前只支持阶段 1（legacy）装饰器规范。

# CDN

unpkg.com 提供基于 npm 的 CDN 链接。您可以通过替换 url 中的 @latest 部分来选择 Vue 类组件的特定版本（例如，https://unpkg.com/vue-class-component@7.2.2/dist/vue-class-component.js 用于使用版本 7.2.2）。

<!-- UMD build -->
<script src="https://unpkg.com/vue-class-component@latest/dist/vue-class-component.js"></script>

<!-- UMD minified build -->
<script src="https://unpkg.com/vue-class-component@latest/dist/vue-class-component.min.js"></script>

<!-- ES Module build -->
<script src="https://unpkg.com/vue-class-component@latest/dist/vue-class-component.esm.browser.js"></script>

<!-- ES Module minified build -->
<script src="https://unpkg.com/vue-class-component@latest/dist/vue-class-component.esm.browser.min.js"></script>

# 不同版本

Vue 类组件以不同版本的形式提供，适用于不同的环境和用途。

• 用于开发
  • vue-class-component.js (UMD)
  • vue-class-component.common.js (CommonJS)
  • vue-class-component.esm.js (用于捆绑器的 ES 模块)
  • vue-class-component.esm.browser.js (用于浏览器的 ES 模块)
• 用于生产（最小化）
  • vue-class-component.min.js (UMD)
  • vue-class-component.esm.browser.min.js (用于浏览器的 ES 模块)