разработка и развертывание многостраничного проекта vue-cli + es6

внешний интерфейс Командная строка Vue.js Webpack

Некоторое время назад команда проекта планировала быстро разработать новый проект приложения.Сторона разработки приложения предоставляет оболочки и некоторые функции системного уровня.Все страницы заполнены h5, учитывая совместимость Android 4.1 и ios7.1. Совершенно новый проект, без исторического багажа, попробовал новую модель развития и принялwebpack + vue-cli + vue-router + es6 + axiosЭтот набор изwebpackКонфигурация в каталог файлов, от процесса разработки до онлайн-развертывания, нащупывая и пробуя, пока запущена первая версия. Мы продолжим оптимизацию позже и сначала запишем текущий базовый метод развертывания.

webpack -- ^3.6.0  |   vue -- ^2.5.2    | vue-router -- ^3.0.1  |    axios -- ^0.17.1

Введение

  • В проекте принято разделение фронтенда и бэкэнда, а бэкенд-разработка отвечает только за предоставление интерфейсов и статических серверов.
  • Внешний интерфейс использует метод нескольких входов и нескольких отдельных страниц (каждая отдельная страница может содержать vue-router для маршрутизации на разные подстраницы) и, наконец, генерирует несколько записей в разделе dist..htmlи соответствующий.js/.cssдокумент
  • Корневой каталог доменного имени указывает непосредственно наnpm run buildПосле сгенерированного каталога dist вы можете передатьhttp://m.example.com/index.htmlпрямой доступ кindex.html

Окончательный сгенерированный каталог dist выглядит так:

  • dist
    • index.html
    • center/
      • index.html
      • regist.html
      • login.html
    • static/
      • js/
        • vendor.[chunkhash].js
        • index.[chunkhash].js
        • regist.[chunkhash].js
        • login.[chunkhash].js
      • css/
        • index.[chunkhash].css
        • regist.[chunkhash].css
        • login.[chunkhash].css

пример:http://m.example.com/index.htmlможно посетить домашнюю страницу,http://m.example.com/center/regist.htmlзатем доступ к странице регистрации, иhttp://m.example.com/center/regist.html#agreementПосетите страницу Пользовательского соглашения

Структура каталогов

  • dist: как указано выше, не следуйте контролю версий
  • build: конфигурация, связанная со сборкой webpack
  • config: конфигурация, связанная с разработкой
    • webpack.user.conf.js: недавно созданный настраиваемый файл конфигурации, теоретически все изменения конфигурации в webpack вносятся здесь, а затемwebpack.dev.conf.jsа такжеwebpack.dev.prod.jsвыполнить покрытие слиянием
  • node_modules: плагины и зависимости, не следят за контролем версий
  • src: каталог разработки
    • активы: хранить статические ресурсы, в том числеbase.js/base.css/plugins/images
    • компоненты: некоторые виджеты, которые могут быть общими
    • запись: файл записи, упакованный веб-пакетом, существует несколькоHtmlWebpackPlugin, каждый экземпляр соответствует записи, и каждая запись упаковывает страницу
    • маршрутизатор: некоторые страницы могут использоватьvue-routerРеализовать интерфейсную маршрутизацию, которая единообразно определена в этой папке и будет импортироваться и использоваться записью js в записи.
    • шаблон: магазинHtmlWebpackPluginСтраница шаблона на основе пакета, несколько записей могут совместно использовать страницу шаблона. Однако в реальной разработке некоторые записи могут иметь приватную логику, и шаблоны необходимо создавать отдельно.
    • страница: хранить фактические компоненты страницы и собранные страницы
  • package.json: информация о пакете и зависимости

Пример: если мы хотим, наконец, сгенерироватьhttp://m.example.com/center/regist.htmlИ если он содержит интерфейсную маршрутизацию, необходимо задействовать следующие файлы:

1. src/entry/regist.js，以创建入口文件，供`HtmlWebpackPlugin`使用
2. config/webpack.user.conf.js，新建入口，指定入口文件为`src/entry/regist.js`；新建`HtmlWebpackPlugin`实例，指定打包后生成的文件路径、文件名及js
3. src/router/regist.js，因为涉及到前端路由，需要配置路由信息
4. page/center/regist.vue、page/center/agreement.vue，进行页面自身逻辑样式的开发

конфигурация веб-пакета

Конфигурация веб-пакета по умолчанию обычно используетbuild/webpack.base.js + build/webpack.dev.js/build/webpack.prod.jsРезультат после слияния, для облегчения унифицированной конфигурации создается новая под конфигомwebpack.user.conf.jsсоответственно иbuild/webpack.dev.js/build/webpack.prod.jsслияние, поэтому конфигурация страницы в основном вwebpack.user.conf.jsпровести.

  • элемент конфигурации
    • контекст: устанавливается в корневом каталоге, где находится package.json
    • запись: установить наsrc/entry/
    • вывод: производственная среда настроена на/src/dist/, среда разработки упакована и помещена в память по умолчанию, что не представляет фактический физический путь Конкретная конфигурация вывода:
    output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'static/js/[name].[chunkhash:16].js',
    chunkFilename: 'static/js/[id].[chunkhash:16].js',
    publicPath: '/pailifan/'
}
    • плагины: конфигурация плагина
      • HtmlWebpackPlugin: новые несколько экземпляров, каждый экземпляр соответствует одной странице.
      • CommonsChunkPlugin: извлеките и упакуйте общие модули, укажите пакет [vue.js -v2.5.2, vue-router.js -v3.0.1] по умолчанию и установите для minChunks значение Infinity, чтобы другие распространенные модули не были упакованы в
      new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',         /*在entry中指定vendor对应的模块为[vue.js,vue-router.js]*/
    filename: 'static/js/vendor.[chunkhash:16].js',
    minChunks: Infinity
})

Процесс разработки требований и развертывания

  1. вытащить код
  2. Перейдите в корневой каталог, где находится package.json, и выполнитеnpm i && npm run dev
  3. Создайте новую страницу (см. пример в разделе «Структура каталога») или измените ее.
  4. Код фиксации, игнорируя каталог, включаетsrc/dist,src/node_modules
  5. Внутреннее тестирование/внешнее тестирование/оттенки серого/производство, выполнениеnpm i && npm run build, производственная среда не может напрямую работать с каталогом dist (сборка npm run фактически удалит каталог dist перед его созданием, а прямая операция приведет к файлу 404 при публикации).
  6. Откат версии, код отката, затем выполнениеnpm i && npm run build, в соответствии с выпуском

Другие сторонние плагины и библиотеки

  • axios: библиотека ajax, некоторые ямки были объяснены и предложены решения в другой заметке
  • vue-touch: Библиотека жестов
  • es6-promise: Полифил обещания

Прикрепил:проект vue-cli + es6 + axios наступает на яму

Категории