# 安装

# Vue CLI 安装

你可以很容易的使用Vue CLI (opens new window)来安装Vue Class Component。运行如下命令创建一个新的项目：

$ vue create hello-world

系统将询问你是否使用预设。选择"Manually select features":

选择 TypeScript用来使用Vue Class Component。你也可以添加你需要的其他的功能：

输入y去选择使用Use class-style component syntax?:

你也可以根据自己的喜好配置其他功能。完成此安装过程后，Vue CLI会创建一个新的安装使用Vue Class Component的项目目录。

# 手动安装

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

# npm

你可以使用npm命令安装Vue Class Component。请确保已经安装了Vue核心库，因为Vue Class Component依赖它：

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

如果你更喜欢yarn也可以用yarn命令来安装:

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

# 构建设置

要使用 Vue Class Component你需要配置TypeScript (opens new window) 或者Babel (opens new window) 因为你的项目依赖ECMAScript stage 1 decorators (opens new window) 需要进行转换才能在浏览器上运行。

WARNING

它不支持 stage 2 装饰器，因为TypeScript Transpiler现在仅支持旧的装饰器规范。

# 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 }]
  ]
}

注意由于 Vue Class Component现在仅支持 stage 1(legacy) 装饰器规范，因此需要 legacy和 loose 选项。

# CDN

unpkg.com (opens new window)提供了基于 npm的 CDN连接。你可以替换 ulr中的 @latest部分来选择特定版本的 Vue Class Component (例如: 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 Class Component 针对不同的环境和用途提供不同的构建版本。

开发环境
- vue-class-component.js (UMD)
- vue-class-component.common.js (CommonJS)
- vue-class-component.esm.js (ES Module for bundlers)
- vue-class-component.esm.browser.js (ES Module for browsers)
生产环境 (minified)
- vue-class-component.min.js (UMD)
- vue-class-component.esm.browser.min.js (ES Module for browsers)

← 总览类组件 →