UdnlxPortfolio - Vue CLI and Webpack. Создание проекта на Vue

Vue CLI – это система для быстрой разработки и создания прототипов Vue.js. Она состоит из различных компонентов. В этой шпаргалке рассмотрены установка и создание проекта на VueJS.

Git Vue CLI, переключаемся на ветку master.

Сайт Vue CLI

Для установки Vue CLI воспользуемся командой npm "npm install -g @vue/cli". Устанавливаем его глобально.

Создание проекта на Vue CLI 2 версии

Теперь, что бы развернуть проект на Vue CLI 2 версии нам нужно:

- Открыть WindowsPowerShell от Администратора.

- Запустить команду "Set-ExecutionPolicy RemoteSigned -Scope CurrentUser".

- Ответить Y.

- Установить глобально дополнительный плагин "npm install -g @vue/cli-init".

- Создать папку проекта, из консоли перейти в нее, и инициализировать при помощи команды "vue init webpack my-project".

Здесь мы можем использовать несколько шаблонов Vue CLI:

webpack
webpack-simple

- После инициализации проекта отвечаем на вопросы про имя проекта, его описания и т.п.

- Выполняем команду "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 версии

Что бы развернуть проект на 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" и в консоли у нас появятся ссылки для открытия нашего проекта.