Установка Vue.js

Для установки JavaScript фреймворка Vue.js скачайте js-файл и подключите его тегом <script>. После этого будет зарегистрирована глобальная переменная Vue. Не используйте при разработке минифицированную версию, а только полную версию, так как предупреждения об ошибках не будут отображаться!

CDN

На CDN всегда доступна свежая версия Vue, загруженная в NPM. Исходный код NMP-пакета тоже доступен на CDN.
 

Инструменты разработчика Vue

Для работы с JavaScript фреймворком Vue, удобной проверки и отладки приложений , также можно установить инструмент Vue Devtools прямо в браузер.

NPM

Рекомендуем использовать NMP при создании крупных приложений на Vue.  Его можно использовать в паре с инструментами сборки к Webpack и Browserify.

Инструменты командной строки (CLI)

Vue.js предоставляет интерпретатор командной строки (CLI) для быстрого создания каркаса одностраничных приложений. В нем есть шаблоны со всем необходимым для современной разработки.

Сборки Vue

В каталоге dist/ NPM пакета можно найти много разных сборок Vue.js.

• Полная - сборка содержит и компилятор, и runtime.
• Компилятор - код, отвечающий за компиляцию строковых шаблонов в JavaScript render-функции
• Runtime - код, отвечающий за создание экземпляров Vue, рендеринг и изменение виртуального DOM, и т.д. 
• UMD - UMD-сборки можно использовать в браузере, подключая тегом <script>
• CommonJS - сборки предназначены для использования вместе со старыми инструментами сборки: Browserify или Webpack 1.
• ES Module - сборки предназначены для использования с современными инструментами сборки: Webpack 2 или Rollup

Runtime + Компилятор vs. Runtime-only

Для компиляции шаблонов на клиенте потребуется компилятор. Например, передаавать в строку опцию template или добавить к элементу DOM, используя его HTML как шаблон.

// это требует компилятора
new Vue({
  template: '<div>{{ hi }}</div>'
})

// это нет
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

При использовании vue-loader или vueify шаблоны внутри файлов *.vue будут скомпилированы в JavaScript на этапе сборки. Компилятор не нужен будет в финальной сборке и можно использовать runtime-only сборки.

Runtime-only сборки легче полных сборок, поэтому нужно использовать их. Если все же вы используйте полную сборку, то настройте псевдоним в сборщике:

Webpack

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' для webpack 1
    }
  }
}

Rollup

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

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

Browserify

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

Режим разработки vs. режим production

В UMD-сборках определены неминифицированные файлы для разработки и минифицированные файлы для production.CommonJS и ES Module сборки предназначены для инструментов сборки, поэтому для них не предоставлены минифицированные версии. Эти сборки содержат проверки на process.env.NODE_ENV для определения режима, в котором они должны выполняться. Нужно использовать соответствующие конфигурации систем сборки для замены этих переменных окружения, для того чтобы контролировать режим запуска Vue. 

Webpack

Используйте DefinePlugin:

var webpack = require('webpack')

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

Rollup

Используйте rollup-plugin-replace:

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

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

Browserify

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

Сборка dev-версии

Файлы сборки в каталоге /dist на GitHub обновляются только при релизах. Чтобы использовать версию из новейшего кода с GitHub, нужно собрать проект:

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

Bower

Только UMD сборки доступны в Bower.

# последняя стабильная версия
$ bower install vue