설치하다

Directory

• Vue Devtools

• 직접 <script>를 사용하여

  • CDN

• NPM

• 명령줄 도구

• 다양한 빌드에 대한 설명

  • 용어

  • 런타임 + 컴파일러 대 런타임 전용

  • 개발 환경 대 .제작 환경 모드

  • CSP 환경

• 개발 버전

• Bower

• AMD 모듈 로더

호환성

Vue 지원하지 않음 Vue는 IE8이 에뮬레이트할 수 없는 ECMAScript 5 기능을 사용하기 때문에 IE8 이하입니다. 하지만 모든 ECMAScript 5 호환 브라우저를 지원합니다.

변경 로그

최신 안정 버전: 2.6.10

각 버전의 변경 로그는 GitHub에서 확인하세요.

Vue Devtools

Vue를 사용하는 경우 브라우저에 Vue Devtools를 설치하는 것이 좋습니다. 보다 사용자 친화적인 인터페이스에서 Vue 애플리케이션을 검토하고 디버그할 수 있습니다.

<script>를 직접 사용하여 가져오기 <script> 引入

直接下载并用 <script> 标签引入，Vue

<script> 태그를 직접 다운로드하여 사용하여 가져오기, Vue가 전역 변수로 등록됩니다.

개발 환경에서 압축 버전을 사용하지 마세요. 그렇지 않으면 일반적인 오류에 대한 모든 경고가 손실됩니다.

프로덕션 버전경고 제거, 33.30KB min+gzip

CDN

프로토타입 제작이나 학습의 경우 다음과 같은 최신 버전을 사용할 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

프로덕션 환경의 경우 권장합니다. 새 버전으로 인한 예상치 못한 손상을 방지하기 위해 명확한 버전 번호 및 빌드 파일 링크:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

기본 ES 모듈을 사용하는 경우 여기에 ES 모듈 호환 빌드 파일도 있습니다:

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js'
</script>

cdn에서 찾을 수 있습니다. .jsdelivr.net/npm/vue NPM 패키지의 소스 코드를 찾아보세요.

Vue는 unpkg 및 cdnjs에서도 사용할 수 있습니다(cdnjs 버전 업데이트가 약간 늦어질 수 있습니다).

다양한 빌드 버전을 이해하고 게시된 사이트 에서 프로덕션 환경 버전vue.js 换成 vue.min.js을 사용하세요. 이는 개발 환경보다 훨씬 빠른 속도 경험을 허용하는 작은 빌드입니다.

NPM

Vue^[1]로 대규모 애플리케이션을 구축할 때는 NPM 설치를 사용하는 것이 좋습니다. NPM은 webpack 또는 Browserify과 같은 모듈 번들러와 잘 작동합니다. 동시에 Vue는 단일 파일 구성 요소를 개발하기 위한 지원 도구도 제공합니다.

# 最新稳定版
$ npm install vue

명령줄 도구(CLI)

Vue는 단일 페이지 애플리케이션(SPA)을 위한 복잡한 스캐폴딩을 빠르게 구축할 수 있는 공식 CLI를 제공합니다. 최신 프런트엔드 워크플로를 위한 배터리 포함 빌드 설정을 제공합니다. 실행하는 데 몇 분 밖에 걸리지 않으며 핫 리로드, 저장 시 보푸라기 검사 및 프로덕션 준비 빌드가 함께 제공됩니다. 자세한 내용은 Vue CLI 문서를 참조하세요.

CLI 도구는 사용자가 Node.js 및 관련 빌드 도구에 대해 어느 정도 이해하고 있다고 가정합니다. Vue를 처음 사용하는 경우 먼저 빌드 도구 없이 Guide를 읽어본 후 CLI를 사용하기 전에 Vue 자체에 익숙해지는 것이 좋습니다.

다양한 빌드에 대한 설명

NPM 패키지dist/의 디렉토리에서 다양한 Vue.js 빌드를 찾을 수 있습니다. 이들 간의 차이점은 여기에 나열되어 있습니다.

