by yugasun from yugasun.com/post/there-ma…Эта статья может быть воспроизведена полностью, но должны быть сохранены первоначальный автор и источник.
Среда разработки
Поскольку это настоящий бой, как он может быть неотделим от среды разработки проекта? В первую очередь рекомендую свою личную среду разработки:
аппаратное оборудование: Mac OS Xпереводчик: Код Visual Studioинструмент командной строки: iTerm2инструменты отладки: Инструмент Chrome Dev + vue-devtoolsУправление версиями: Гит
Здесь не будет показан рабочий интерфейс конкретного инструмента и способы его использования. Просто используйте поисковую систему для поиска соответствующих вводных. Вы можете выбрать подходящую вам среду разработки в соответствии с вашими личными предпочтениями.
Модульная разработка
Использование VUE в предыдущих статьях - непосредственно представить исходный код для использования, но фактический проект разработки, как правило, очень сложен, и будет включать множество шаблонов страниц, для нас невозможно написать все функции в одном и том же файле JS, А затем через введение тегов скрипта делает все более труднее поддерживать, поскольку проект растет, поэтому проект нуждается в модульной разработке.
О том, что такое модуляризация, и как модульизировать наш проект, рекомендуется прочитатьВведение в модульность JavaScript I: Понимание модулейа такжеВведение в модульность JavaScript II: упаковка и построение модулей.
Когда кода проекта становится все больше и файлов наших модулей становится все больше и больше, нам нужны инструменты, помогающие нам лучше управлять этими модулями и упаковывать их, чтобы мы могли лучше сосредоточиться на модульной разработке, а не на этих тривиальных вещах. тогдаwebpackАналогичные инструменты должны быть поставлены, конечно, кромеwebpackЕсть много подобных инструментов, каждый со своими преимуществами, такими как:rollup,parcel....
Все примеры в будущих статьях будут использованыwebpackиз3.xИнструмент версии для завершения разработки с Vue.
начальный веб-пакет
Я должен сказать здесь, что когда многие друзья разрабатывают проекты Vue, они используют его, как только появляются.vue-cliИнструменты скаффолдинга разрабатывают проекты, хотя шаблоны проектов можно создавать быстро, не обращая внимания на проблемы начальной настройки. Но я не рекомендую этого делать, потому что этоvuejs + webpack + es6 + babel + eslint...Подождите появления различных инструментов, и некоторые люди начнут использовать их, прежде чем узнают, что они из себя представляют. Если что-то пойдет не так, я не знаю, что делать. Хотя помощь поисковых систем может помочь нам решить 80% проблем, по-прежнему требуется много энергии для поиска и запросов, продолжайте попытки, и когда проблема будет решена, пройдет один день, и выигрыш перевесит потери. .
Поэтому я предлагаю научиться использовать сначалаwebpackВ начале будет легче принять его, вводя его шаг за шагом. Ведь большинство людей в этом мире не гении.Чтобы научиться бегать, нужно сначала научиться ходить.
Хотя нынешнее общество относительно порывистое, мирное сердце и приземленность — это путь к успеху~
Ну и без лишних слов, давайте сразу к сегодняшней теме,Удачная разработка проекта Vuejs с помощью веб-пакета.
Прежде чем читать код ниже, пожалуйста, ознакомьтесь с использованием модулей nodejs, включая базовую установку зависимостей модулей через npm и как ввести сторонние модули для использования.Хотя это будет упомянуто здесь, это не будет подробно объяснено .
Мы сначала создаем новую папку проекта, создаем новую в корневом каталогеindex.html, код показан ниже:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue webpack demo</title>
</head>
<body>
<div id="app"></div>
<script src="./build.js"></script>
</body>
</html>
запуск из командной строкиnpm init, согласно интерактивным подсказкам, заполните соответствующую информацию проекта (конечно, она вся на английском языке, если вы не умеете читать, то можете понять ее напрямую), после заполнения, корень проекта каталог появитсяpackage.json(чтобы ознакомиться с содержимым файла package.json, вы можете прочитать эту статью:файл package.json). затем пройтиnpmустанавливаем то, что нам нужноvueБиблиотеки:
# 添加 --save 参数，会将 vue 依赖添加到 package.json 文件中
npm install vue --save
затем создайте новыйsrcкаталог, вsrcсоздать каталогapp.jsВходной файл, код выглядит следующим образом:
// 模块化的引入 vue，并将其赋值给 Vue 变量
var Vue = require('vue')
new Vue({
el: "#app",
template: "<h1>{{ msg }}</h1>",
data () {
return {
msg: 'Hello Vue.js'
}
}
})
КонечноrequireФункция браузера не распознана, необходимо пройтиwebpackДругой код ES5 помогает нам добиться компиляции и упаковки, а также преобразования его в основные браузеры.
Установить первымwebpackЗависимости пакетов:
# 添加 --save-dev 参数，会将 webpack 开发依赖添加到 package.json 文件中
npm install webpack --save-dev
Затем создайте его в корневом каталоге проекта.webpack.config.jsфайл, код такой:
module.exports = {
// 入口文件
entry: './src/app.js',
// 编译输出文件
output: {
filename: 'build.js'
},
resolve: {
alias: {
// 因为我们这里用的是 require 引入方式，所以应该使用vue.common.js/vue.js/vue.min.js
'vue$': 'vue/dist/vue.common.js'
}
}
}
из-за вышеизложенногоindex.htmlВведен в составbuild.jsфайл, чтобы увидеть эффект проявки, его нужно запустить вручнуюwebpackКоманда упаковки:
./node_modules/.bin/webpack
Здесь, если вы хотите запустить напрямую
webpack, Вам нужен компьютер для установки глобального веб-пакета, запустивnpm install webpack -gкоманда для глобальной установки.
Затем вы увидите следующий вывод:
$ webpack
Hash: 8a61c2605578f38f46cd
Version: webpack 3.10.0
Time: 386ms
Asset Size Chunks Chunk Names
build.js 104 kB 0 [emitted] main
[0] (webpack)/buildin/global.js 509 bytes {0} [built]
[1] ./src/app.js 148 bytes {0} [built]
+ 4 hidden modules
В этот момент появится корневой каталогbuild.jsфайл, мы откроем его через браузерindex.htmlфайл, появилась знакомая картинка,Hello Vue.js.
здесь простой на основеvue + webpackСтроительство проекта завершено, очень просто, не терпится попробовать самому? КонечноwebpackФункционал намного больше. Более подробно о функциях см.официальная документация, чтобы полностью понятьwebpackвласти.
живая перезагрузка
В приведенном выше примере также есть проблема, то есть каждый раз, когда мы обновляем код, нам нужно переупаковывать и компилировать, а также вручную обновлять браузер, чтобы увидеть эффект наших изменений, что действительно хлопотно. Автор webpack также рассматривал эту проблему и параллельно развивал ее.webpack-dev-serverинструменты, которые помогут нам достичьlive reloadingФункция , то есть когда мы обновляем код, браузер будет обновляться в режиме реального времени, показывая обновленный эффект.
Спешите использовать его ~ Сначала установите зависимости:
npm install webpack-dev-server --save-dev
затем изменитьwebpack.config.jsФайл конфигурации выглядит следующим образом:
module.exports = {
// 入口文件
entry: './src/app.js',
// 编译输出文件
output: {
filename: 'build.js'
},
resolve: {
alias: {
// 因为我们这里用的是 require 引入方式，所以应该使用vue.common.js/vue.js/vue.min.js
'vue$': 'vue/dist/vue.common.js'
}
},
// 这里添加的是有关 webpack-dev-server 的配置
devServer: {
// 这里定义 webpack-dev-server 开启的web服务的根目录
contentBase: './'
}
}
Затем выполните команду:
./node_modules/.bin/webpack-dev-server
Консоль выведет следующее:
$ ./node_modules/.bin/webpack-dev-server
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./
Hash: d33155f6797f2c78c448
Version: webpack 3.10.0
Time: 903ms
Asset Size Chunks Chunk Names
build.js 627 kB 0 [emitted] [big] main
[0] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.js 40 bytes {0} [built]
[4] (webpack)-dev-server/client?http://localhost:8080 7.91 kB {0} [built]
...
[28] ./node_modules/timers-browserify/main.js 1.9 kB {0} [built]
+ 15 hidden modules
webpack: Compiled successfully.
Откройте браузер и посетите: http://localhost:8080.В это время снова появляется знакомый экран, O(∩_∩)O~~. Давайте попробуем изменитьapp.jsсерединаmsgКонтент, контент браузера тоже изменится, это круто, давайте попробуем.
Используйте npm-скрипты
Для команды упаковки выше./node_modules/.bin/webpackи живые команды разработки./node_modules/.bin/webpack-dev-server, хотя вы можете быстро скопировать и вставить ввод в командной строке, но первый раз все равно неизбежен. Как ленивый программист, как вы можете печатать столько лишних символов? в самый разpackage.jsonв файлеscriptsПоля могут помочь нам решить эту проблему.
Давайте посмотрим на введение:
Скрипты — это аббревиатуры командной строки npm, используемые для указания запущенных команд скрипта, например, start указывает запущенный
npm run start, соответствующая команда должна быть выполнена.
Хорошо, теперь, когда мы поняли, что он делает, давайте попробуем его переписать.package.jsonфайл, изменитьscriptsПоля следующие:
"scripts": {
"dev": "webpack-dev-server",
"build": "webpack"
}
Затем в командной строке введите:
npm run dev
ты найдешь и исполнишь./node_modules/.bin/webpack-dev-serverтот же эффект.
Примечание: здесь
scriptsуказано вwebpack-dev-serverКоманда такова, что путь к команде опущен, потому что, когда npm выполняет скрипт, он по умолчанию сначала выполняет текущий каталог../node_modules/.bin/Команда в , если команда не найдена, выполняется глобальная команда.
Точно так же выполнитьnpm run buildэто упаковать и вывести то, что мы хотимbuild.jsдокумент.
Препроцессор CSS
Несмотря на то, что css достаточно мощен, в глазах программистов он всегда был очень хлопотным: в нем нет ни переменных, ни условных операторов, только простое построчное описание, которое довольно хлопотно написать. Такие разныеПрепроцессор CSSпоявился на свет, из которых мой любимыйSASS, использование синтаксиса sass для написания наших файлов стилей значительно повысит эффективность нашей разработки и значительно упростит разработку css.
Далее мы расскажем, как интегрировать его в наш проект.
для веб-пакета一切皆模块, все файлы формируют зависимости через введение модуля, а введение или предварительная обработка каждого модуля выполняется черезloaderсбываться. потому что нашsassБраузеры синтаксиса не распознаются, поэтому вам нужно использовать соответствующиеloaderДля его продвижения превращение в соответствующиеcss. Хотя css браузер может распознать, ноwebpackПо сути, упаковщик статических модулей для приложений javascript, все содержимое файла будет обработано как javascript, а затем подвергнуто постобработке. Так что здесь кроме необходимости предобработкиsassизloader, также нужно загрузитьcssизloader, и, наконец, нужно пройтиstyle-loaderПрийти в динамику, созданные кстати JSstyleпометитьindex.htmlсередина.
Зная это, мы знаем, что делать, сначала установить необходимыеloader:
# 因为 `sass-loader` 需要依赖 `node-sass`, 所以这里一并安装
npm install style-loader css-loader sass-loader node-sass --save-dev
Исправлятьwebpack.config.jsфайл конфигурации, добавить связанныеloaderКонфигурация:
module.exports = {
//...
module: {
// 这里用来配置处理不同后缀文件所使用的loader
rules: [
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
}
]
}
}
Загрузчик веб-пакета поддерживает цепную передачу. Он может использовать конвейерную обработку ресурсов. Группа цепных загрузчиков будет обрабатываться в обратном порядке. Поток обработки здесь: sass-загрузчик -> css-загрузчик => стиль-загрузчик
Настроили, сейчас протестируем, вsrcсоздать каталогapp.scssфайл со следующим содержимым:
$red: rgb(218, 42, 42);
h1 {
color: $red;
}
затем вsrc/app.jsВнесено в файл:
require('./app.scss');
var Vue = require('vue');
new Vue({
el: "#app",
template: "<h1>{{ msg }}</h1>",
data () {
return {
msg: 'Hello Vue.js'
}
}
});
бежать сноваnpm run dev, вы найдете нашh1Изменился цвет этикетки. Проверяя элементы, можно обнаружитьindex.htmlизheadДобавлен новый ярлык вstyleЭтикетка, содержание есть,app.scssВывод компиляции:
h1 {
color: #da2a2a;
}
Если это не ясноsassДля использования рекомендуется ознакомиться с этим основным вводным документом:Руководство по использованию SASS
загрузка изображения
Теперь, когда мы говорим о статических ресурсах css, естественно загружать изображения. Как было сказано выше, в вебпаке все является модулем, и картинки, разумеется, вводятся в виде модулей. Поскольку это модуль, связанный с ним импортированный загрузчик, естественно, незаменим.Здесь мы используем импортированный образ.url-loader, сначала установите его:
npm install url-loader --save-dev
Добавить кurl-loaderКонфигурация:
module.exports = {
// ...
module: {
// 这里用来配置处理不同后缀文件所使用的loader
rules: [
// ...
{
test: /\.(jpe?g|gif|png)$/,
use: 'url-loader'
}
]
}
}
после этогоapp.jsПредставлен в:
require('./app.scss');
var Vue = require('vue');
var logoSrc = require('./logo.jpg')
new Vue({
el: "#app",
data () {
return {
msg: 'Hello Vue.js'
}
},
render (h) {
return (
h('div', [
h('img', {
domProps: {
src: logoSrc,
alt: 'logo',
className: 'logo'
}
}),
h('h1', this.msg)
])
)
}
});
Здесь мы используем
renderфункция для пользовательского рендеринга нашего узла с параметрами по умолчаниюhэто мыпричудливые целевые элементы рендерингаупомянулcreateElementЭто просто псевдоним параметра, здесь для простоты написания.hПервый параметр функцииdomИмя, вторым параметром является объект конфигурации при создании, черезdomPropsдля добавления значений свойств, связанных с DOM. Здесь мы представляемlogoSrcназначенный емуsrcАтрибуты.
затем повторитеnpm run dev, то, что мы хотим, появляется на страницеlogoкартинка тоже.
Суммировать
知己知彼，百战不殆, мы только действительно понимаемwebpackИспользование навыков, в реальной разработке, нам будет более кстати. Не пугайтесь необъяснимой ошибки. У программистов есть три сокровища:多学习，多编写，多总结, наши навыки программирования будут продолжать улучшаться.