Рубрики
Без рубрики

Как создать приложение Vue.js, используя компоненты одно файловых, без CLI.

Понимание одномаловых компонентов Vue (SFCS) и узел пакета (NPM) будет полезна для этой статьи. Интерфейс командной строки Framework или CLI, является предпочтительным способом для проекта ECAFFOLD. Он предоставляет отправную точку файлов, папок и конфигурацию. Эти леса также обеспечивают

Автор оригинала: Brandon Wozniewicz.

Понимание одномаловых компонентов Vue (SFCS) и узел пакета (NPM) будет полезна для этой статьи.

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

Установка и запуск Vue.js («Vue») можно сделать с помощью тега скрипта, который указывает на сеть доставки содержимого Vue (CDN). Процесс сборки или разработки не требуется. Но, если вы используете Vue одно файловые компоненты (SFC), вам нужно преобразовать эти файлы в то, что может понять браузер. Файлы должны быть преобразованы в язык Markup Hyper-Text (HTML), каскадные листы стилей (CSS) и JavaScript (JS). В этом случае необходимо использовать процесс разработки и сборки.

Вместо того, чтобы полагаться на Vue CLI, чтобы подкрепить наш проект и предоставить нам процесс разработки и сборки, мы построим проект с нуля. Мы создадим наш собственный процесс разработки и сборки, используя WebPack.

Что такое WebPack?

WebPack – это модуль Bundler. Он объединяет код из нескольких файлов в один. Перед WebPack пользователь включил тег скрипта для каждого файла JavaScript. Хотя браузеры медленно Поддерживая модули ES6, WebPack продолжает быть предпочтительным способом создания модульного кода.

Помимо того, чтобы быть модулем Bundler, WebPack также может преобразовать код. Например, WebPack может принимать современный JavaScript (Ecmascript 6+) и преобразовать его в Ecmascript 5. Во время WebPack Пакеты Сам код преобразует код с помощью погрузчиков и плагинов. Подумайте о погрузчиках и плагинах как дополнения для WebPack.

WebPack и Vue.

Одно файловые компоненты позволяют нам построить весь компонент (структуру, стиль и функцию) в одном файле. И большинство редакторов кода обеспечивают синтаксис подсветки и протягивания для этих SFC.

Обратите внимание на файл заканчивается .vue. Браузер не знает, что делать с этим расширением. WebPack, благодаря использованию погрузчиков и плагинов, преобразует этот файл в HTML, CSS и JS браузер может потреблять.

Проект: построить приложение Hello World Vue с использованием однофагулярных компонентов.

Шаг 1: Создайте структуру проекта

Наиболее основным проектом Vue будет включать в себя HTML, JavaScript и файл Vue (файл, заканчивающийся на .Vue ). Мы разместим эти файлы в Папка называется SRC Отказ Исходная папка поможет нам отделить код, который мы пишем из кода WebPack, в конечном итоге построит.

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

Кроме того, мы будем использовать компилятор под названием Babel. Babel позволяет нам написать код ES6, который затем компилирует в ES5. Babel – один из тех «дополнительных функций» для WebPack. Babel также нужен файл конфигурации.

Наконец, так как мы используем NPM, у нас также будет Папка Node_modules и Package.json файл. Те, кто будет создан автоматически, когда мы инициализируем наш проект как проект NPM и начните устанавливать наши зависимости.

Чтобы начать, создать папку под названием Привет-мир Отказ Из командной строки, перейдите в этот каталог и запустите NPM init Отказ Следуйте инструкциям на экране, чтобы создать проект. Затем создайте остальные папки (кроме Node_Modules ) как описано выше. Ваша структура проекта должна выглядеть так:

Шаг 2: Установите зависимости

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

Vue : JavaScript Framework

Vue-Loader и Vue-шаблон-компилятор : Используется для преобразования наших файлов Vue в JavaScript.

WebPack : Инструмент, который позволит нам пройти наш код через некоторые преобразования и соединить его в один файл.

WebPack-CLI: Необходимо запустить команды WebPack.

WebPack-Dev-Server И хотя не нужно для нашего небольшого проекта (поскольку мы не будем делать какие-либо HTTP-запросы), мы все равно будем «служить» нашим проектом с сервера разработки.

Babel-Loader : Превратите наш код ES6 в ES5. (Это нужна помощь от следующих двух зависимостей.)

@ Babel/Core и @ Babel/Preset-Env : Babel само по себе ничего не делает для вашего кода. Эти два «дополнения» позволят нам преобразовать наш код ES6 в код ES5.

