{"id":19608563,"url":"https://github.com/andreiextr/installing-vue","last_synced_at":"2026-05-12T22:39:20.819Z","repository":{"id":242127903,"uuid":"805513820","full_name":"AndreiExtr/Installing-Vue","owner":"AndreiExtr","description":null,"archived":false,"fork":false,"pushed_at":"2024-07-07T17:15:31.000Z","size":66,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-26T17:16:04.013Z","etag":null,"topics":["install","js","vue"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AndreiExtr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-24T18:39:35.000Z","updated_at":"2024-07-10T07:14:57.000Z","dependencies_parsed_at":"2024-11-11T10:15:43.389Z","dependency_job_id":"812f59dc-8cea-4136-966a-9e7801c56d72","html_url":"https://github.com/AndreiExtr/Installing-Vue","commit_stats":null,"previous_names":["andreiextr/creating-an-api-and-client-on-vue.js","andreiextr/installing-vue"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndreiExtr%2FInstalling-Vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndreiExtr%2FInstalling-Vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndreiExtr%2FInstalling-Vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndreiExtr%2FInstalling-Vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndreiExtr","download_url":"https://codeload.github.com/AndreiExtr/Installing-Vue/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240898275,"owners_count":19875151,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["install","js","vue"],"created_at":"2024-11-11T10:15:46.235Z","updated_at":"2026-05-12T22:39:20.760Z","avatar_url":"https://github.com/AndreiExtr.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Что такое Vue?\nVue (произносится / vjuː/, как view) - это фреймворк JavaScript для создания пользовательских интерфейсов. Он построен поверх стандартных HTML, CSS и JavaScript и предоставляет декларативную компонентную модель программирования, которая помогает вам эффективно разрабатывать пользовательские интерфейсы любой сложности.\nВ большинстве проектов Vue с поддержкой инструментов сборки мы создаем компоненты Vue, используя формат файла, подобный HTML, который называется Single-File Component (также известный как *.vue files, сокращенно SFC). Vue SFC, как следует из названия, инкапсулирует логику компонента (JavaScript), шаблон (HTML) и стили (CSS) в одном файле. Вот предыдущий пример, написанный в формате SFC.:\n\n```\n\u003cscript setup\u003e\nimport { ref } from 'vue'\nconst count = ref(0)\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cbutton @click=\"count++\"\u003eCount is: {{ count }}\u003c/button\u003e\n\u003c/template\u003e\n\n\u003cstyle scoped\u003e\nbutton {\n  font-weight: bold;\n}\n\u003c/style\u003e\n```\n\n\n# Шаг 1: Установка Vue\n\n1) Проверьте версию Node.js и npm\n   \n```\nnode -v\nnpm -v\n```\n\n2) VUE CLI\n\nЭта команда установит и выполнит create-vue, официальный инструмент для создания каркасов проекта Vue. Вам будут представлены подсказки для нескольких дополнительных функций, таких как TypeScript и поддержка тестирования:\n  \n```\nnpm install -g @vue/cli\n```\nСоздание проекта Vue:\n```\nvue create my-project\n```\nШаги для старта:\n1. Manually select features\n2. Check the features needed for your project\n   - Router\n   - Vuex\n   - CSS Pre-processors\n   - Linter/Formatter\n3. 3.х\n4. Enter\n5. Sass/SCSS (with dart-sass)\n6. ESLint + Standard config\n7. Lint on save\n8. In package.json\n9. Enter\n\nЕсли вы не уверены в выборе опции, просто выберите No, нажав пока enter. После создания проекта следуйте инструкциям по установке зависимостей и запуску сервера разработки.:\n\n```\ncd \u003cyour-project-name\u003e\nnpm install\nnpm run serve\n```\n\n3) Установка Axios\n\nAxios — это популярная JavaScript-библиотека для выполнения HTTP-запросов. Она работает как на стороне клиента (в браузерах), так и на стороне сервера (в Node.js). Axios упрощает выполнение HTTP-запросов, таких как GET, POST, PUT, DELETE и другие, и предоставляет удобный способ взаимодействия с API.\n\nОсновные функции и возможности Axios:\n- Простота в использовании: Axios предоставляет интуитивно понятный API для выполнения HTTP-запросов.\n- Поддержка промисов: Axios работает с промисами, что делает его совместимым с async/await синтаксисом.\n- Автоматическое преобразование данных: Axios автоматически преобразует JSON-данные.\n- Интерцепторы: Позволяет перехватывать запросы и ответы, добавлять токены аутентификации, обрабатывать ошибки и т.д.\n- Поддержка тайм-аутов: Позволяет установить максимальное время ожидания для запросов.\n- Отправка данных в формате URLSearchParams: Поддерживает отправку данных в различных форматах, таких как URLSearchParams, FormData и т.д.\n- Отмена запросов: Поддержка отмены запросов с использованием токенов отмены.\n- Работа с заголовками: Легко настраивать заголовки запросов.\n   \n```\nnpm install axios\n```\n\n4) Установка необходимых зависимостей\n\n```\nnpm install express body-parser sqlite3\n```\n\n5) Установка драйвера MySQL для Node.js\n\n```\nnpm install mysql2\n```\n\n6) Создание основного файла сервера index.js\n\n```\nconst express = require('express');\nconst bodyParser = require('body-parser');\nconst mysql = require('mysql2');\nconst cors = require('cors');\n\nconst app = express();\nconst port = 3000;\n\n// Настройка соединения с MySQL\nconst connection = mysql.createConnection({\n  host: 'localhost',\n  user: 'your_username',\n  password: 'your_password',\n  database: 'your_database'\n});\n\nconnection.connect(err =\u003e {\n  if (err) {\n    console.error('Error connecting to MySQL:', err);\n    return;\n  }\n  console.log('Connected to MySQL');\n});\n\napp.use(cors());\napp.use(bodyParser.json());\n\n// Получение всех пользователей с указанием пола\napp.get('/api/users', (req, res) =\u003e {\n  const sqlQuery = `\n    SELECT u.id, u.firstName, u.lastName, u.birthYear, g.name AS gender\n    FROM UserList u\n    INNER JOIN Gender g ON u.genderId = g.id\n  `;\n  connection.query(sqlQuery, (error, results) =\u003e {\n    if (error) {\n      console.error('Error fetching users:', error);\n      res.status(500).json({ error });\n      return;\n    }\n    res.json(results);\n  });\n});\n\n// Добавление нового пользователя\napp.post('/api/users', (req, res) =\u003e {\n  const { firstName, lastName, birthYear, genderId } = req.body;\n  const sqlQuery = 'INSERT INTO UserList (firstName, lastName, birthYear, genderId) VALUES (?, ?, ?, ?)';\n  connection.query(sqlQuery, [firstName, lastName, birthYear, genderId], (error, result) =\u003e {\n    if (error) {\n      console.error('Error adding user:', error);\n      res.status(400).json({ error });\n      return;\n    }\n    const newUser = { id: result.insertId, firstName, lastName, birthYear, genderId };\n    res.status(201).json(newUser);\n  });\n});\n\napp.listen(port, () =\u003e {\n  console.log(`Server is running on http://localhost:${port}`);\n});\n```\n\n\n# Шаг 2: Создание клиента на Vue.js\n\n1) Создание API модуля\n\nСоздайте файл src/api.js и добавьте туда методы для взаимодействия с сервером:\n\n```\nimport axios from 'axios';\n\nconst apiClient = axios.create({\n  baseURL: 'http://localhost:3000/api',\n  withCredentials: false,\n  headers: {\n    Accept: 'application/json',\n    'Content-Type': 'application/json',\n  },\n});\n\nexport default {\n  getUsers() {\n    return apiClient.get('/users');\n  },\n  addUser(user) {\n    return apiClient.post('/users', user);\n  },\n  deleteUser(id) {\n    return apiClient.delete(`/users/${id}`);\n  },\n};\n```\n\n2) Создание компонента для отображения списка пользователей UserList.vue\n\n```\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003ch1\u003eUser List\u003c/h1\u003e\n    \u003cul\u003e\n      \u003cli v-for=\"user in users\" :key=\"user.id\"\u003e\n        {{ user.firstName }} {{ user.middleName }} {{ user.lastName }} ({{ user.birthYear }}) - {{ user.gender }}\n        \u003cbutton @click=\"deleteUser(user.id)\"\u003eDelete\u003c/button\u003e\n      \u003c/li\u003e\n    \u003c/ul\u003e\n    \u003cinput v-model=\"newUserFirstName\" placeholder=\"First Name\"\u003e\n    \u003cinput v-model=\"newUserMiddleName\" placeholder=\"Middle Name\"\u003e\n    \u003cinput v-model=\"newUserLastName\" placeholder=\"Last Name\"\u003e\n    \u003cinput v-model=\"newUserBirthYear\" placeholder=\"Birth Year\" type=\"number\"\u003e\n    \u003cselect v-model=\"newUserGenderId\"\u003e\n      \u003coption v-for=\"gender in genders\" :value=\"gender.id\" :key=\"gender.id\"\u003e{{ gender.name }}\u003c/option\u003e\n    \u003c/select\u003e\n    \u003cbutton @click=\"addUser\"\u003eAdd User\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport api from '../api';\n\nexport default {\n  data() {\n    return {\n      users: [],\n      genders: [],\n      newUserFirstName: '',\n      newUserMiddleName: '',\n      newUserLastName: '',\n      newUserBirthYear: '',\n      newUserGenderId: null\n    };\n  },\n  created() {\n    this.fetchUsers();\n    this.fetchGenders();\n  },\n  methods: {\n    fetchUsers() {\n      api.getUsers().then(response =\u003e {\n        this.users = response.data;\n      });\n    },\n    fetchGenders() {\n      api.getGenders().then(response =\u003e {\n        this.genders = response.data;\n      });\n    },\n    addUser() {\n      const newUser = {\n        firstName: this.newUserFirstName,\n        middleName: this.newUserMiddleName,\n        lastName: this.newUserLastName,\n        birthYear: parseInt(this.newUserBirthYear, 10),\n        genderId: this.newUserGenderId\n      };\n      api.addUser(newUser).then(response =\u003e {\n        this.users.push(response.data);\n        this.newUserFirstName = '';\n        this.newUserMiddleName = '';\n        this.newUserLastName = '';\n        this.newUserBirthYear = '';\n        this.newUserGenderId = null;\n      });\n    },\n    deleteUser(id) {\n      api.deleteUser(id).then(() =\u003e {\n        this.users = this.users.filter(user =\u003e user.id !== id);\n      });\n    },\n  },\n};\n\u003c/script\u003e\n```\n\n3) Обновление основного компонента App.vue\n\n```\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cUserList /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport UserList from './components/UserList.vue';\n\nexport default {\n  name: 'App',\n  components: {\n    UserList,\n  },\n};\n\u003c/script\u003e\n```\n\n4) Запуск Vue приложения\n\n```\nnpm run serve\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreiextr%2Finstalling-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandreiextr%2Finstalling-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreiextr%2Finstalling-vue/lists"}