Базовое использование Webpack (подробно)

Webpack

Прежде чем мы начнем, давайте взглянем на изображения на главной странице официального сайта Webpack и подумаем о значениях, которые передают нам изображения на официальном сайте​

1. Базовое введение в Webpack

1.1 Введение концепции

Мысль: какие общие статические ресурсы мы часто используем на веб-страницах?

  • JS
    • .js .jsx .coffee .ts (C#-подобный язык TypeScript)
  • CSS
    • .css .less .sass .scss
  • Images
    • .jpg .png .gif .bmp .svg
  • Шрифты
    • .svg .ttf .eot .woff .woff2
  • файл шаблона
    • .ejs .jade .vue [Это рекомендуемый способ определения компонентов в веб-пакете]

Вопрос: Проблемы, возникающие после того, как на веб-странице слишком много статических ресурсов

  1. Веб-страницы загружаются медленно, потому что запросы ресурсов отправляются несколько раз снова и снова.
  2. Работа со сложными зависимостями

Как решить две вышеуказанные проблемы?

  1. Слияние, сжатие, спрайт, кодирование изображений Base64
  2. Вы можете использовать requireJS, который вы изучили ранее, или вы можете использовать webpack для решения сложных зависимостей между пакетами;

1.2 Что такое веб-пакет

Webpack — это интерфейсный инструмент для создания проектов, который представляет собой интерфейсный инструмент, разработанный на основе node.js.

Как реализовать два вышеуказанных решения?

  1. Используя Gulp, он основан на задачах;
  2. Используя Webpack, он основан на всем проекте;
  • С помощью веб-пакета, переднего автоматизированного инструмента построения, вы можете идеальноРеализуйте слияние, упаковку, сжатие и запутывание ресурсов.и многие другие функции.
  • Судя по картинкам на официальном сайте, представлен процесс упаковки webpack
  • официальный сайт вебпака

1.3 Спецификации, поддерживаемые Webpack

Webpack поддерживает следующие спецификации

  1. Спецификация CommonJS
//moduleA.js 导出
module.exports = function(){
    //...
}

//moduleB.js 导入
var moduleA = require('./moduleA')
  1. Спецификация AMD (в зависимости от предварительной уверенности)
//moduleA.js 导入和导出
define(['jquery','./math.js'],function($,math){
    //AMD是依赖前置，将文件的依赖通过数组的形式导入，然后当作函数的参数传递进函数使用
    
    //通过return来实现对外接口
    return helloWorld
})

  1. Спецификация CMD (учитывайте близлежащие зависимости и загружайте модули при необходимости)

    Стандартный синтаксис: определить (id?, deps?, factory)

    • Один файл — это один модуль, поэтому имя файла часто используется в качестве идентификатора модуля.
    • CMD соблюдает близость зависимостей, поэтому вообще пишите зависимости не в параметрах define, а в фабрике
    • factory - это функция с тремя параметрами (require, exports, module)
      • require: метод, который получает идентификатор модуля и используется для получения интерфейса, предоставляемого другими модулями.
      • экспорт: объект, используемый для предоставления интерфейсов модуля внешнему миру.
      • модуль: объект, в котором хранятся некоторые свойства и методы, связанные с текущим модулем.
define(fcuntion(require,exports,module){
       var $ = require('jquery.js')
       })
  1. Спецификация ES6
  • В спецификации ES6 используйте команды import и exports для импорта и экспорта файлов.
//moduleA.js 导出

//...内容区

//导出函数(还可以导出对象以及任何你想导出的数据类型)
exports.func = someFunc

//moduleB.js 导入
import func from './moduleA'

Самородки: разница между AMD и CMD

1.4 Установите WebPack

  1. бегатьnpm i webpack -gУстановите Webpack глобально, чтобы вы могли глобально использовать команды Webpack.
    • Обратите внимание, что еслиwebpack4.0Вышеуказанные версии должны быть установлены глобальноWebpack-cli
  2. Запуск в корневом каталоге проектаnpm i webpack --save-devУстановить в зависимости проекта

1.5 Использование командной строки

  • Просмотр информации о версии Webpack
npm info webpack
  • Установите указанную версию Webpack
npm install webpack@版本号
  • удалить веб-пакет
npm uninstall webpack webpack-cli -g

2. Базовое использование Webpack

2.1 Базовое использование Webpack — пример

Цель: использовать Webpack для упаковки случая чересстрочного изменения цвета в списке сборки.

  1. Создайте базовую структуру каталогов

    webpack-study

    • dist
    • src
      • js
      • css
      • images
      • index.html
      • main.js

  2. Запуск в каталоге проектаnpm initИнициализировать проект

  3. использоватьnpm i jquery --saveУстановите библиотеку классов jquery

  4. Создайте main.js и напишите логику кода каждой строки изменения цвета

    main.js

//导入jquery内库
import $ from 'jquery'

$(function(){
    $("li:odd").css('backgroundColor','red')
    $("li:even").css('backgroundColor','tomato')
})

  5. Ссылка на main.js непосредственно на странице сообщит об ошибке, потому что браузер не распознает импорт нового синтаксиса ES6 и долженОбработка с помощью Webpack, Webpack преобразует этот высокоуровневый синтаксис в синтаксис, который браузеры низкого уровня могут распознавать по умолчанию.

  6. бегатьwebpack 入口文件路径 输出文件路径Процесс main.js

    webpack ./src/main.js ./dist/bundle.js

  7. Внесите bundle.js в index.html вместо main.js.

2.2 Базовая конфигурация Webpack

Описание проблемы:

  • каждый разПосле изменения файлаобеиспользоватьwebpack 入口文件路径 输出文件路径Чтобы обработать файл, используйте его для сравнениягромоздкий

Ожидайте достижения:

  • Введите команду webpack прямо в консоли, вы можете автоматически завершить обработку файла

Реализация

  • в корневом каталоге проектаДобавьте файл конфигурации Webpack webpack.config.js
    • Внутри конфигурационного файла WebpackНастройка входных и выходных файлов для обработки
    • После завершения настройки вы можете использовать команду webpack для обработки файла в консоли отладки.
const path = require('path')


module.exports = {
    entry:path.join(__dirname,'./src/main.js'),

    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    }
}

