Монтаж

Как и в случае с другими фреймворками, для всего множества полезных вещей, которые они могут использовать, мы должны сначала установить их или найти ссылку на их расположение в Интернете, эта статья проведет вас через процесс установки Vue.JS.

Примечание о совместимости

Из-за того, что Vue использует функции ES5 (ECMAScript 5), которые плохо работают с IE8 и ниже, Vue не поддерживает IE8. Тем не менее, вы можете запустить Vue в любом браузере, к которому относится жалоба ES5.

На момент написания этой статьи стабильной версией Vue является версия 2.6.10.

Vue Devtools

При программировании на JavaScript вы быстро столкнетесь с проблемами, если не сделаете консоль своим другом для отладки, также при работе с Vue рекомендуется установить Vue Devtools. Это позволяет нам эффективно отслеживать и отлаживать наши приложения. Гораздо больше, чем обычная консольная отладка.

Vue предоставляет три способа установки, а именно:

• прямое <script> включение
• НПМ
• Vue Cli

прямое <script> включение

Чтобы установить Vue с помощью этого метода, все, что вам нужно сделать, это предоставить тег сценария с атрибутом src, указывающий на местоположение Vue.

Существует в основном две формы этого сценария, которые являются сценариями, готовыми к разработке и производству.

При обучении вы можете использовать последнюю версию или версию для разработки, например, так:

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

Однако, когда вы создаете производственное приложение, укажите ссылку на конкретный номер версии, например, так:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

Или вы можете использовать синтаксис ES-модулей в том случае, если вы используете нативные ES-модули, как показано ниже:

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

Vue одинаково доступен на unpkg и cdnjs.

NPM

При создании больших приложений с помощью Vue всегда рекомендуется использовать NPM, потому что он хорошо работает с Webpack и Browserify, которые являются очень эффективными компоновщиками модулей. Чтобы получить Vue с помощью NPM, просто запустите следующую строку в командной строке:

$ npm install vue

CLI

Чтобы начать работу с одностраничным приложением, вы можете использовать официальный CLI Vue. Это обеспечит вам создание настроек, подходящих для современного рабочего процесса внешнего интерфейса.

Чтобы использовать Vue CLI, выполните эти инструкции в командной строке.

npm install -g @vue/cli

Создать проект:

vue create my-project

Объяснение различных сборок

Runtime + Compiler vs Runtime-only

Мы используем компилятор, когда нам нужно скомпилировать шаблоны на клиенте. Например, вам понадобится компилятор, если вы хотите смонтировать элемент, используя элементы в DOM HTML в качестве шаблона.

// this requires the compiler
```new Vue({
  template: '<span>{{ hi }}</span>'
})```
// the compiler is not required here
```new Vue({
  render (h) {
    return h('span', this.hi)
  }
})

Всякий раз, когда мы используем vue-loader или vuetify, файлы * .vue содержат шаблоны, которые будут предварительно скомпилированы как JavaScript во время сборки.

Таким образом, поскольку только время выполнения более легкое по сравнению с полной сборкой, рекомендуется использовать его при любой возможности.

Однако, если вы предпочитаете полную сборку, тогда вы должны настроить псевдоним для упаковщика:

Развитие против режима производства

Обычно не минимизированная форма vue предназначена для разработки, тогда как минимизированная форма предназначена для производственного приложения. Модули CommonJS и ES, однако, не входят в минимизированные версии, их нужно минимизировать самостоятельно.

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

Когда мы заменим process.env.NODE_ENV на строковые литералы, минификаторы, такие как UglifyJS, будут полностью отбрасывать блоки кода, предназначенные только для разработки.

Webpack

С webpack 4+ можно использовать опцию режима:

module.exports = {
  mode: 'production'
}

Принимая во внимание, что в более низкой версии нам нужно будет использовать DefinePlugin

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

Свернуть

Это достигается с помощью rollup-plugin-replace

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

Browserify

Просто примените envify transform к вашему пакету

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

Среда CSP

Существуют такие среды, как Google Chrome, которые применяют Политику безопасности контента (CSP), это предотвращает использование новой функции () в качестве оценщика выражений. Поскольку полная сборка зависит от новой функции, ее нельзя использовать в таких средах. Однако только сборки времени выполнения совместимы с CSP.

Dev Build

Вы можете использовать Vue из его последнего исходного кода на GitHub:

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

Беседка

Vue также можно установить с помощью Bower, используя команду bower install, как показано ниже

$ bower install vue

Загрузчики модулей AMD

Вы можете использовать все U