Installer

La version de développement

comprend des avertissements complets et un mode de débogage

Production Version Avertissement réalisé, 33.30Kb min + gzip

cdn

pour le prototypage ou l'apprentissage, vous pouvez utiliser la dernière version comme celle-ci:

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

pour les environnements de production, nous recommandons Lien vers un numéro de version clair et un fichier de build pour éviter les dommages inattendus causés par les nouvelles versions :

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

Si vous utilisez des modules ES natifs, il existe également un fichier de build compatible avec le module ES ici :

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

Vous pouvez le trouver sur cdn .jsdelivr.net/npm/vue Parcourez le code source du package NPM.

Vue est également disponible sur unpkg et cdnjs (la mise à jour de la version de cdnjs est peut-être légèrement en retard).

Veuillez vous assurer de comprendre les différentes versions de build et d'utiliser la version de l'environnement de production dans votre site publié, vue.js 换成 vue.min.js. Il s'agit d'une version plus petite qui permet une expérience beaucoup plus rapide que l'environnement de développement.

NPM

Il est recommandé d'utiliser l'installation de NPM lors de la création d'applications volumineuses avec Vue^[1]. NPM fonctionne bien avec les bundlers de modules comme webpack ou Browserify. Dans le même temps, Vue fournit également des outils de support pour développer des composants à fichier unique.

# 最新稳定版
$ npm install vue

Outil de ligne de commande (CLI)

Vue fournit une CLI officielle pour créer rapidement un échafaudage complexe pour les applications à page unique (SPA). Il fournit des paramètres de construction inclus avec des piles pour les flux de travail frontaux modernes. Il ne prend que quelques minutes pour être opérationnel et est livré avec un rechargement à chaud, une vérification des peluches lors de la sauvegarde et une version prête pour la production. Pour plus de détails, veuillez consulter la Documentation Vue CLI.

Les outils CLI supposent que les utilisateurs ont un certain niveau de compréhension de Node.js et des outils de construction associés. Si vous êtes nouveau sur Vue, nous vous recommandons fortement de lire d'abord le Guide sans outil de construction, puis de vous familiariser avec Vue elle-même avant d'utiliser la CLI.

Explication des différentes builds

Dans le répertoire du dist/Package NPM, vous trouverez de nombreuses builds Vue.js différentes. Les différences entre eux sont répertoriées ici :

Conditions

• Version complète : La version qui inclut à la fois le compilateur et le runtime.

• Compilateur : Code utilisé pour compiler des chaînes de modèles dans des fonctions de rendu JavaScript.

• Runtime : Code utilisé pour créer des instances Vue, rendre et traiter le DOM virtuel, etc. En gros, tout le reste sauf le compilateur.

• UMD : La version UMD est utilisable directement dans le navigateur via la balise <script>. 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 de la version jsDelivr CDN UMD (vue. js).

🎜🎜ESM pour les outils de packaging : pour des outils tels que Outils de regroupement modernes fournis par webpack 2🎜 ou Rollup🎜. Le format ESM est conçu pour être analysé statiquement, de sorte que les outils de packaging peuvent en profiter pour effectuer un « tree-shaking » et exclure le code inutilisé du package final. Le fichier par défaut (pkg.module) fourni pour ces outils d'empaquetage est une version de module ES uniquement d'exécution (vue.runtime.esm.js). 🎜🎜🎜🎜ESM pour navigateurs (2.6+) : pour une importation directe dans les navigateurs modernes via <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')
      }
    })
  ]
}

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

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

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

# 最新稳定版本
$ bower install vue