3. Использование webpack-dev-сервера

3.1 Внедрение автоматической упаковки и компиляции

Описание проблемы: Каждый раз при изменении кода его нужно выполнять вручнуюwebpackКоманда для упаковки и компиляции файлов, что громоздко

Цель: каждый раз, когда мы меняем код, мы можем автоматически упаковать и скомпилировать его после того, как нажмем «Сохранить».

  1. Установитьwebpack-dev-server

    • -D записать зависимости плагина в зависимости разработки
    npm install webpack-dev-server -D

  2. существуетpackage.jsonвнутриscriptsдобавить в свойстваwebpack-dev-serverкоманда в среду разработки

    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },

  3. Установите webpack локально, webpack-dev-server хочет работать в локальном проекте, вы также должны установить webpack в проекте

    npm install webpack -D

  4. воплощать в жизньnpm run devкоманда, она вернется следующим образом

  1. На четвертом шаге мы видим, что сгенерированный webpack-dev-сервером файл bundle.js запускается в корневом каталоге проекта, этот файл не хранится на физическом диске, а размещается в памяти компьютера, поэтому мы можем вообще не вижу его в проекте. к этому файлу bundle.js, но мы можем обратиться к этому файлу, изменив путь ссылки bundle.js в index.html на корневой путь проекта

    <script src="/bundle.js"></script>

  2. Это можно считатьwebpack-dev-serverУпакованный файл размещается в корневом каталоге проекта в виртуальном виде, хотя мы его и не видим, но его можно рассмотреть иdist，src，nodemodule, уровень, есть невидимый файл с именемbundle.js

