Помните практический опыт спа с несколькими вкладками на основе Vue

внешний интерфейс Vue.js NPM vue-router

предисловие

Недавно я получил такой запрос на создание общей страницы фонового фреймворка на основе vue и element-ui Конкретные требования следующие:

  1. Он требует высокой универсальности и должен использоваться более чем в 40 подпроектах на более позднем этапе, поэтому большинство мест можно настраивать.
  2. Он должен быть в виде строительных лесов, его можно установить с помощью npm.
  3. Требуется реализовать несколько вкладок, и несколько вкладок могут отображаться через URL-адрес браузера. Кроме того, на вкладках необходимо вести запись истории, и вы можете вернуться
  4. Компонент требует асинхронной загрузки, что сокращает время загрузки первого экрана.

Очевидно, это类 ERPПрименение Учащиеся, которые работали в фоновом режиме с JSP и т. д., должны быть знакомы с многостраничными вкладками.

Тогда поговорим о реализации.

Высокая универсальность

На самом деле это не сложно, просто немного хлопотно, извлеките все данные и поместите их вconfigВнутри файла.Затем импортируйте его в страницу фреймворка и привяжите на соответствующую позицию.Здесь есть сложная проблема,то есть если привязать все данные слипа к данным vue,из-за большого количества data, Это приведет к проблемам с производительностью. Если это разделить, это сделает файл конфигурации относительно сложным и увеличит стоимость обучения для последующих пользователей. Это зависит от конкретных требований проекта.Поскольку мои требования к производительности внешнего интерфейса пока не так высоки, я временно использую решение, которое полностью привязано к данным.

в виде эшафота

Сначала требование продукта для этого было сделано в виде компонента, а потом был выпущен пакет npm, чтобы когда будет удобно для последующих обновлений просто обновить npm.Кроме того, есть много настраиваемых элементов, и различных должны быть реализованы такие соображения, как многостраничные вкладки вкладок.Наконец, выбрано решение для формирования шаблонов, даже если последующее обновление будет немного более хлопотным (первоначальное решение состоит в том, чтобы поместить страницу фрейма в папку, а затем в Когда папка заменяется напрямую), но лучше поддерживать, чем компонент, а обновленный скаффолд можно написать потом, ведь стоимость публикации npm-инструмента слишком мала.

В первый раз, когда я разработал скаффолдинг, я прочитал много сообщений от сообщества и обнаружил, что большинство скаффолдингов обычно основаны на двух формах: одна на основе копирования файлов, а другая на основе git-clone.После сравнения я думаю, что файл копировать немного сложно.На самом деле мне просто нужен инструмент, который можно установить одним щелчком мыши, поэтому форма git-clone мне больше подходит.

Ниже приведен код строительных лесов.Хотя это всего лишь пятьдесят или шестьдесят простых строк кода, мне потребовалось целое утро, чтобы проверить данные и отправиться в яму.

#!/usr/bin/env node
const shell = require('shelljs');
const program = require('commander');
const inquirer = require('inquirer');
const ora = require('ora');
const fs = require('fs');
const path = require('path');
const spinner = ora();
const gitClone = require('git-clone')
const chalk = require('chalk')


program
	.version('1.0.0', '-v, --version')
	.parse(process.argv);

const questions = [{
  type: 'input',
  name: 'name',
  message: '请输入项目名称',
  default: 'my-project',
  validate: (name)=>{
    if(/^[a-z]+/.test(name)){
      return true;
    }else{
      return '项目名称必须以小写字母开头';
    }
  }
}]

inquirer.prompt(questions).then((dir)=>{
  downloadTemplate(dir.name);
})

function downloadTemplate(dir){

  //  判断目录是否已存在
  let isHasDir = fs.existsSync(path.resolve(dir));
  if(isHasDir){
    spinner.fail('当前目录已存在!');
    return false;
  }
  spinner.start(`您选择的目录是: ${chalk.red(dir)}, 数据加载中,请稍后...`);

  // 克隆 模板文件
  gitClone(`https://github.com/noahlam/vue-multi-tab.git`, dir , null, function(err) {
    // 移除无用的文件
    shell.rm('-rf', `${dir}/.git`)
	  spinner.succeed('项目初始化成功!')
    // 运行常用命令
    shell.cd(dir)
	  spinner.start(`正在帮您安装依赖...`);
    shell.exec('npm i')
	  spinner.succeed('依赖安装成功!')
    shell.exec('npm run dev')
  })
}