CSS-Loader: Берет CSS, мы пишем в нашем .vue Файлы или любые CSS мы можем импортировать в любой из наших файлов JavaScript и разрешить путь к тем файлам. Другими словами, выясните, где есть CSS. Это еще один загрузчик, который сам по себе не будет делать много. Нам нужен следующий загрузчик, чтобы на самом деле сделать что-то с CSS.

Vue-Style-Loader : Возьми CSS, которые мы получили от нашего CSS-Loader и ввести его в наш файл HTML. Это создаст и вводит тег стиля в главе нашего HTML-документа.

html-webpack-plugin : Возьми наши index.html и введите наш бандажный файл JavaScript в голове. Затем скопируйте этот файл в Dist папка.

Римраф Позволяет нам, из командной строки, удалить файлы. Это пригодится, когда мы строим наш проект несколько раз. Мы будем использовать это, чтобы удалить любые старые сборки.

Давайте установим эти зависимости сейчас. Из командной строки запустить:

npm install vue vue-loader vue-template-compiler webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env css-loader vue-style-loader html-webpack-plugin rimraf -D

Примечание: «-D» на торце отмечает каждую зависимость в качестве зависимости развития в нашем Package.json. Мы объединяем все зависимости в одном файле, поэтому для нашего небольшого проекта у нас нет производственных зависимостей.

Шаг 3: Создайте файлы (кроме нашего файла конфигурации WebPack).







  
    Vue Hello World
  
  
    

  

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App),
});
module.exports = {
  presets: ['@babel/preset-env'],
}

До этого момента ничего не должно выглядеть слишком иностранным. Я сохранил каждый файл очень простой. Я только добавил минимальные CSS и JS, чтобы увидеть наш рабочий процесс в действии.

Шаг 4: инструктируя WebPack, что делать

Вся конфигурация WebPack требует доступа к теперь присутствует. Нам нужно делать две окончательные вещи: скажите WebPack, что делать и запустить WebPack.

Ниже приведен файл конфигурации WebPack ( WebPack.config.js ). Создайте этот файл в корневом каталоге Projects. Line-By-Line Мы обсудим то, что происходит.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry: './src/main.js',
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' },
      { test: /\.vue$/, use: 'vue-loader' },
      { test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    new VueLoaderPlugin(),
  ]
};

Линии 1 и 2: Мы импортируем два плагина, которые мы используем ниже. Уведомление, наши погрузчики обычно не нужно импортировать, только наши плагины. И в нашем случае Vue-loader (который мы используем в строке 9) Также нужен плагин для работы (однако, Бабел, например, не).

Строка 4: Мы экспортируем нашу конфигурацию в качестве объекта. Это дает нам доступ к нему, когда мы запускаем команды WebPack.

Линия 5: Это наш входной модуль. WebPack нужно место для начала. Это выглядит в нашем main.js Файл, а затем начинает расчесывать через наш код с этого момента.

Строка 6 и 7: Это объект модуля. Здесь мы в первую очередь проходим в массиве правил. Каждое правило сообщает WebPack, как обрабатывать определенные файлы. Итак, в то время как WebPack использует точку входа main.js Чтобы начать расчесывать через наш код, он использует правила для преобразования нашего кода.

Строка 8 (правило): Это правило инструктирует WebPack использовать Babel-Loader на любых файлах, которые заканчиваются .js Отказ Помните, что Бабел преобразует ES6 + до ES5.

Линия 9 (правило): Это правило инструктирует WebPack использовать Vue-loader (и не забывайте связанный плагин на линии 17), чтобы преобразовать наши .vue Файлы в JavaScript.

Строка 10 (правило): Иногда мы хотим пройти файл через два погрузчика. Неудивительно, WebPack передаст файл справа налево, а не слева направо. Здесь мы используем два погрузчика и говорите WebPack: «Получить мои CSS из моего файла Vue или любых файлов JavaScript ( CSS-Loader ) и ввести его в мой HTML в качестве тега стиля ( Vue-Style-Loader ).

Линии 11 и 12: Закрыть наши правила Массив и объект модуля.

Строки 13: Создайте массив плагинов. Здесь мы добавим два нужных нам плагинов.

Строка: 14 -16 (плагин): Htmlwebpackplugin берет место нашего index.html Файл и добавляет наш бандажный файл JavaScript к нему через тег скрипта. Этот плагин также скопирует HTML-файл в нашу папку распространения, когда мы создаем наш проект.