Уведомление:

  • При прерывании процесса установки необходимо удалить папку node-modules и повторно выполнить npm install для загрузки зависимостей, иначе будет сообщено об ошибке
  • После окончательного выполнения npm run dev он начнет автоматически отслеживать наши изменения, и каждый раз, когда изменения сохраняются, будет запускаться автоматическая упаковка и компиляция.

3.2 Дополнительные параметры

webpack-dev-serverПомимо помощи в реализации функции автоматической компиляции и упаковки, вы также можете добавитьДополнительные параметры помогают нам реализовать более мощные функции

Способ 1 (рекомендуемый):

  • Открывать браузер автоматически после запуска проекта:--open
  • Укажите номер порта проекта:--port 3000
  • Укажите главную страницу после запуска проекта:--contentBase src
  • Чтобы указать горячую загрузку:--hot
    • Перед ненагретой загрузкой каждая модификация будет генерировать новый bundle.js
    • После добавления горячей загрузки bundle.js будет каждый раз обновляться на исходной основе для повышения эффективности.
//package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  },

Метод 2 (вы можете понять это):

//webpack.config.js

const webpack = require('webpack')	//引入Webpack，启用热更新的第2步

devServer:{     //设置dev-server命令参数的第二种形式，相对麻烦一些
        open:true,
        port:3000,
        contentBase:'src',
        hot:true    // 启用热更新的第一步
    },
    plugins:[       //配置插件的节点，热更新的第2步
        new webpack.HotModuleReplacementPlugin()    //new 一个热更新的模块对象，这是启用热更新的第3步
    ]

3.3 плагин html-webpack-plugin

Роль плагина:

  • В памяти плагины, генерирующие HTML-страницы
  • Вставьте упакованный bundle.js на страницу, нам не нужно вручную импортировать bundle.js

Использование плагина:

  1. Установите плагин html-webpack-plugin

    npm i html-webpack-plugin -D

  2. Добавьте плагин в файл webpack.config.js

    • Настроить страницу шаблона, то есть сгенерировать страницу в памяти на основе страницы шаблона
    • Указывает имя сгенерированной страницы
    //webpack.config.js

const htmlWebpackPlugin = require('html-webpack-plugin')

plugins:[ 
        new htmlWebpackPlugin({     //创建一个在内存中生成html页面的插件
            template:path.join(__dirname,'./src/index.html'),//指定模版页面，将来会根据指定的页面路径，去生成内存中的页面
            filename:'index.html'
        })
    ]

Фактический дисплей:

Расширение: -S, -D, -g описание

npm install module_name -SТо есть npm install module_name –save записывает зависимости

npm install module_name -Dто есть npm install имя_модуля --save-dev пишет devDependencies

npm install module_name -gГлобальная установка (использование командной строки)

npm install module_nameЛокальная установка (поместите установочный пакет в ./node_modules)

В чем разница между зависимостями и devDependencies?

  • Плагины в devDependencies используются только в среде разработки, а не в производственной среде.
  • зависимости должны быть выпущены в производственную среду

4. Использование загрузчика

Примечание. По умолчанию Webpack может упаковывать и обрабатывать только файлы типа Js и не может обрабатывать другие файлы, отличные от типа Js.

Если мы хотим обрабатывать файлы типа NO-JS, нам нужно вручную установить некоторые подходящие сторонние погрузчики

4.1 Загрузчик обрабатывает таблицы стилей

  1. Упаковка CSS-файлов: установите style-loader css-loader

    npm i style-loader css-loader -D

  2. существуетwebpack.config.jsдобавлено в файл конфигурацииmoduleобъект узла, в этомmoduleНа объекте имеетсяrulesМассив атрибутов, в этом массиве хранятся все правила сопоставления и обработки сторонних файлов

    module:{        //这个节点，用来配置所有第三方模块加载器
        rules:[     //配置第三方模块的匹配规则
            {test:/\.css$/,use:['style-loader','css-loader']}   //配置处理 .css文件的第三方loader规则
        ]
    }

  3. Вставьте файл CSS в файл входа main.js, чтобы успешно его использовать.

    import './css/index.css'