Если у вас есть вопросы или интерес к этим лесам, вы можете напрямую получить доступ к коду на github.tab-cli

Реализовать несколько вкладок

Если вы хотите получить несколько вкладок, то vue-router в принципе бесполезен, почему? vue-router переключает один компонент в соответствии с URL-адресом, а вкладка должна иметь несколько подкомпонентов внутри компонента одновременно, поэтому маршрутизация некомпетентна (по крайней мере, я так думаю, если у вас есть лучшее решение, пожалуйста, не стесняйтесь, просветите меня).

Отображение нескольких вкладок на самом деле не сложно, элемент имеет уже готовый компонент вкладок, так что старичок челнок написать код, засучив рукава и сделать, написать на ура, а написав тест, нет проблем, это действительно не нужно Слишком просто, киньте на превью продукта:

  1. Скопируйте адрес браузера и вставьте его в другое место, вкладка не может быть правильно отображена
  2. Вам нужно прыгать во вкладку, и вы должны иметь возможность вернуться.

Первый вопрос относительно прост, напишите вопрос на основе хеша самостоятельно.伪路由Поместите идентификатор текущей вкладки в URL-адрес и при эхо откройте соответствующую вкладку в соответствии с URL-адресом.

Совет: О том, как реализовать маршрутизацию, см. в другом моем блоге.Самостоятельная реализация интерфейсной маршрутизации

Второй вопрос, наверное, в центре внимания этой статьи.Вот подробное описание требований.Каждая вкладка может быть внутри вкладки.跳转, Прыжок здесь в основном такой же, как и у vue-router, он должен иметь возможность проталкивать, заменять, возвращать и принимать параметры.

Итак, как этого добиться? Сначала вести список открытых вкладок, а затем вести список используемых компонентов (включая параметры) в каждом списке.Возможно ли это? Конечно нет. Пользователь не может реализовать эти методы для прыжков компонентов и передачи параметров. Я предпочитаю инкапсулировать публичный объект и монтировать его на vue.prototype. Тогда что-то вроде vue.router.xxxx 一样(我的命名是 vue.tab) можно использовать в любом месте страницы. Если вас интересует конкретный метод реализации, щелкните ссылку в конце этой статьи и перейдите в мой репозиторий Github, чтобы просмотреть его.

Компоненты загружаются асинхронно

Раньше я использовал только метод асинхронной загрузки на основе vue-router, но в этом проекте vue-router не используется, как это асинхронно? Я полистал официальную документацию vue и написал следующее:

Vue.component(
  'async-webpack-example',
  // 这个 `import` 函数会返回一个 `Promise` 对象。
  () => import('./my-async-component')
)

Однако я попробовал и обнаружил, что сообщается об ошибке. Импорт нельзя использовать здесь, и его нельзя использовать с требованием. Я не знаю, где я не понял это правильно. Если вы знаете и вы оказались свободны, пожалуйста, дайте мне знать, спасибо! См. далее в разделе segmentfaultВот этот, может быть достигнуто с помощью веб-пакета require.ensure

// 第一个字符串是 组件名，第二个是 组件路径，第三个是 chunkName (如果不指定则以1.js,2.js....n.js命名)
vue.component('home', (resolve) => {require.ensure([], ()=>resolve(require('@/Views/index.vue')), 'home')})

Кстати, вы должны настроить его ниже вывода внутри WebPack.chunkFilename: '[name].js',Конечно формат имени файла по запросу к вашему проекту, я здесь, чтобы нажать самый простой

заключительные замечания

Прежде всего, конечно, посвятить проектгитхаб-адреснемного

Далее следует адрес этой статьиСборник личных технических постов

Вышеуказанные пункты приветствуютсяstarа такжеfollow, и непроизвольноеissue

Категории