Линия 17 (плагин): Vueloaderplugin Работает с нашими Vue-loader разбирать наш .vue файлы.

Строка 18: Закрыть массив плагинов.

Линия 19: Закройте объект WebPack, который мы экспортируем.

Шаг 5: Настройка нашего Package.json Файл, чтобы мы могли запустить WebPack

Наша конфигурация завершена, теперь мы хотим увидеть наше приложение. В идеале, поскольку мы вносим изменения в наше приложение, браузер обновит автоматически. Это возможно с WebPack-Dev-Server Отказ

Удалить Тест Сценарий в нашем Package.json Файл и замените его скриптом для обслуживания нашего приложения:

{
  "name": "hello-world",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "serve": "webpack-dev-server --mode development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/preset-env": "^7.1.6",
    "babel-loader": "^8.0.4",
    "css-loader": "^1.0.1",
    "html-webpack-plugin": "^3.2.0",
    "rimraf": "^2.6.2",
    "vue": "^2.5.17",
    "vue-loader": "^15.4.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.26.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
  "dependencies": {}
}

Название этой команды – ваш выбор. Я решил позвонить мне Подавать Так как мы будем Обслуживание наше приложение.

Из нашего терминала или командной строки мы можем запустить NPM запустить И что в свою очередь будет работать WebPack-Dev-Server - Mode Development Отказ

То – Разработка это то, что называется флаг или вариант. Мы не говорили об этом, но по существу это инструктирует WebPack, который вы находитесь в режиме разработки. Мы также можем пройти в – Производство производства Что мы сделаем, когда мы создаем наш проект. Это не обязательно требуется для работы в Убен. Без них вы получите предупреждающее сообщение, сообщив вам возможность предоставить режим при запуске WebPack.

Я говорю: «Обязательно требуется», потому что WebPack будет минимизировать наш код в режиме производства, но не в разработке. Итак, не думайте, что эти команды ничего не делают – они делают.

Давайте запустим NPM запустить и посмотри, что происходит.

Когда мы бежим NPM запустить Мы получаем некоторые вывод в нашем терминале. И, если все идет хорошо:

И если мы немного прокрутим вверх:

Укажите свой браузер на http://localhost: 8080 Отказ Вы увидите ваше голубое послание Hello World в шрифте Roboto.

Теперь давайте обновим проект и измените сообщение на Привет вселенная Отказ Обратите внимание, что веб-страница обновляется автоматически. Это здорово, верно? Можете ли вы подумать о недостатке?

Давайте изменим приложение чуть немного и включите вход, который мы связываем переменную (с v-модель ). Мы выводим переменную в

тег ниже ввода. Я также обновил сечение Styling, чтобы стиль сообщения сейчас. Наше App.vue Файл должен выглядеть так:

Когда мы обслуживаем наше приложение, у нас будет вход с сообщением Здравствуйте, мир под этим. Вход связан с сообщение Переменная, так как мы вводите, мы меняем

содержание. Продолжай, введите на вход, чтобы изменить

содержание.

Теперь вернитесь в свой редактор, а ниже

Тег, добавьте следующее:

Некоторые другое сообщение

Сохранить свой App.vue И посмотри, что происходит.

H2 Мы только что обновили, набрав на нашем входе вернулись обратно в Здравствуйте, мир Отказ Это связано с тем, что браузер фактически обновляется, а метка сценария и страница снова загружена. Другими словами, мы не смогли сохранить состояние нашего приложения. Это может не похоже на большую сделку, но, поскольку вы тестируете свое приложение и добавляете к нему данные, это будет расстраиваться, если ваше приложение «сбрасывает» каждый раз. К счастью, WebPack предлагает нам решение, называемое заменой горячей модуля.

Замена горячего модуля – это плагин, предоставленный самим веб-запасом. До этого точка мы не использовали сам объект WebPack в нашем файле конфигурации. Однако теперь мы импомнум WebPack, чтобы мы могли получить доступ к плагину.

В дополнение к плагину мы пройдем один дополнительный вариант для WebPack, DevServer вариант. В этом варианте мы установим Горячий к правда Отказ Кроме того, мы сделаем (необязательно) обновление нашего рабочего процесса Build: мы автоматически откроем окно браузера, когда мы запускаем NPM запустить Отказ Мы делаем это, установив открыть к правда который также внутри DevServer вариант.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');

module.exports = {
  entry: './src/main.js',
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' },
      { test: /\.vue$/, use: 'vue-loader' },
      { test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
    ]
  },
  devServer: {
    open: true,
    hot: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    new VueLoaderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
  ]
};

