Эта статья представляет собой не учебное пособие, а документацию по шагам, которые я предпринял для создания очень простого шаблона Vue.js с использованием Webpack для объединения.

Цель

Чтобы создать базовое приложение Vue.js и настроить Webpack для вывода компонента Vue в веб-браузер.

Предварительные требования

Инструменты

  • Код Visual Studio
  • Терминал

Шаг 1 — Первоначальная настройка

Создайте пустую папку проекта boilerplate-vue. Это будет корень приложения.

Создайте файл package.json в корне приложения, запустив:

npm init

package.json файл после первоначальной настройки:

{
    "name": "boilerplate-vue",
    "version": "0.1.0",
    "description": "Vue.js boilerplate",
    "author": "Kenny Tran",
    "private": true
}

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

Установите последнюю стабильную версию Vue.js через NPM в качестве зависимости:

npm install vue

Установите следующие пакеты как devDependencies:

npm install --save-dev vue-loader vue-template-compiler webpack webpack-cli

Шаг 3 — Создайте папку и файлы дистрибутива

Папка dist будет содержать все файлы, необходимые для обслуживания приложения в веб-браузере.

Приложение будет состоять из двух файлов: файла index.html, который я создам вручную, и файла bundle.js, который будет сгенерирован Webpack.

  1. Создайте папку dist в корне проекта и создайте в ней index.html.
boilerplate-vue
|-- dist
    |-- index.html

2. Добавьте следующий HTML-код в файл index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Boilerplate Vue</title>
    <body>
        <div id="app"></div>
        <script src="bundle.js" type="text/javascript"></script>
    </body>
</html>

Примечание. <div id="app"></div> будет корневым элементом DOM приложения, и именно в нем мы визуализируем приложение.

Примечание. Я включаю bundle.js, которого в данный момент не существует, но позже он будет сгенерирован Webpack.

Шаг 4 — Создайте исходную папку и файлы

В папке src будет храниться вся логика приложения. Идея состоит в том, чтобы настроить Webpack так, чтобы он брал все файлы из src и объединял их в main.js.

  1. Создайте папку src в корне проекта и создайте в ней файлы index.js и App.vue.
boilerplate-vue
|-- src
    |-- main.js
    |-- App.vue

2. App.vue будет корневым компонентом приложения. Добавьте следующий фрагмент в App.vue. На данный момент я сделал компонент настолько простым, насколько это возможно.

<template>
    <div>
        <h1>Hello World!</h1>
    </div>
</template>

3. Файлmain.js будет точкой входа приложения. Добавьте следующий фрагмент в main.js.

import Vue from 'vue'
import App from './App.vue'
new Vue({
    el: '#app',
    render: h => h(App)
})

Разбивка:

Импортируйте ядро ​​Vue.js и созданный ранее компонент Vue

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

Создайте новый экземпляр Vue и скажите ему, чтобы компонент App отображался в элементе DOM с идентификатором приложения (которое было создано ранее в файле index.html)

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

h => h(App) является общепринятым соглашением Vue.js и сокращением для:

render: function(createElement) {
    return createElement(App);
}

Шаг 5 — Настройте Webpack

Как упоминалось выше, я буду использовать Webpack для объединения всех файлов нашего приложения и предоставления их веб-браузеру в виде одного файла bundle.js.

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

  1. Создайте файл webpack.config.development.js в корне проекта
boilerplate-vue
|-- webpack.config.development.js

2. Добавьте в webpack.config.development.js следующее:

'use strict'
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    mode: 'development',
    entry: [
        './src/main.js'
    ],
    output: {
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.vue$/,
            use: 'vue-loader'
        }]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

Разбивка:

mode сообщает Webpack, как оптимизировать приложение.

entry определяет точку или точки для входа в приложение.

output определяет, как и где он должен выводить пакеты

module определяет различные типы используемых модулей. Здесь мы перехватываем зависимости и предварительно обрабатываем их, прежде чем они будут объединены

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

plugins определяет любые подключаемые модули для изменения или добавления возможностей Webpack

Мы нацеливаемся на все файлы .vue и запускаем для них модуль vue-loader, что позволяет нам создавать компоненты Vue в формате, называемом Single-File Components:

test: /\.vue$/,
use: 'vue-loader'

vue-loaderv15 для работы требуется подключаемый модуль vue-loader:

const VueLoaderPlugin = require('vue-loader/lib/plugin')
...
new VueLoaderPlugin()

Шаг 6 — Запустите Webpack

Обычно локальная версия Webpack запускается через сценарии npm внутри package.json, которые автоматически ищут Webpack в каталоге node_modules.

  1. Добавьте следующее кpackage.json:
"scripts": {
  "dev": "webpack --config webpack.config.development.js"
}

Разбивка

"scripts" — это место для определения всех запускаемых скриптов npm.

"dev" имя скрипта

webpack это команда для запуска Webpack.

--config webpack.config.development.js определяет файл конфигурации, который будет использоваться при выполнении Webpack.

2. Чтобы запустить dev:

npm run dev

Шаг 7 — Результат

Теперь Webpack объединит весь код в src и сгенерирует bundle.js в dist.

Для тестирования зайдите в приложение на локальном веб-сервере по адресу http://localhost/boilerplate-vue/dist/.