Организация и сборка приложения

Компоненты в отдельных файлах и Webpack

Последнее обновление: 05.10.2018

В предыдущих статьях все компоненты приложения Vue.js размещались в одном файле - веб-странице. Такой подход, возможно, будет прекрасно работать для небольших проектов. Однако в больших проектах этот подход менее оптимален. В частности, html-разметка компонента определяется в javascript, в итоге логика и конфигурация компонента спешивается с html-кодом. Также мы не можем определить стили, которые предназначены только для компонента. И, кроме того, мы не можем использовать различные инструменты для предобработки типа Pug, Babel, Webpack и т.д.

Другой способ, который более подходит для крупных проектов, представляет определение компонента в отдельном файле с расширением .vue, который будет содержать логику javascript, html-разметку и стили компонента. Затем с помощью таких инструментов как Webpack или Browserify выполняется построение проекта и создается один общий файл javascript.

Прежде чем начать работу, необходимо установить node.js и npm и вообще иметь некоторые базовые знания по работе с npm. Для этого можно обратиться к следующей статье.

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

Определим в этой папке новый файл index.html:

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
    <title>Vue.js</title> 
  </head> 
  <body> 
    <div id="app"></div> 
    <script src="dist/build.js"></script> 
  </body> 
</html>

Блок div с id="app" будет представлять элемент, которые будет использоваться Vue, а весь код будет находиться в файле build.js.

Далее добавим в проект папку src, которая будет содержать собственно код приложения. Затем в этой папке создадим новый файл App.vue:

<template>
  <div id="hello">
    <h2>{{message}}</h2>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      message: 'Welcome to Vue.js'
    }
  }
}
</script>

<style>
#hello {
  font-family: Verdana;
  color: navy;
}
</style>

Этот файл будет представлять компонент App. Каждый компонент имеет три основные секции. Первая секция представляет шаблон компонента, который помещается в элемент <template>. Шаблон собственно и представляет разметку компонента.

Вторая секция, которая помещается в элемент <script>, представляет логику компонента. С помощью default определяются параметры компонента, а чтобы его можно было импортировать извне, применяется слово export.

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

Также добавим в папку src файл main.js:

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

new Vue({
  el: '#app',
  render: h => h(App)
})

Здесь объект Vue, с которого собственно и будет начинаться выполнение приложение. Объект Vue будет использовать элемент с id="app" - это тот элемент, который выше был определен на веб-странице index.html. С помощью функции render объект Vue будет производить рендеринг в этом элементе содержимого из компонента App. Естественно, чтобы использовать функциональность vue.js и компонента App, в начале файла определены функции импорта.

В частности, чтобы использовать компонент App, его необходимо импортировать:

import App from './App.vue'

Подобным образом мы можем подключать другие компоненты.

В то же время можно заметить, что данный файл называется main.js, а на веб-странице подключается файл dist/build.js, который еще не создан. Для того, чтобы все файлы нашего приложения превратились в dist/build.js, мы будем использовать сборщик Webpack.

Для этого перейдем к корневой папке нашего проекта и создадим в ней файл package.json, который будет определять все используемые зависимости:

{
    "name": "firstapp",
    "description": "A first Vue.js project",
    "version": "1.0.0",
    "author": "Eugene <metanit.com>",
    "scripts": {
      "dev": "webpack-dev-server --hot --open",
      "build": "webpack"
    },
    "dependencies": {
      "vue": "^2.5.17"
    },
    "devDependencies": {
      "vue-loader": "^15.4.2",
      "vue-template-compiler": "^2.5.17",
      "css-loader": "^1.0.0",
      "webpack": "^4.20.0",
      "webpack-cli":"^3.1.2",
      "webpack-dev-server":"^3.1.9"
    }
  }

Так как для работы приложения потребуется vue.js, то соответственно в секции dependencies определяется соответствующий пакет.

Еще ряд пакетов потребуются для построения приложения и в процессе разработки. Например, для сборки приложения будет использоваться пакет webpack.

Чтобы в процессе разработки динамически собирать приложение и запускать его на выполнение, потребуется пакет "webpack-dev-server".

Чтобы указать сборщику Webpack, как именно файла с расширением *.vue будут загружаться, необходим пакет "vue-loader". Но данный пакет сам использует еще две зависимости "vue-template-compiler" и "css-loader", поэтому их тоже надо установить.

