#vue-vueRouter-webpack

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

Уроки

Вы можете перейти по следующим ссылкам, чтобы просмотреть серию уроков Vue + Webpack Разработка переиспользуемых одностраничных приложений (часть конфигураций) Vue + Webpack Разработка переиспользуемых одностраничных приложений (часть компонентов) Vue + Webpack Разработка переиспользуемых одностраничных приложений (часть приемов) Использование Vue + Webpack стандарты

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

│  .gitignore          # игнорируемые файлы, такие как node_modules
│  package.json        # конфигурация проекта
│  README.md           # описание проекта
│  index.html          # главная страница
│
├─webpack.base.config.js         # базовая конфигурация Webpack
├─webpack.dev.config.js          # конфигурация Webpack для разработки
├─webpack.prod.config.js         # конфигурация Webpack для производства
│
│
├─node_modules
│
├─dist                  # после сборки файлы будут автоматически помещены здесь
│
└─src
    ├─main.js            # конфигурация запуска
    │
    ├─router.js          # конфигурация маршрутов
    │
    ├─components         # компоненты
    │       │
    │       └─App.vue     #vue     # входной компонент, содержащий маршруты и общие части
     │
     ├─views              # представления (то есть маршруты)
     │
     ├─directives         # пользовательские директивы
     │
     ├─filters            # пользовательские фильтры
     │
     ├─config             # хранение некоторых конфигурационных файлов
     │
     ├─libs               # хранение некоторых функций-инструментов
     │
     ├─images             # хранение изображений
     │
     ├─styles             # хранение CSS
     │    │
     │    ├─common.css    # общий CSS
     │    │
     │    └─reset.css     # CSS для инициализации страницы
     │
     ├─fonts              # хранение шрифтов iconfont
     │
     │
     └─template           # хранение HTML-шаблонов, Webpack зависит от этого файла для создания необходимого HTML
          │
          │
          └─index.ejs     # основной HTML-шаблон
 

Описание

На данный момент все стили CSS (используемые @import и .vue внутренние стили) были выделены в отдельный файл main.css. Если вы хотите использовать пакетную загрузку, вы можете изменить конфигурацию Webpack.

vue: {
    loaders: {
        css: ExtractTextPlugin.extract(
            "style-loader",
            "css-loader?sourceMap",
            {
                publicPath: "./dist/"
            }
        )
    }
},
new ExtractTextPlugin("[name].css", {allChunks: true, resolve: ["modules"]})

Как использовать

Описание

В настоящее время папка dist с собранной версией и созданные Webpack файлы index.html и index_prod.html были добавлены в .gitignore. Если вам это не требуется, пожалуйста, измените это. На данный момент проект разделён на две среды — разработка и продакшн, каждая из которых использует свои конфигурационные файлы webpack.dev.config.js и webpack.prod.config.js соответственно. Вы можете настроить эти конфигурационные файлы в соответствии со своими требованиями, например, добавив конфигурацию для серого окружения. В текущий момент файлы разработки используют стандартные названия, а файлы продакшна используют названия с хэшами. Вы можете изменить эти названия в зависимости от ваших потребностей, но не рекомендуется менять названия локальных файлов на те, что содержат хэши. Шаблон входного HTML файла находится в src/template/index.ejs и может быть изменён.

Установка

// Убедитесь, что Node.js и npm установлены перед началом установки
// Необходимо установить webpack и webpack-dev-server глобально. Если они уже установлены, пропустите этот шаг.
npm install webpack -g
npm install webpack-dev-server -g
// После успешной установки запустите команду для установки зависимостей
npm install

Запуск

Разработка

// При первом запуске выполните следующую команду для создания входного HTML файла
npm run init
npm run dev
```#### Продакшн (построение)
```bash
npm run build

Доступ

Введите http://127.0.0.1:8080 в адресную строку браузера.

Обновление

2016. 10. 3

• Поддержка LESS и SASS была добавлена в пакет

2016. 9. 11

• Баг был исправлен при сборке в продакшн среде, связанный с ошибочной HTML структурой файла index_prod.html

2016. 8. 22

• Все файлы были переведены на ES2015
• Конфигурация маршрутов была вынесена в отдельный файл router.js
• Каталог routers был переименован в views
• Конфигурация Vue теперь поддерживает LESS и SASS по умолчанию