Учиться непросто, я написал входной проект с vue — Zhihu Daily

Zhihu Daily, разработанный с использованием Vue. Стиль в основном относится к версии Zhihu Daily для Android (номер версии 2.6.6). Этот проект больше подходит для начинающих, чтобы обращаться и учиться, Бог может дать указатели

Я изучал vue, читал документы, читал блоги и писал небольшие примеры, но, тщательно обдумав это, мне все еще нужен проект, чтобы укрепить мое мастерство в vue. Проект не очень большой, очень подходит для практики и тестирования, есть хороший API для анализа, так что можно не волноваться о получении данных (￣▽￣)~*

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

гитхаб-адресvue-zhihu-daily

утверждение

Все тексты, изображения и другие рукописи этого проекта предоставленыЗнай почтиДействия по предоставлению, получению и обмену могут быть заподозрены в нарушении прав и интересов Zhihu. Если мне скажут прекратить делиться и использовать, я со временем удалю весь проект. Пожалуйста, поймите соответствующую ситуацию и соблюдайте соглашение Чжиху.

Спасибо

izzyleungорганизованныйЕжедневный API-анализ Zhihu

cccybизvue-zhihu-daily

Настройка сборки (в шаблоне vue-cli, не изменено, лениво)

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

Рекомендуется использовать режим отладки мобильного телефона Chrome, чтобы открыть

стек технологий

• vue-cliЛеса, используемые для создания структуры проекта, базовая конфигурация была сделана за нас, а некоторые дополнительные требования могут быть настроены отдельно
• vue+vue-router+vuexКонечно, недостатка в ведрах для всей семьи нет.
• В проекте используется множество плагинов:lib-flexible(адаптировано для мобильного терминала),vue-awesome-swiper(карусель),better-scroll(плагин прокрутки),axios(рекомендовано самим Ю Да),moment(форматированное время),mint-ui(На самом деле я использовал тост-компонент 0.0)

Основная часть структуры проекта

• build: Много, много, много конфигураций webpack. Основные модификации:build/utils.jsнастроен вpx2rem-loader
• config: Какая конфигурация в проекте. Основные модификации:config/index.jsСредняя конфигурацияproxyTableапи прокси.
• src: Основное место для написания кода.
  • активы: статические ресурсы, я в основном ставлю иконки
  • компоненты: общие компоненты
  • маршрутизатор: маршрут (прилагаетсяофициальная документация)
  • store: управление состоянием, куда записывается vuex (прилагаетсяофициальная документация)
  • стили: файл стилей
  • utils: некоторые общие методы, используемые в проекте
  • представления: просмотр компонентов
• static: статические файлы. а такжеsrc/assetsЕсть разница, в документе сказано, что файлы в этой папке будут скопированы напрямую при упаковке, аsrc/assetsФайлы ниже будут обработаны webpack, эммммммммм, эх. Или посмотрите документацию:Handling Static Assets

снимок экрана

Некоторые очки знаний записали (некоторые не записали, то есть забыли ==)

1. Создайте проект с vue-cli

Некоторые тесты не требуются, все остальные по умолчанию

2. Используйте lib-flexible для адаптации к мобильным терминалам

Официал предположил, что от решения lib-flexible можно отказаться (но я просто хочу его использовать), за подробностями можно перейти в эту статью:Используйте гибкий инструмент для реализации терминальной адаптации страниц Hand Tao H5..
Текущая рекомендация — использовать окно просмотра вместо этого решения.Если вы хотите использовать его, вы можете медленно изучить эти две статьи:Поговорим об адаптации мобильных страница такжеКак использовать vw в проекте Vue для мобильной адаптации

Зашли слишком далеко, давайте посмотрим, как это используется в этом проекте. После установки lib-flexible он вводится в main.js, и в это время можно использовать модуль rem. Затем установите px2rem-loader, чтобы можно было напрямую писать px юниты.После установки нужно настроить его в build/utils.Есть метод cssLoaders, и добавить в него переменную, вот так:

const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 75,
    remPrecision: 8
  }
}

И в функции generateLoaders измените исходную переменную загрузчиков

const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader, px2remLoader]

3. Написать SCSS прямо в стиле

Эта проблема долго мучилась в начале.На самом деле она очень проста.После установки двух зависимостей node-sass и sass-loader делать нечего. В документации говорится:Pre-Processors

4. Настройте прокси-сервер API во время разработки для достижения междоменного взаимодействия, измените config/index.js, найдите таблицу proxyTable и измените:

proxyTable: {
  '/api': {
    target: 'https://news-at.zhihu.com',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/api'
    }
  }
}

• Ссылаться наИспользуйте vue-cli+axios для настройки прокси для междоменного доступа к данным.
  
• Это также объясняется в документации по шаблону vue-cli.API Proxying During Development

5. URL-адрес изображения, полученный с помощью axios, помещается непосредственно в атрибут src для img, и возникает ошибка 403.

Решение[Внешний интерфейс] Решить проблему доступа к картинкам API 403 запрещенный доступ

6. Когда vue-awesome-swiper использует v-for для рендеринга данных, установка loop:true не имеет никакого эффекта.

Обходной путь: добавьте v-if="xxx.length > 0" к родительскому элементу. Ответ здесь{ loop: true } swiper-slide goes wrong when data is from v-for

7. Возврат без обновления, схема прямого обновления

Предварительно реализованные возвраты не обновляются, поэтому используется . На данный момент обратка действительно не обновляется, но есть новая проблема.При изменении параметров роутинга форвард не будет обновляться ==. (Вы можете сначала посмотретьОфициальная документация Vue RouterРеагирование на изменения параметров и средства навигации при динамическом сопоставлении маршрутов). Для решения обратитесь к этой статье:Другой способ: одностраничный vue, мультимаршрутизация, обновление вперед, назад без обновления

8. Как работает упаковка проекта

После того, как проект запакован, консоль предлагает следующее: если вы мне не верите, вы можете перейти непосредственно к файлу и открыть index.html, чтобы попробовать (я уже пробовал 0.0).

Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.

Так что вам тоже нужно использовать плагин http-server, подробности можно посмотреть здесьИспользуйте http-сервер для тестирования упакованного проекта vue-cli. Будут некоторые проблемы при работе с этим плагином, о котором также упоминается в статье, особо нечего сказать.

Суммировать

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