1. Затем обсудите создание проектов с помощью имени проекта vue create и дополнительных функций.
Сначала выполните vue create имя проекта в терминале, чтобы создать проект, нажмите Enter:
2. Для проверки кода ESLint разные стандарты предъявляют разные требования. Выберите стандарт, показанный на рисунке выше, проверка кода очень строгая, каковы конкретные требования для рекомендуемого выбора, перечислите некоторые из них: ●
Переменная, которая никогда не изменялась после создания, должна быть объявлена с константой
● В файле импортируйте (импортный) код Должен быть составлен вместе, никакие другие коды не могут быть смешаны между ними
● В середине кода может быть не более одной пустой строки
● В конце каждого файла должна быть пустая строка
● Точка с запятой не может быть используется в конце каждой строки кода
● Строки должны заключаться в одинарные кавычки
● ...
но это не имеет значения, настройте плагин vscode, при сохранении он автоматически подстроит код под требования
3. После последнего сохранения в качестве пресета, когда вы в следующий раз выполните vue create имя проекта, вы можете напрямую использовать этот сохраненный пресет. Как показано ниже:
4. Если вы хотите удалить пресет, вам нужно найти C:/Users/ваше имя пользователя/.vuerc и удалить пресет внутри.
Если это система Mac, перейдите в свою личную папку (нарисуйте значок домика), нажмите Command+Shift+., просмотрите скрытые файлы и найдите пресет в самом .vuerc.
5. Очистить исходный проект
● App.vue, просто оставьте базовый шаблон
● Удалите компонент HelloWorld.vue в компонентах
● Удалите два компонента в представлениях
● Сброс маршрутизации (router/index.js)
импортировать Vue из 'vue'
импортировать VueRouter из 'vue-router'
// ---------------------------------- ---------------------------- Удалите строку, загружающую Home
Vue.use(VueRouter)
const route = [] // ------------------ - --------- Очистить этот массив
const router = new VueRouter({ route }) export default router
8. Структура каталогов проекта
node_modules --- сторонний пакет, который мы скачали (нельзя переместить
) ресурсы проекта (картинки и т.п.) компоненты --- компоненты хранилища (не управляемые роутингом, вообщем ставятся общие и инкапсулированные компоненты) представления --- компоненты хранилища (компоненты, управляемые роутингом, ставить их сюда) router --- файл хранилище файлов конфигурации --- конфигурация vuex App.vue --- корневой компонент проекта (все остальные компоненты являются его дочерними компонентами) main.js --- это упакованный входной файл (main.js - это первый исполняемый файл ) .eslintrc.js --- конфигурационный файл ESLint.gitignore --- файл git ignore (уже написанный, обрабатывать не нужно) babel.config.js --- babel для удешевления JS (текущий проект не нужно обработать ) package-lock.json --- файл который блокирует версию стороннего пакета (перемещать не надо) package.json --- конфигурационный файл проекта
Конфигурация ESLint
Конфигурация ESLint по умолчанию:
● Переменные не изменяются и должны быть объявлены с константой
● Все импорты должны быть помещены в самое начало
● Для строк используются одинарные кавычки
● В конце инструкции не добавляется точка с запятой
● Добавлять ли пробел перед скобками функции, по умолчанию нужно добавить
● Найдите в проекте файл .eslintrc.js и добавьте следующие элементы конфигурации в правила.
Для удобства написания кода я когда-то установил плагин Prettier.
Этот подключаемый модуль форматирования конфликтует с конфигурацией ESLint по умолчанию (необходимо ли добавлять пробелы перед скобками функции).
● ESLint требует, чтобы перед всеми скобками функций стояли пробелы.
● Плагин Prettier после форматирования удалит пробелы между методами в объекте и скобками.
В файле .eslintrc.js (файл конфигурации ESLint) найдите правила (rules) и добавьте следующую конфигурацию:
// Устранение проблемы с пробелами между именем функции и круглыми скобками
// Справочный документ: https://eslint.bootcss.com/docs/rules/space-before-function-paren
'space-before-function-paren': [
' error',
{ анонимно: 'всегда', // Перед скобками анонимной функции требуется пробел. Например, setTimeout(function () {}) named: 'never', // методы с именами не требуют пробелов. Например, abc() {} asyncArrow: 'always' // Функция стрелки, требует пробелов } ]
или добавьте эти две строки кода
'пробел-перед-функцией-парен': 0,
'нет нескольких пустых строк': 0