Обратите внимание, что мы импортировали WebPack, чтобы мы могли получить доступ к HotmoduleReplationPlugin Отказ Мы добавили это в плагины Массив, а затем сказал WebPack, чтобы использовать его с Горячий: правда Отказ Мы открываем окно браузера автоматически, когда мы обслуживаем приложение с Открыть: правда Отказ

Беги NPM запустить :

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

содержание. Тогда измените H3 Теги для чтения: Еще одно сообщение Отказ

Сохраните свой файл и обратите внимание, что произойдет.

Браузер не обновляется, но наш

Изменения отражены! Сообщение, которое мы набрали в входе, но H3 обновления. Это позволяет нашему применению сохранить его состояние, пока мы его редактируем.

Шаг 7: Создание нашего проекта

До сих пор мы служили нашему заявлению. Но, что, если мы хотим создать наше приложение, чтобы мы могли распространять его?

Если вы заметили, когда мы обслуживаем наше приложение, файлы не создаются. WebPack создает версию этих файлов, которые существуют только во временной памяти. Если мы хотим распространить приложение Hello World для нашего клиента, нам нужно построить проект.

Это очень просто. Как и раньше, мы создадим сценарий в нашем Package.json-файле, чтобы сообщить WebPack для создания нашего проекта. Мы будем использовать WebPack как команда вместо WebPack-Dev-Server Отказ Мы пройдем в - Производство Флаг тоже.

Мы также будем использовать Римраф Пакет сначала удалить любые предыдущие сборки, которые мы можем иметь. Мы делаем это просто по Rimraf dist Отказ

Dist Является ли WebPack папкой автоматически создаст при создании нашего проекта. «DIST» короткий для распределения – I.e. Мы «распространяем» код нашего приложения.

Rimraf dist Команда говорит Римраф Пакет для удаления Dist каталог. Убедитесь, что вы не Rimraf SRC случайно!

WebPack также предлагает плагин, который выполнит этот процесс очистки Clean-Webpack-плагин Отказ я выбираю распад показать альтернативный путь.

Наш файл package.json должен выглядеть так:

{
  "name": "hello-world",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "clean": "rimraf dist",
    "build": "npm run clean && webpack --mode production",
    "serve": "webpack-dev-server --mode development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/preset-env": "^7.1.6",
    "babel-loader": "^8.0.4",
    "css-loader": "^1.0.1",
    "html-webpack-plugin": "^3.2.0",
    "rimraf": "^2.6.2",
    "vue": "^2.5.17",
    "vue-loader": "^15.4.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.26.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
  "dependencies": {}
}

Есть три вещи, чтобы заметить:

  1. Я создал отдельный чистый Сценарий, поэтому мы можем запустить его независимо от нашего сценария сборки.
  2. NPM запустить сборку позвонит независимо от чистый Сценарий мы создали.
  3. У меня есть && между NPM беги чистые и WebPack Отказ Эта инструкция говорит: «Run NPM запустить чистые первым, Тогда Run WebPack ».

Давайте построим проект.

NPM запустить сборку

WebPack создает Dist каталог, и наш код находится внутри. Поскольку наш код не дает HTTP-запросов, мы можем просто открыть наши index.html Файл в нашем браузере, и он будет работать, как ожидалось.

Если бы у нас был код, который сделал HTTP-запросы, мы столкнулись бы в некоторых ошибках перекрестного происхождения, поскольку мы сделали эти запросы. Нам нужно будет запустить этот проект с сервера для его работы.

Давайте рассмотрим index.html Этот WebPack создан в браузере и редакторе кода.

Если мы открываем его в нашем редакторе или посмотрите на исходный код в наших инструментах DEV, вы увидите, что WebPack введен в тег скрипта. Однако в нашем редакторе вы не увидите стили, потому что тег стиля вводится динамически во время выполнения с JavaScript!

Кроме того, обратите внимание на нашу информацию консоли развития больше не присутствуют. Это потому, что мы прошли - производство Флаг к веб -ску.

Заключение

Понимание процесса сборки за рамками, которые вы используете, помогут вам лучше понять саму рамки. Найдите некоторое время, чтобы попытаться построить угловой, реагировать или другой проект Vue без использования соответствующих клинок. Или просто постройте базовый трехфайл сайт (index.html, styles.csss и app.js), но используйте WebPack для обслуживания и создания производственной версии.

Спасибо за прочтение!

ворота

Читайте ещё по теме: