Монтаж

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

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

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

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

Vue Devtools

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

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

  • direct include
  • npm
  • Vue cli

direct include

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

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

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

     

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

     

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

   импортировать Vue из 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js'   

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

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

  $ npm install vue  

CLI

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

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

  npm install -g @ vue/cli  

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

  vue create my-project  

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

UMD CommonJS Модуль ES (Для сборщиков) Модуль ES (для браузеров)
Полный vue.js vue.common.js vue.esm.js vue.esm.browser.js
Только время выполнения vue.runtime.js vue.runtime.common.js vue.runtime.esm.js
Полный (рабочий) vue.min.js vue.esm.browser.min.js
Только время выполнения (производство) vue.runtime.min.js

Время выполнения + компилятор против времени выполнения -only

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

 //для этого требуется компилятор``new  Vue ({template: ' {{hi}} '}) ``//здесь компилятор не требуется``new Vue ({render (h) {return h ('span'  , this.hi)}})  

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

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

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

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

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

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

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

Webpack

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

  module.exports = {mode: 'production'}  

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

  var webpack = require ('webpack') module.exports = {//... плагины: [//... новый webpack.DefinePlugin ({'process.env': {NODE_ENV  : JSON. stringify ('production')}})]}  

Rollup

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

  const replace = require ('rollup-plugin-replace') rollup ({//... плагины: [replace ({'process.env.NODE_ENV'  : JSON.stringify ('production')})]}). Then (...)  

Browserify

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

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

Среда CSP

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

Dev Build

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

  git clone https://github.com/vuejs/vue.git node_modules/vuecd node_modules/vuenpm installnpm run build  

Bower

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

  $ bower install vue  

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

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

Оцените статью
nanomode.ru
Добавить комментарий