4.2 Загрузчик обрабатывает URL-адрес

Описание проблемы:

  • по умолчанию,Webpackне могу справитьсяCSSURL-адрес в файле, будь то изображение или библиотека шрифтов, пока это URL-адрес, он не может быть обработан

Решение:

  • установивurl-loader file-loaderПлагины для обработки URL

    npm i url-loader file-loader -D

Шаги для использования

  1. Установитьurl-loader file-loaderплагин

  2. существуетwebpack.config.jsПравила обработки для настройки URL-адресов в файле

    • Введение параметра
    • limit: размер изображения в байтах, если указанное изображение больше заданного предельного значения, оно не будет преобразовано вbase64Строка формата, если изображение меньше заданного предельного значения, оно будет преобразовано вbase64Нить
    • имя: Установите имя пути, указанное в URL-адресе. По умолчанию он будет называться после хеш-значения (для предотвращения дублирования имен). Тот же эффект может быть достигнут с помощью хэш-значения исходного имени головоломки следующим образом, и узнаваемость выше.
    //URL图片路径的匹配规则
{test:/\.(jpg|jepg|png|gif)$/,use:'url-loader?limit=1000&name=[hash:8]-[name].[ext]'},
//字体图标的匹配规则
{test:/\.(eot|svg|woff|woff2|ttf)$/,use:'url-loader'}

4.3 Расширение: процесс Webpack для обработки сторонних типов файлов

  1. Сначала проверьте тип файла, если это файл js, упакуйте его напрямую.
  2. Если это не файл js, получите имя суффикса и перейдите в webpack.config.js, чтобы найти соответствующие правила соответствия.
  3. Если найдено, вызовите пакет правил, иначе сообщите об ошибке
  4. Массив правил использования вызывается справа налево, и результат обработки более позднего вызова будет передан предыдущему правилу для продолжения обработки.
  5. После завершения вызова результат обработки будет напрямую передан в Webpack для упаковки и слияния и, наконец, выведен в bundle.js.

Пример:

  • использовать сначалаcss-loaderПлагин обрабатывает и передает результаты обработкиstyle-loaderпродолжить обработку
 module: { 
    rules: [ 
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }
    ]
  }

4.4 Резюме

  • из-заWebpackПо умолчанию только обработка пакетовJsтип файла, который не может обрабатывать другие не-Jsтипа файла, поэтому, если вы имеете дело с не-Jstype, нам нужно вручную установить какой-нибудь подходящий стороннийloaderЗагрузчик.

  • Способ установки и использования стороннего загрузчика следующий

    1. Установите соответствующий загрузчик в командной строке (учтите, что у общего загрузчика есть соответствующие зависимые модули, и зависимые модули тоже нужно установить, иначе программа запустится и сообщит об ошибке)
    2. После установки соответствующего загрузчика настройте соответствующие правила сопоставления в файле конфигурации Webpack.config.js.
    //添加module对象
//在module对象里面添加rules数组
//在rules数组里面添加相对应文件的匹配规则

module:{
    rules:[
        {test:/\.css$/,use:['style-loader','css-loader']}
    ]
}
    1. если зависимCSSили другие документы, все начинаются сimportПуть команды у входаjsимпортировать в файл

  • Выполните вышеуказанные шаги, чтобы успешно включить загрузчик

5. Использование Вавилона

существуетWebpack, только часть может быть обработана по умолчаниюES6синтаксис, некоторые более продвинутыеES6илиES7грамматика,WebpackЭто не может быть обработано. В настоящее время вам нужно использовать сторонний загрузчик, чтобы помочьWebpackОбработать эти высокоуровневые грамматики. Когда сторонний загрузчик преобразует высокоуровневую грамматику в низкоуровневую, он передает результатWebpackупаковать вbundle.jsсередина

