предисловие
Процесс обучения vue обязательно соприкоснется с однофайловыми компонентами vue, а затем соприкоснется с vue-cli (инструментом-скаффолдингом, созданным vue-проектами), но проекты, созданные vue-cli, очень недружественны к новички.
vue init webpack-simple project-nameСозданный проект слишком упрощен и однобок.
Этот туториал будет разделен на несколько статей, чтобы поэтапно настроить webpack поглубже.Если вы хотите обновить его позже, вы можете обратить внимание~
Далее мы будем постепенно создавать пригодную для использования инженерную среду vue от инициализации до написания конфигурации и добавления загрузчиков и плагинов, чтобы новички могли самостоятельно создавать vue-cli и изучать некоторые элементы конфигурации, обычно используемые веб-пакетом.
Обратите внимание, что это руководство относится к webpack3 и не поддерживает webpack4 или выше.
некоторая официальная документация
- webpack
- vue-loader
- .babelrc (конфигурация Бабель)
- postcss (плагин для преобразования стилей)и babelrc будут кратко упомянуты позже
- npm (если вам нужен плагин, перейдите в библиотеку плагинов, чтобы проверить использование)
vue-loader
vue-loader, — это загрузчик веб-пакетов, используемый для компиляции компонентного файла *.vue в проекте vue и преобразования его в JavaScript. Это самый важный загрузчик для работы Vue и он обязательно будет использоваться, поэтому я упомяну его заранее.
Создать проект
Предпосылка заключается в том, что вы установили среду node и npm.
mkdir project-vue
cd project-vue
npm init
//初始化设置都按enter默认就好，或者按你需要改
Установить вебпак в проект
npm install --save-dev webpack
//啰嗦一下淘宝镜像设置
npm install -g cnpm –registry=https://registry.npm.taobao.org
Создать файл конфигурации веб-пакета
Когда веб-пакет запущен, он найдет каталог, в котором включена команда веб-пакета.webpack.config.js, поэтому создайте файл в корневом каталоге проекта.
//webpack.config.js
const path = require('path')
module.exports ={
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:"js/[name].js"
}
}
Выше приведен самый простой шаблон, в нем задается входной файл (запись) и адрес экспорта (выходной), это немного основ вебпака, если вы не понимаете, перейдите к началуwebpackбазовая конфигурация.
Функция пути — это связанное с путем промежуточное программное обеспечение, которое поставляется с узлом. По сути, весь проект использует промежуточное программное обеспечение такого узла. Путь используется для объединения путей и возврата строки пути. Вы можете бросить краткий обзор.path.
- Параллельно создадим файлы index.html и main.js Структура каталогов проекта следующая:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue demo</title>
</head>
<body>
<div id="app">
</div>
<script src="./dist/js/main.js"></script>
</body>
</html>
Просто напишите несколько js в main.js
Попробуйте
webpack
веб-пакет не установлен глобальноnpm install -g webpackУказанная выше команда не может быть выполнена. Вы также можете изменить скрипты npm для быстрого запуска, открыть package.json и добавить скрипты.
Вот копия Учителя Жуань Ифэн.Введение в скрипт npm,пожалуйста
{
"name": "vue-demo",
"version": "1.0.0",
"description": "this is a vue demo",
"main": "index.js",
"scripts": {
"build": "webpack"
}
}
npm run build
В корневом каталоге будет папка dist с упакованными файлами.
Внедрить ряд зависимостей и загрузчиков
Конечно, проект vue должен установить зависимости vue~~
npm install --save vue
vue-loader необходим, vue-template-compiler является необходимой зависимостью vue-loader
npm install --save-dev vue-loader vue-template-compiler
Как можно написать современный проект, не используя es6 или выше, с загрузчиком компилятора es
npm install --save-dev babel-core babel-loader
Другой загрузчик и конвертер css, style-loader преобразует css в js, а затем вставит его в тег стиля html~
npm install --save-dev css-loader style-loader
Также есть загрузчики для файлов изображений и файлов шрифтов. url-loader зависит от file-loader, поэтому он должен быть установлен. url-loader изменит файлы меньше лимита в формат base64 и напрямую передаст их в src, что может уменьшить количество сетевых запросов. Файловый загрузчик автоматически добавит для нас правила имен файлов, и URL-адрес будет изменен вместе с ним.
npm install --save-dev file-loader url-loader
Конфигурация вышеуказанного загрузчика кратко описана ниже.
элемент конфигурации загрузчика
Каждый тип загрузчика соответствует типу файла, и мы добавляем загрузчик в соответствии с типом файла проекта.
Краткое введение пункта конфигурации написано в комментарии, пожалуйста, внимательно прочитайте комментарий! ! !
const path = require('path')
const webpack = require('webpack')
module.exports = {
entry:{
app:'./src/main.js',
},
output:{
path:path.resolve(__dirname,'./dist'),
filename:"js/[name].js",
},
module:{
rules:[
{
test:/\.js$/, //用正则匹配文件，用require或者import引入的都会匹配到
loader:"babel-loader", //加载器名，就是上一步安装的loader
exclude:/node_modules/ //排除node_modules目录，我们不加载node模块中的js哦~
},
{
test:/\.css$/,
use:[
'style-loader',
'css-loader',
// 'postcss-loader'
]
//依次使用以上loader加载css文件，postcss-loader可以暂时不加，后面再深入修改webpack配置的时候再说用处
//
//也可以写成这样 loader："style-loader!css-loader!postcss-loader"
},
{
test:/\.(png|jpe?j|gif|svg)(\?.*)?$/,
loader:'url-loader',
options:{
limit:10000,
name:'img/[name].[ext]?[hash]'
}
//图片文件大小小于limit的数值，就会被改写成base64直接填入url里面，
//不然会输出到dist/img目录下，[name]原文件名，[ext]原后缀，[hash]在url上加上一点哈希值避免缓存。
},
{
test:/\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader:"url-loader",
options:{
limit:10000,
name:'fonts/[name].[ext]?[hash]'
}
//和上面一致
},
{
test:/\.vue$/,
loader:'vue-loader'
//这一个loader当然是vue项目必须的加载器啦，不加其他规则的话，
//简单的这样引入就可以了，vue-loader会把vue单文件直接转成js。
},
]
},
resolve:{
//引入路径是不用写对应的后缀名
extensions: ['.js', '.vue', '.json'],
//缩写扩展
alias:{
//正在使用的是vue的运行时版本，而此版本中的编译器时不可用的，我们需要把它切换成运行时 + 编译的版本
'vue$':'vue/dist/vue.esm.js',// 'vue/dist/vue.common.js' for webpack 1
//用@直接指引到src目录下，如：'./src/main'可以写成、'@/main'
'@': path.resolve(__dirname,'./src'),
}
},
}
Официальная китайская документацияОн также представляет некоторые загрузчики и другие загрузчики, использованные выше, вы можете взглянуть.
При использовании загрузчика можно перейти в «npmjs"Просматривайте подробное использование каждого загрузчика или зависимости, это хорошая привычка! ~
Начните работу с .vue
Не говорите, что вы вообще не будете читать эту частичную статью с vue.
main.js изменен на следующее
import Vue from 'vue'
import './styles/main.css'
import App from './app.vue'
new Vue({
el:"#app",
template:'<App/>',
components:{App}
})
Создайте новый файл app.vue
<template>
<div id="app">
<img src="./images/logo.png" alt="logo" />
<span>{{msg}}</span>
<p class="test">test text</p>
</div>
</template>
<script>
import Vue from 'vue'
export default {
name:'app',
data(){
return {
msg:"hello vue !!"
}
},
}
</script>
<style >
.test{
color:#020202
}
</style>
<style lang="less"><!--我好像还没说引入less哦，下面说-->
#app{
img{width:100px;}
}
</style>
не забудьтерисунок, написать main.css
/*main.css*/
@import './reset.css';
#app{
color:red;
}
я тоже импортировалreset.css
использовать меньше или дерзко
Вы можете использовать less или sass в своем проекте, но вам нужно установить less-loader и sass-loader
npm install --save-dev less-loader
npm install --save-dev sass-loader
Если компилятор less или sass не установлен глобально, установите его.Перед выполнением вышеуказанной установки загрузчика сначала установите less или sass.
安装到本项目中
npm install --save-dev less
安装到全局中
npm install --g less
Возьмем в качестве примера less-loader, модифицируем webpack.config.js
{
test:/\.less$/,
use:[
'vue-style-loader'
'css-loader',
'less-loader'
]
},
{
test:/\.vue$/,
loader:'vue-loader',
options:{
loaders:{
'less':[//lang属性对应的名称
'vue-style-loader'//首先给vue的样式loader过滤一遍
'css-loader',//css-loader,把css转js
'less-loader'//用less编译
]
}
}
}
При использовании однофайлового компонента vue в атрибут lang можно добавить логотип, и файлы с суффиксом less тоже будут скомпилированы вместе
<style lang="less">
#app{
img{width:100px;}
}
</style>
Sass похож, но у sass есть две спецификации синтаксиса, sass и scss, которые нужно устанавливать отдельно Я вставлю небольшой код vue-cli ниже, но он будет представлен.
В соответствии с методами добавления и настройки препроцессоров less и sass можно использовать typescript, pug и другие плагины препроцессора js и html. Не забудьте добавить описание атрибута lang в теги template, script и style.
С es6 не так много других языков препроцессинга, используемых в js, а html по-прежнему используется для написания полного DOM
упаковать и запустить
Перед упаковкой я изменил npm-скрипты, чтобы можно было видеть ход упаковки и скрывать ненужную информацию
"build": "webpack --progress --hide-modules"
запустить упаковку
npm run build
Откройте index.html в браузере, вы увидите, что он работает нормально.
следующее уведомление
В настоящее время весь проект vue в основном доступен, но он все еще находится на этапе добавления и настройки самого базового загрузчика, и будет представлен ряд плагинов (плагинов), таких как горячее подключение, извлечение кода и сжатие кода. в будущем.
Люди, у которых есть основы использования vue-cli и webpack, подумают, что вышеприведенный контент более склонен к вводу, но все имеет последовательный и постепенный процесс.Для новичков сборка с 0 является очень эффективным процессом обучения, а базовая инженерия Хорошо, теперь самое главное.
В следующем выпуске мы добавим дополнительные плагины для реализации большего количества функций, а также представим сторонние конфигурации конвертеров компиляторов (.babelrc, postcss).
- Второй выпуск обновленОт создания vue-скаффолдинга до освоения конфигурации веб-пакета (2. Плагины и извлечение)
Ссылаться на
- webpack создает проект vue (nuggets.capable/post/684490…)
- официальная документация vue-loader (v UE-loader.v UE JS.org/this-capable/)
- wepack китайская документация (Woohoo. CSS88.com/doc/Web pack…