Месяц: Сентябрь 2018

Используя webpack разворачиваем приложение

vue init webpack frontend

устанавливаем зависимости и запускаем dev-server

cd frontend
npm install
npm run dev / npm start serve

(далее…)

1. Устанавливаем любым доступным способом NodeJS
2. Устанавливаем vue-cli

   sudo npm install -g vue-cli

3. С помощью vue-cli разворачиваем приложение:

   vue init webpack chat-vue

4. Переходим в созданую дирректорию с проектом vuejs и запускаем dev server

   cd chat-vue
   npm run dev

Основные файлы

yury@Air:~/Desktop/MyDevApp/WormsChat/chat-vue$ tree -L 1
.
├── README.md
├── build                       # Настройки билда проекта. Dev и Prod версии
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config                       # Конфигурационные файлы. Настройки
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── index.html                   # Отправной файл всего проекта. Инициализация проекта в div="app"
├── node_modules                 # Тоже самое, что site-packeges в Django
│   ├── ...
├── package-lock.json
├── package.json
├── src                         # Содержит тот проект, который будем писать
│   ├── App.vue                 # Главный компонент, который запускает весь проект
│   ├── assets                  # Дополнительные файлы: css, img, fonts 
│   │   └── logo.png
│   ├── components              # Каждый компонент отвечает за какую то свою логику. Чем то похожи на app в Django
│   │   └── HelloWorld.vue
│   ├── main.js                 # Управляющий файл всем проектом
│   └── router                  # Содержит файл url дл проекта
│       └── index.js
└── static
├── .editconfig                 # Настройки проекта
├── packege.json                # Описание проекта. Установленные пакеты для Dev and Project