Убедитесь, что у вас установлены NodeJS и NPM и готовы к работе.
Создайте папку для вашего приложения Vue
mkdir myApp cd myApp
Инициализировать приложение
npm init -y
Установите Webpack и сделайте его зависимым от разработки. Webpack компилирует и собирает наше приложение в пакет, который позже можно развернуть в производственной среде.
npm install webpack --save-dev npm install webpack-cli --save-dev
Создайте две подпапки app и build.
mkdir app mkdir build
Webpack нужны инструкции о том, что ему нужно делать. Это делается путем создания файла конфигурации, специфичного для Webpack. Создайте файл webpack.config.js в корневой папке. Добавьте следующий фрагмент в webpack.config.js. Это сообщает webpack, что index.js является нашей точкой входа для приложения. Он также указывает имя и расположение пакета, который создаст Webpack.
Установите VueJS локально и сохраните его как зависимость времени выполнения
npm install vue --save
В пакете Vue существует множество различных реализаций Vue. Нам нужно указать Webpack, какую реализацию VueJS использовать. Измените webpack.config.js следующим образом.
const path = require('path');
const PATHS = {
app: path.resolve(__dirname,'app'),
build: path.resolve(__dirname,'build')
};
module.exports = {
entry: {
app: PATHS.app + "/index.js"
},
output: {
path: PATHS.build,
filename: 'bundle.js'
},
resolve: {
alias: {
'vue': 'vue/dist/vue.common.js'
}
}
};
Создайте новый файл index.js в папке app и поместите в него следующий код
import Vue from 'vue';
new Vue({
el: '#app',
data: {
message: "Hello There"
}
});
Создайте новый файл index.html в папке build. Заполните файл следующим кодом.
<!doctype html>
<html>
<head>
<title>My First Vue App </title>
</head>
<body>
<div id="app">
<p>{{message}}
</div>
<script src="./bundle.js"></script>
</body>
</html>
Теперь, когда у нас есть файл JavaScript и файл html, теперь мы можем использовать Webpack для компиляции и сборки нашего приложения. Прежде чем использовать Webpack. Нам нужно сообщить NPM, что Webpack - это наш инструмент сборки. Это делается в файле package.json.
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --progress --display-error-details"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.3.3"
},
"devDependencies": {
"webpack": "^2.6.0"
}
}
Пришло время скомпилировать и собрать приложение.
npm run build
Вы должны увидеть новый файл bundle.js в папке build. Дважды щелкните index.html.
Вы создали свое первое приложение Vue. Однако это не устойчивый способ создания веб-приложений. Нам нужен способ обнаруживать изменения в нашем JavaScript и таблицах стилей, а также автоматически компилировать и создавать наше приложение. Это делается с помощью webpack-dev-server. Наряду со сборкой нашего приложения webpack-dev-server будет размещать наше приложение на своем внутреннем веб-сервере. Это очень удобно на этапе разработки, поскольку нам не нужно тратить время на настройку веб-сервера.
Установите webpack-dev-server как зависимость для разработки
npm install webpack-dev-server --save-dev
Нам нужно сообщить Npm, как использовать webpack-dev-server
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --progress --display-error-details",
"start": "webpack-dev-server --progress --colors --inline --content-base build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.3.3"
},
"devDependencies": {
"webpack": "^2.6.0",
"webpack-dev-server": "^2.4.5"
}
}
Чтобы использовать webpack-dev-server, выполните команду запуска
npm run start
Если команда npm run start здесь не работает, проверьте, есть ли на этом компьютере другой веб-сервер и работает ли что-то еще на порту 8080. webpack-dev-server по умолчанию работает на порту 8080. Запустите браузер и перейдите к
Http: // localhost: 8080. Если вы не видите Hello World, нам нужно изменить настройки, чтобы веб-страница обслуживалась на порту, отличном от 8080. Измените webpack.config.js, чтобы приложение запускалось с порта, отличного от 8080.
const path = require('path')
const PATHS = {
app: path.resolve(__dirname,'app'),
build: path.resolve(__dirname,'build')
};
module.exports = {
entry: {
app: PATHS.app + "/index.js"
},
output: {
path: PATHS.build,
filename: 'bundle.js'
},
resolve: {
alias: {
'vue': 'vue/dist/vue.common.js'
}
},
devServer: {
host: '127.0.0.1',
port: 4040,
}
};
Мы только что изменили конфигурацию webpack, чтобы наше приложение запускалось под портом 4040. Снова создайте приложение.
npm run start
В своем интернет-браузере перейдите по адресу http: // localhost: 8080 или http: // localhost: 4040, в зависимости от того, под каким именем вы настраивали приложение. Вы должны увидеть привет на веб-странице. Теперь перейдите и замените Hello there в index.js на что-нибудь другое. Webpack-dev-server автоматически обнаружит изменение, восстановит приложение за кулисами и обновит веб-страницу для вас. Теперь вы должны увидеть, как внесенные вами изменения отражаются на веб-странице.
Помимо обнаружения изменений в файлах JavaScript, Webpack также может обнаруживать изменения в файлах css, а также на лету перестраивать и обновлять наше приложение. Чтобы это сработало, нам нужно заранее поработать. Нам нужно установить пару загрузчиков, которые работают с таблицами стилей. Эти загрузчики зависят от разработки. Если веб-пакет запущен, выйдите из него, нажав CTRL-C.
npm install css-loader style-loader --save-dev
Измените файл webpack.config.js, чтобы он знал, когда и как обрабатывать загрузчики CSS и стилей, которые мы установили на предыдущем шаге.
const path = require('path')
const PATHS = {
app: path.resolve(__dirname,'app'),
build: path.resolve(__dirname,'build')
};
module.exports = {
entry: {
app: PATHS.app + "/index.js"
},
output: {
path: PATHS.build,
filename: 'bundle.js'
},
resolve: {
alias: {
'vue': 'vue/dist/vue.common.js'
}
},
devServer: {
host: '127.0.0.1',
port: 4040,
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader','css-loader']
}
]
}
};
В папке app создайте папку css и добавьте новый файл main.css. поместите следующие определения таблиц стилей в main.css
body {
background: lightblue;
}
Измените index.js, чтобы включить следующую строку в начало файла.
require('./css/main.css');
Скажите webpack собрать приложение и запустить приложение
npm run start
Перейдите на веб-страницу http: // localhost: 8080 (или http: // localhost: 4040). Вы должны увидеть голубой фон на своей веб-странице.
Теперь давайте изменим таблицу стилей, чтобы увидеть, как веб-пакет и обнаруживать изменения в файле css, а также пересобирать и перезагружать наше приложение на лету. Измените содержимое main.css следующим образом.
body {
background: lightgreen;
}
К тому времени, как вы измените таблицу стилей, webpack уже обнаружил изменение, выполнил и отобразил изменения. На веб-странице вы должны увидеть, что цвет фона становится светло-зеленым.
Теперь давайте заставим это приложение работать с Bootstrap. Установите бутстрап с помощью NPM. Мы не будем использовать флаг «- save-dev» при установке начальной загрузки. Bootstrap - это не зависимость от разработки, это зависимость от времени выполнения.
npm install bootstrap --save
Чтобы бутстрап работал с Webpack, нам понадобится пара дополнительных загрузчиков. Это загрузчик файлов и загрузчик URL. Помимо файлов CSS, бутстрап также включает шрифты, URL-адреса и изображения. Webpack необходимо знать, как обрабатывать различные типы ресурсов, которые поставляются с начальной загрузкой. Эти два загрузчика зависят от разработчиков.
npm install file-loader url-loader --save-dev
Измените файл webpack.config.js, чтобы указать, как обрабатывать различные типы ресурсов, которые поставляются с начальной загрузкой. Раздел «модуль» в webpack.config.js необходимо изменить следующим образом.
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
{
test: /\.png$/,
use: "url-loader?limit=100000"
},
{
test: /\.jpg$/,
use: "file-loader"
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: 'file-loader'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=10000&mimetype=image/svg+xml'
}
]
}
Включите начальную загрузку в index.js, убедитесь, что оператор require для начальной загрузки стоит перед оператором require для «main.css». Это сделано для того, чтобы наши пользовательские стили не были перезаписаны загрузкой. Также включите в этот файл компонент начальной загрузки, чтобы проверить настройку.
require('bootstrap/dist/css/bootstrap.min.css');
require('./css/main.css');
import Vue from 'vue';
Vue.component('my-button', {
template: '<input type="button" class="btn btn-primary" value="Hello bootstrap">'
})
new Vue({
el: '#app',
data: {
message: "Hello There"
}
});
Измените index.html, включив в него компонент «my-button». Поскольку изменение касается html-файла, а webpack не обнаруживает изменений в html-файле, вам придется обновить веб-страницу самостоятельно, чтобы увидеть изменения.
Создайте приложение
npm run start
Перейдите на веб-страницу http: // localhost: 8080, вы должны увидеть кнопку со стилем начальной загрузки.
На этом завершается настройка для начала работы с Vue, Webpack и Bootstrap.
