Warning: Use of undefined constant large - assumed 'large' (this will throw an Error in a future version of PHP) in /var/www/html/wp-content/themes/colormag-child/content-single.php on line 46
Экспресс создание нового проекта на Vue 2
Инструкция по сборке нового проекта на Vue 2 со всем необходимым набором компонентов для начала разработки JavaScript приложения по стандарту ES6. Готовый проект будет иметь готовую структуру каталогов, конфигураций и модулей. А также будет автоматически исправлять ошибки и форматировать ваш код под стандарт ES6. Итоговый проект будет состоять из:
- Vue 2 - фреймворк Vue
- Babel - транспиляция проекта из ES6 в ES5
- PWA Support - поддержка Progressive Web App
- Router - управление маршрутами приложения
- Vuex - управление состоянием приложения
- ESLint - поддержка ES6
- Prettier - форматирование кода и стилизация под стандарт ES6
- Stylus - поддержка CSS
Требования к окружению
Создание проекта
Встаем в директорию с проектами
cd C:\Develop
Экспресс установка одной командой
Указываем имя проекта и подготовленный однострочный пресет конфигурации. Имя проекта должно соответствовать стилю шашлычной нотации (kebab-case), т.е. быть написано в нижнем регистре и через дефис. В данном примере будет использоваться test-app
...
added 153 packages from 117 contributors in 15.267s
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project test-app.
...
Установка в интерактивном режиме
Если требуется произвести сборку проекта вручную, выполняем команду:
vue create test-app
Рекомендуемые настройки проекта:
- Please pick a preset: Manually select features
- Check the features needed for your project: Choose Vue version, Babel, PWA, Router, Vuex, CSS Pre-processors, Linter
- Choose a version of Vue.js that you want to start the project with 2.x
- Use history mode for router? (Requires proper server setup for index fallback in production) Yes
- Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
- Pick a linter / formatter config: Prettier
- Pick additional lint features: Lint on save, Lint and fix on commit
- Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
- Save this as a preset for future projects? No
Настройка проекта
Переходим в папку с проектом
cd test-app
Создаем файл vue.config.js, он внесет правки в Webpack, добавит автоматическое форматирование кода и исправление ошибок при сохранении файлов
module.exports = {
chainWebpack: config => {
config.module.rule('eslint').use('eslint-loader').options({
fix: true
})
}
}
Теперь проект содержит все необходимое к запуску
Запускаем проект
...
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.1.180:8080/
...
По указанному адресу можно наблюдать через браузер ваше Vue приложение