vue-multi-page

参考UI框架

PC UI

• ivew

• Antd

• Muse-UI

Познакомившись с Vue, обычно начинают использовать Vue-cli для входа. Это фреймворк для создания SPA. Если посмотреть на его сборку проекта, можно увидеть, что все модули выводятся в один файл build.js. Иногда этот файл бывает очень большим, несколько мегабайт. Однако когда проект становится достаточно сложным, SPA, вероятно, больше не подходит для использования. Пользователи не могут загрузить сразу несколько мегабайт, особенно это касается мобильных пользователей. Возможно, пользователь только прочитал одну статью на сайте, и это также может привести к медленной загрузке страницы, что нежелательно. Поэтому сайт следует разделить на несколько модулей. Так появился этот demo (фреймворк для построения многостраничных приложений).

Как начать?

Предположим, вы уже знакомы с vue-cli 😄

1. Создайте проект:

   vue init webpack vue-multi-page
   # Для удобства можно не использовать jslint и т. д.

2. Начните переделывать:

   Самым важным шагом является переделка webpack для удовлетворения требований к нескольким страницам. Фактически, несколько страниц — это несколько точек входа в webpack. В этом шаге основным объектом операции является файл js в папке build.

   • Сначала измените utils.js: Добавьте метод getEntries, который использует модуль node globa, поэтому его необходимо импортировать:

     // glob модуль, используемый для чтения файлов в каталоге входа webpack
     var glob = require('glob');

     exports.getEntries = function (globPath) {
       var entries = {}
       /**
        * Чтение src каталога и обрезка пути
        */
       glob.sync(globPath).forEach(function (entry) {
         /**
          * path.basename извлекает часть пути после последнего '/' за исключением первого параметра, а остальные являются строками, которые необходимо отфильтровать
          * path.extname получает расширение файла
          */
         var basename = path.basename(entry, path.extname(entry), 'router.js') // Отфильтровать router.js
         // ***************begin***************
         // Конечно, вы также можете добавить имя модуля, то есть вывести следующее: { module/main: './src/module/index/main.js', module/test: './src/module/test/test.js' }
         // Окончательный скомпилированный выходной файл также находится в каталоге модуля, доступ к пути должен быть localhost:8080/module/index.html
         // slice возвращает выбранные элементы из существующего массива, -3 выбирает последние три
         // var tmp = entry.split('/').splice(-3)
         // var pathname = tmp.splice(0, 1) + '/' + basename; // splice(0, 1) берёт первый элемент массива tmp
         // console.log(pathname)
         // entries[pathname] = entry
         // ***************end***************
         entries[basename] = entry
       });
       // console.log(entries);
       // Получаем основной вход следующим образом: { main: './src/module/index/main.js', test: './src/module/test/test.js' }
       return entries;
     }

   • Затем измените webpack.base.conf.js:

     Удалите entry: {app: './src/main.js'}, и замените следующим:

     module.exports = {
     ···
     entry: utils.getEntries('./src/module/**/*.js'),
     ···
     }

   • Наконец, измените webpack.dev.conf.js и webpack.prod.conf.js:

     Удалите оригинальный HtmlWebpackPlugin:

     var pages = utils.getEntries('./src/module/**/*.html')
     for(var page in pages) {
       // Конфигурируем сгенерированный html-файл, определяем путь и т.д.
       var conf = {
         filename: page + '.html',
         template: pages[page], // Путь шаблона
         inject: true,
         // excludeChunks позволяет пропустить некоторые куски, а куски сообщают плагину, какие точки входа в entry использовать
         // Как лучше понять эту часть? Например, в этом демо есть два модуля (index и about), конечно, лучше всего, чтобы каждый модуль вводил свои собственные js,
         // Вместо того, чтобы вводить все js на каждой странице, вы можете удалить следующий excludeChunks, затем запустить npm run build, а затем посмотреть скомпилированные index.html и about.html, чтобы узнать
         // filter: фильтрует данные, а затем возвращает соответствующие данные, Object.keys получает ключи объекта JSON
         excludeChunks: Object.keys(pages).filter(item => {
           return (item != page)
         })
       }
       // Необходимо создать несколько html-файлов, настроить несколько объектов HtmlWebpackPlugin
       module.exports.plugins.push(new HtmlWebpackPlugin(conf))
     }

Этапы сборки

# Установить зависимости
npm install
# Локальное тестирование
npm run dev
# Упаковка
npm run build

После локальной отладки и запуска посетите: index (http://localhost:8888) | about (http://localhost:8888/about.html), чтобы проверить работу.