Vue CLI – это система для быстрой разработки и создания прототипов Vue.js. Она состоит из различных компонентов. В этой шпаргалке рассмотрены установка и создание проекта на VueJS.
Git Vue CLI, переключаемся на ветку master.
Для установки Vue CLI воспользуемся командой npm "npm install -g @vue/cli". Устанавливаем его глобально.
Теперь, что бы развернуть проект на Vue CLI 2 версии нам нужно:
- Открыть WindowsPowerShell от Администратора.
- Запустить команду "Set-ExecutionPolicy RemoteSigned -Scope CurrentUser".
- Ответить Y.
- Установить глобально дополнительный плагин "npm install -g @vue/cli-init".
- Создать папку проекта, из консоли перейти в нее, и инициализировать при помощи команды "vue init webpack my-project".
Здесь мы можем использовать несколько шаблонов Vue CLI:
- После инициализации проекта отвечаем на вопросы про имя проекта, его описания и т.п.
- Выполняем команду "cd vue-project", "npm install".
- Для запуска проекта выполняем команду "npm run dev".
Открываем в редакторе App.vue и редактируем его в такой вид:
Пример
<template>
<h1> {{msg}} </h1>
</template>
<script>
export default {
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style></style>
Этими действиями мы инициализировали проект и подготовили его к разработке.
Что бы развернуть проект на Vue CLI 3 версии нам нужно:
- Открыть WindowsPowerShell в той папке где мы будем создавать проект.
- Запускаем команду "vue create name-project".
- Переходим на "Manually select features".
- Выбираем "Babel", "Router", "Vuex", "Linter" отключаем.
- Выбираем версию VueJS 3.
- "Use history mode for router?" отвечаем "y"
- "Where do you prefer placing" выбираем "In package.json".
- На вопрос "Save this as a preset for future projects?" отвечаем "n"
- Установка началась, ждем окончания.
Базовый шаблон нашего приложения готов, можно начинать с ним работать.
Желательно для работы мы приведем в порядок наш index.html проекта, который находится в папке "public", сделаем eго таким:
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Project Name</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
- Воспользуемся командой "cd name-project" для перемещения в консоли в папку проекта.
- Запустим "npm run serve" и в консоли у нас появятся ссылки для открытия нашего проекта.