Terms

• Full Version: 컴파일러와 런타임이 모두 포함된 버전입니다.

• Compiler: 템플릿 문자열을 JavaScript 렌더링 함수로 컴파일하는 데 사용되는 코드입니다.

• Runtime: Vue 인스턴스 생성, 가상 DOM 렌더링 및 처리 등에 사용되는 코드. 기본적으로 컴파일러를 제외한 다른 모든 것.

• UMD: UMD 버전은 <script> 태그를 통해 브라우저에서 직접 사용할 수 있습니다. jsDelivr CDN UMD 버전의 https://cdn.jsdelivr.net/npm/vue<script> 标签直接用在浏览器中。jsDelivr CDN 的 https://cdn.jsdelivr.net/npm/vue 默认文件就是运行时 + 编译器的 UMD 版本 (vue.js)。

• CommonJS：CommonJS 版本用来配合老的打包工具比如 Browserify 或 webpack 1。这些打包工具的默认文件 (pkg.main) 是只包含运行时的 CommonJS 版本 (vue.runtime.common.js)。

• ES Module：从 2.6 开始 Vue 会提供两个 ES Modules (ESM) 构建文件：

  • 为打包工具提供的 ESM：为诸如 webpack 2 或 Rollup 提供的现代打包工具。ESM 格式被设计为可以被静态分析，所以打包工具可以利用这一点来进行“tree-shaking”并将用不到的代码排除出最终的包。为这些打包工具提供的默认文件 (pkg.module) 是只有运行时的 ES Module 构建 (vue.runtime.esm.js)。

  • 为浏览器提供的 ESM (2.6+)：用于在现代浏览器中通过 <script type="module"> 直接导入

运行时 + 编译器 vs. 只包含运行时

如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就将需要加上编译器，即完整版：

// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})
// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

当使用 vue-loader 或 vueify 的时候，*.vue(vue. js).

🎜🎜패키징 도구용 ESM: 와 같은 도구용 webpack 2🎜 또는 Rollup🎜에서 제공하는 최신 번들링 도구입니다. ESM 형식은 정적으로 분석되도록 설계되었으므로 패키징 도구는 이를 활용하여 "트리 쉐이킹"을 수행하고 최종 패키지에서 사용되지 않는 코드를 제외할 수 있습니다. 이러한 패키징 도구(pkg.module)와 함께 제공되는 기본 파일은 런타임 전용 ES 모듈 빌드(vue.runtime.esm.js)입니다. 🎜🎜🎜🎜ESM(2.6+): <script type="module"> 🎜🎜

module.exports = {  // ...
  resolve: {    alias: {      'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
    }
  }
}

const alias = require('rollup-plugin-alias')

rollup({  // ...
  plugins: [
    alias({      'vue': require.resolve('vue/dist/vue.esm.js')
    })
  ]
})

{  // ...
  "browser": {    "vue": "vue/dist/vue.common.js"
  }
}

{  // ...
  "alias": {    "vue" : "./node_modules/vue/dist/vue.common.js"
  }
}

module.exports = {
  mode: 'production'
}

var webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  ]
}

但是在 webpack 3 及其更低版本中，你需要使用 DefinePlugin：

const replace = require('rollup-plugin-replace')
rollup({
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}).then(...)

Rollup

使用 rollup-plugin-replace：

NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

Browserify

为你的包应用一次全局的 envify 转换。

git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build

也可以移步生产环境部署。

CSP 环境

有些环境，如 Google Chrome Apps，会强制应用内容安全策略 (CSP)，不能使用 new Function() 对表达式求值。这时可以用 CSP 兼容版本。完整版本依赖于该功能来编译模板，所以无法在这些环境下使用。

另一方面，运行时版本则是完全兼容 CSP 的。当通过 webpack + vue-loader 或者 Browserify + vueify 构建时，模板将被预编译为 render

# 最新稳定版本
$ bower install vue

Parcel