Через Babel это может помочь нам преобразовать грамматику высокого уровня в грамматику низкого уровня.

5.1 Установка

  • В Webpack вы можете запустить следующие два набора команд, чтобы установить два набора пакетов для установки функций загрузчика, связанных с Babel.
    • Первый набор пакетов (аналог конвертеров):cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
    • Второй набор пакетов (предоставляющий конверсионные отношения):cnpm i bebel-preset-env babel-preset-stage-0 -D

5.2 Конфигурация

  • В файле конфигурации Webpack.config.js добавьте новое правило сопоставления в массив правил под узлом модуля.

  • Уведомление:

    • При настройке правил загрузчика babel обязательно исключите каталог node_modules с помощью атрибута exclude.
    • Если node_modules не исключен, Babel упакует и скомпилирует все сторонние файлы Js в node_modules, что будет потреблять ресурсы ЦП и приведет к очень низкой скорости упаковки.
    • Даже если babel окончательно сконвертирует все js в node_modules, проект не запустится.
    {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}

  • В корневом каталоге проекта создайте новый файл с именем.babelrcКонфигурационный файл Babel

    • Этот файл конфигурации принадлежитjsonформат, надо смотретьJSONСпецификация синтаксиса, нельзя писать комментарии, строки должны использовать двойные кавычки
    • Файл конфигурации может ссылаться на плагины в двух установленных пакетах.
    • В первом мешочке лежитbabel-plugin-transfrom
    • Второй пакет содержитbabel-preset-env，babel-preset-stage-0 
    {
    "presets":["env","stage-0"],
    "plugins":["transform-runtime"]
}

  • После завершения приведенной выше настройки вы можете использовать синтаксис ES6 в своем проекте, вы можете написать класс Class, установить статические свойства и распечатать их для тестирования.

6. Использование Vue в Webpack

Традиционное использование Vue

  1. Введите файл vue.js через тег скрипта.
  2. Объявите блок в теле и установите для него свойство id
  3. Создайте экземпляр виртуальной машины с помощью нового Vue() в теге скрипта.

6.1 Правила поиска пакетов

Когда мы используем команду import для импорта пакета в модуль, каковы его правила поиска?

  1. Узнайте, есть ли папка node_modules в каталоге проекта
  2. Найдите соответствующее имя пакета в папке node_modules.
  3. В файле конфигурации package.json найдите основной атрибут [основной атрибут указывает файл входа этого пакета при его загрузке]

Далее попробуем импортировать пакет vue и просмотреть соответствующий файл записи.

  • Установитьnpm i vue -D

  • импортный пакетimport Vue form 'vue'

  • Проверьте основное свойство в node_modules/vue/package.json, чтобы увидеть, какой это файл записи.

    "main": "dist/vue.runtime.common.js",

  • Вспомните внимательно, этот файл мы обычно импортируем? Очевидно, что нет, обычно мы импортируем файл vue.js, так почему же здесь все по-другому? Имея в виду этот вопрос, мы продолжаем

6.2 Попробуйте использовать Vue с веб-пакетом

Ниже приведены некоторые простые шаблоны кода, которые объясняются здесь с кодом без конкретных пояснений.

//main.js 入口文件

//此处导入的是 vue.runtime.common.js
import Vue from 'vue'

var login = {
    template:`<h1>Login success</h1>`
}

var vm = new Vue({
    el:'#app',
    data () {
        return {
            msg:'hello'
        }
    },
     components:{
         login
     }
})

//index.html

<body>
    <div id="app">
        <p>{{msg}}</p>
        <login></login>
    </div>
</body>

