В предыдущих статьях все компоненты приложения Vue.js размещались в одном файле - веб-странице. Такой подход, возможно, будет прекрасно работать для небольших проектов. Однако в больших проектах этот подход менее оптимален. В частности, html-разметка компонента определяется в JavaScript, в итоге логика и конфигурация компонента смешивается с html-кодом. Также мы не можем определить стили, которые предназначены только для компонента. И, кроме того, мы не можем использовать различные инструменты для предобработки типа Pug, Babel, Webpack и т.д.
Другой способ, который более подходит для крупных проектов, представляет определение компонента в отдельном файле с расширением .vue, который будет содержать логику JavaScript, html-разметку и стили компонента. Затем с помощью таких инструментов как Webpack или Browserify выполняется построение проекта и создается один общий файл JavaScript.
Прежде чем начать работу, необходимо установить Node.js и npm и вообще иметь некоторые базовые знания по работе с npm.
Итак, создадим новый проект. Для этого определим на жестком диске для проекта новую папку. Допустим, она будет называться firstapp.
Определим в этой папке новый файл index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VueJS</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": "Orkhan Alishov <alishoff.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:
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
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 устанавливаем выходные параметры сборки.
Затем через секцию module устанавливаем два правила для загрузки файлов. В частности, для файлов с расширением .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. Мы можем ввести этот адрес в браузере.
Хотя мы запускаем приложение, но тем не менее в папке проекта мы не увидим никакого файла dist/build.js. Чтобы его сгенерировать, нам надо выполнить в консоли еще одну команду npm run build.
Разделение компонента на части
В данном случае компонент App.vue представляет единое целое, которое отделено от остальных компонентов. В этом плане его уже проще развивать независимо от других частей приложения. Однако может сложиться ситуация, когда кода HTML или CSS станет довольно много, и опять же такой компонент будет сложно поддерживать. В этом случае мы можем разделить компонент на отдельные функциональные части - код JavaScript, разметку HTML и стили CSS.
В частности, создадим в проекте в той же папке, где располагается компонент App.vue, новый файл App.html со следующим кодом:
В данном случае мы вынесли разметку HTML компонента в отдельный файл.
Также создадим в той же папке новый файл App.css:
И в ту же папку добавим новый файл 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>
То есть мы просто вынесли все части компонента в отдельные файлы. При этом в работе приложения ничего не изменится.
Vue-cli
Vue-cli представляет инструмент для быстрого создания проектов под Vue.js. Такие проекты уже имеют некоторую готовую начальную структуру, установленную конфигурацию, в частности, конфигурацию для Webpack, а также ряд базовых файлов. Текущая верся cli 4.5.
Для использования vue-cli вначале его надо установить. Для этого в консоли или терминале нужно выполнить команду:
npm install -g @vue/cli
Если ранее был установлен vue-cli других версий, например, 3.x, 2.х или 1.х, то их предварительно надо удалить с помощью команды npm uninstall vue-cli -g
Проверить текущую версию vue cli можно с помощью команды:
vue --version
После установки vue-cli создадим на жестком диске какую-нибудь папку, где будут находиться папки проекта Vue.js и с помощью команды cd перейдем к этой папке. Затем выполним в консоли следующую команду:
vue create cliapp
cliapp в данном случае это название создаваемого проекта, оно может быть произвольным.
После ввода команды консоль отобразит три опции для выбора:
С помощью клавиш вверх-вниз можно перемещаться между опциями. К примеру выберем опцию Manually select features. После этого нам надо будет отметить те компоненты, которые мы хотим включить в проект.
Опять же с помощью клавиш вверх-вниз можно перещаться между компонентами. Если надо выбрать все или, наоборот, снять выделение со всех, то можно использовать клавишу A. К примеру, НЕ выберем ни одного компонента, чтобы создаваемый проект был предельно минималистичен, и нажмем на Enter.
Далее будет предложено указать, как будет храниться конфигурация:
Выберем опцию In package json.
Далее будет предложено сохранить конфигурацию. И затем будет создан проект, который уже будет содержать базовую функциональность.
Стоит отметить, что по умолчанию создается скрытый репозиторий git для проекта. Если он нам не нужен, то при создании проекта надо использовать флаг -n (сокращение от --no-git):
vue create -n cliapp
Если мы обратимся к файлу package.json, то увидим, что он уже содержит определение команд для запуска и построения приложения.
Так, в секции scripts определена команда "serve", которая, используя инфраструктуру CLI, запускает проект. Перейдем к этой папке и выполним эту команду в консоли:
npm run serve
Консоль отобразит адрес, по которому можно обратиться к запущенному проекту.
Также стоит отметить, что доступен графический функционал для создания объекта. Для этого надо выполнить в консоли команду:
vue ui
После этого в браузере откроется страница, где можно в графическом режиме создать новый проект.