Также для минимизации выходных файлов здесь устанавливается пакет плагина минимизации "uglifyjs-webpack-plugin".

Кроме того, в секции scripts определены две команды: dev и build. Команда dev предназначена для нужд разработки и позволяет на лету сгенерировать файл сборки и запустить проект. Этой команде передаются два параметра --hot --open. Параметр --hot позволяет задействовать плагин Hot Module Replacement, который взаимодействует с vue-loader и позволяет производить повторный рендеринг для каждой модели Vue. Второй параметр --open запускает браузер для обращения к приложению.

Команда build позволяет сгенерировать файл сборки, и затем этот файл может использоваться в production.

И в конце определим для сборщика Webpack конфигурацию. Для этого создадим в корневой папке проекта файл webpack.config.js:

var path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin'); // плагин для загрузки кода Vue

module.exports = {
 entry: './src/main.js',
 output: {
   path: path.resolve(__dirname, './dist'),
   publicPath: '/dist/',
   filename: 'build.js'
 },
 module: {
   rules: [
     {
       test: /\.vue$/,
       loader: 'vue-loader'
     }, {
      test: /\.css$/,
      use: [
        'vue-style-loader',
        'css-loader'
      ]
    }
   ]
 },
 plugins: [
    new VueLoaderPlugin()
   ]
}

Вначале файла получаем функциональность модуля webpack или встроенного модуля path. Параметр entry устанавливает входную точку в приложение - это наш файл main.js.

Далее в секции output устанавливаем выходные параметры сборки.

Затем через секцию modules устанавливаем два правила для загрузки файлов. В частности, для файлов с расширением .vue будет применяться загрузчик vue-loader. Второе правило определяет загрузку стилей: для обычных файлов css будет использоваться загрузчик css-loader, а для кода css из файлов с расшиением .vue - загрузчик vue-style-loader.

И в конце в секции plugins добавляется плагин VueLoaderPlugin, с помощью которого будет загружаться код vue.

В итоге проект будет выглядеть следующим образом:

Теперь, когда все готово, мы можем запустить проект. Для этого вначале с помощью команды cd в консоли (или терминале) перейдем к папке корневой проекта firstapp.

Далее нам надо установить все зависимости, описанные в файле package.json. Для этого выполним в консоли команду npm install.

Затем запустим проект, введя команду npm run dev:

При выполнении последней команды мы увидим адрес, по которому запускается приложение. Обычно это http://localhost:8080. Мы можем ввести этот адрес в браузере:

Webpack и single-file component in Vue.js

Хотя мы запускаем приложение, но тем не менее в папке проекта мы не увидим никакого файла dist/build.js. Чтобы его сгенерировать, нам надо выполнить в консоли еще одну команду npm run build.

Разделение компонента на части

В данном случае компонент App.vue представляет единое целое, которое отделено от остальных компонентов. В этом плане его уже проще развивать независимо от других частей приложения. Однако может сложиться ситуация когда, кода html или css станет довольно много, и опять же такой компонент будет сложно поддерживать. В этом случае мы можем разделить компонент на отдельные функциональные части - код javascript, разметку html и стили css.

В частности, создадим в проекте в той же папке, где располагается компонент App.vue, новый файл App.html со следующим кодом:

<div id="app">
    <h2>{{message}}</h2>
</div>

В данном случае мы вынесли разметку html компонента в отдельный файл.

Также создадим в той же папке новый файл App.css:

#app {
    font-family: Verdana;
    color: navy;
}

И в ту же папку добавим новый файл App.js:

export default {
    name: 'app',
    data () {
      return {
        message: 'Welcome to Vue.js'
      }
    }
}

И теперь изменим код компонента App.vue:

<template src="./App.html"></template>
<style src="./App.css"></style>
<script src="./App.js"></script>

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

Назад Содержание Вперед

Глава 1. Основы Vue.js
Глава 2. Условный рендеринг и работа с массивами
Глава 3. Работа с формами
Глава 4. Компоненты
Глава 5. Слоты
Глава 6. Фильтры
- Глобальные и локальные фильтры
Глава 7. Организация и сборка приложения
- Компоненты в отдельных файлах и Webpack
- Vue-cli
Глава 8. Маршрутизация

Помощь сайту

Юмани:

410011174743222

Перевод на карту

Номер карты:

4048415020898850