запустить и посмотреть результаты

  • Обнаружил следующую ошибку
  • Вы используете версию Vue только для выполнения, где компилятор шаблонов недоступен. Предварительно скомпилируйте шаблоны в функции рендеринга или используйте сборку, включающую компилятор.

Анализ ошибок

  • Вышеупомянутая ошибка говорит нам, что мы используем версию среды выполнения vue (т.е. vue.runtime.common.js, которую мы видели в начале), и компилятор недоступен.
  • Предусмотрено два обходных пути
    1. Предварительно скомпилируйте шаблон в функцию рендеринга (используйте функцию рендеринга для рендеринга шаблона)
    2. Используйте сборку, включающую компилятор (т. е. полный файл vue.js).

6.3 Решение 1

Предварительно скомпилируйте шаблон в функцию рендеринга (используйте функцию рендеринга для рендеринга шаблона)

Подробнее об использовании функций рендеринга см. здесь:Использование функции рендеринга

Попробовав, выяснилось, что запись компонентов в файл ввода не может достичь цели, поэтому мы извлекаем шаблон vue и создаем шаблон через файл vue.

  1. Создайте файл login.vue

    <template>
	<div>
        <h1>
            这是通过 vue 文件创建的模版
    	</h1>
    </div>
</template>
<script>
    
</script>
<style>

</style>

  2. Установите плагин, загружающий файл .vue, и настройте webpack.config.js.

    cnpm i vue-loader vue-template-compiler -D

    //webpack.config.js

const vueLoaderPlugin =require('vue-loader/lib/plugin')

 plugins:[
        new vueLoaderPlugin()
    ],
 module:{   
     rules:[
          {test:/\.vue$/,use:'vue-loader'},       //处理.vue文件
     ]         
 },

  3. Введите login.vue в файл ввода и используйте функцию рендеринга для рендеринга.

    import Vue from 'vue'

import login from './login.vue'

var vm = new Vue({
    el:'#app',
    data () {
        return {
            msg:'hello'
        }
    },
    // render:function(createElement){
    //     return createElement(login)
    // },
    //简写
   render:c => c(login)
})

  4. Запустите его снова и обнаружите, что он работает успешно

6.4 Решение 2

со сборкой, включающей компилятор (т. е. полный файл vue.js)

Измените исходный импортированный файл vue.runtime.common.js и измените импортированный пакет на vue.js.

  • Есть несколько способов изменить путь импорта vue.js (рекомендуется третий способ)
  1. Измените основное свойство папки package.json vue в node_modules и укажите его как vue.js
  2. При импорте измените путь импорта наimport Vue from '../node_modules/vue/dist/vue.js'
  3. Или следуйте оригинальному методу введенияimport Vue form 'vue', но вам нужно добавить следующую конфигурацию в файл webpack.config.js
resolve:{
        alias:{
            "vue$":"vue/dist/vue.js"
        }
    }
  • После выполнения вышеуказанных настроек проект может нормально работать

6.5 Резюме

  • Использование Vue с Webpack
    1. Установите пакет Vue:npm i vue -S
    2. Так как в Webpack для определения компонентов рекомендуется использовать шаблон компонента .vue, поэтому вам необходимо установить загрузчик, который может разобрать этот файл:npm i vue-loader vue-template-complier -D
    3. Импортируйте модуль Vue в main.js:Import Vue from 'vue'
    4. Определите компонент файла, оканчивающийся на .vue, файл состоит из трех частей, шаблона, сценария, стиля
    5. использовать в main.jsImport login from './login.vue'команда для импорта этого компонента
    6. Создайте экземпляр виртуальной машины, и функция рендеринга используется в экземпляре виртуальной машины для рендеринга страницы.
    7. Создайте элемент div с идентификатором приложения на странице в качестве области, которой будет управлять виртуальная машина.

7. Использование Vue-Router в Webpack

7.1 Основное использование

  1. Установите модуль зависимостей vue-router

    npm i vue -S
npm i vue-router -S

  2. Добавьте модули Vue и vue-router в main.js и явно вызовите vue-router.

    import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

  3. Создайте файл шаблона главной страницы App.vue в каталоге src.

    <template>
    <div>
        <h1>APP组件</h1>
    </div>
</template>

<script>
export default {


}
</script>

<style>

</style>

  4. Создайте атрибут id в индексном файле, равныйappэлемент div

  5. существуетsrcСоздайте новую папку в каталоге и создайте новую папку во вновь созданной папкеlogin.vueа такжеregister.vueдокумент

  6. Будуlogin.vueа такжеregister.vueкомпоненты, применяемые кappШаблон домашней страницы выше

    <template>
    <div>
        <h1>APP组件</h1>
        <router-link to='/login'>Login</router-link>
        <router-link to='/register'>Register</router-link>

        <router-view></router-view>
    </div>
</template>

<script>
export default {


}
</script>

<style>

</style>

  7. существуетmain.jsНастройте маршрут в файле, создайтеVMэкземпляр, креплениеapp

    import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import app from './App.vue'
import login from './comp1/login.vue'
import register from './comp1/register.vue'

var router = new VueRouter({
    routes:[
        {path:'/login',component:login},
        {path:'/register',component:register}
    ]
})

var vm = new Vue({
    el:'#app',
    render: c => c(app),
    router
})

  8. После завершения вышеуказанной настройки запустите проект

7.2 Вложение маршрутов

Использование вложенности маршрутов в Webpack в основном похоже на использование вложенности маршрутов в Vue.

  1. Исходя из базового использования маршрутизации, создайте две новые учетные записи компонентов, деньги

  2. Добавьте эти два компонента в компонент входа в систему и добавьте контейнер

    <template>
    <div>
        <h1>Login success</h1>

        <router-link to='/login/account'>Account</router-link>
        <router-link to='/login/money'>Money</router-link>

        <router-view></router-view>
    </div>
</template>

  3. Добавьте атрибут Children к логину в конфигурации маршрутизации и настройте маршрутизацию аккаунта и денег.

    var router = new VueRouter({
    routes:[
        {path:'/login',component:login,children:[
            {path:'account',component:account},
            {path:'money',component:money},
        ]},
        {path:'/register',component:register}
    ]
})

7.3 Извлечение модуля маршрутизации

Чтобы избежать слишком большого содержания в файле входа main.js, мы рекомендуем использовать метод извлечения маршрута, чтобы создать отдельную папку для маршрутизатора.

  • Создайте router.js в каталоге src

    import VueRouter from 'vue-router'

import login from './comp1/login.vue'
import register from './comp1/register.vue'
import account from './comp2/account.vue'
import money from './comp2/money.vue'

var router = new VueRouter({
    routes:[
        {path:'/login',component:login,children:[
            {path:'account',component:account},
            {path:'money',component:money},
        ]},
        {path:'/register',component:register}
    ]
})

export default router

  • В файле ввода main.js введите router.js, чтобы открыть объект маршрутизатора и подключить его к приложению.

    import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import app from './App.vue'
import router from './router.js'

var vm = new Vue({
    el:'#app',
    render: c => c(app),
    router
})

7.4 Атрибут языка тега стиля и атрибут области действия в компоненте

свойство области действия:

  • В файле .vue вы можете установить стиль компонента через тег стиля, но по умолчанию заданный стиль будет отображаться в глобальном
  • Добавив атрибут scoped в тег стиля, вы можете управлять стилем, чтобы он действовал только в этом компоненте (рекомендуется)

атрибут языка:

  • В файле .vue по умолчанию может использоваться только обычный синтаксис стиля css.Если вы хотите использовать стиль синтаксиса scss или меньше, вам необходимо установить атрибут lang для тега стиля и указать конкретный синтаксис использования.

    <style lang='less'>

</style>

...продолжение следует постоянно обновлять

Категории