Я считаю, что для большинства студентов, которые использовали VueJS,vue-cliэто инструмент, с которым они хорошо знакомы. с помощьюvue-cli, мы можем легко инициализировать проект vue с помощью очень простого формата вопросов и ответов, не беспокоясь о сложном веб-пакете, конфигурации eslint и т. д.
Тем не менее, есть еще много студентов, которые не понимаютvue-cliа такжеvue工程отношения междуvue-cliфункция. В этой статье я начну с основных принципов и объединю несколько примеров, чтобы рассказать вамvue-cliМожно еще так использовать.
что такое vuecli
Цитата из официальной документации vue-cli:
Простой интерфейс командной строки для создания шаблонов проектов Vue.js Простой инструмент командной строки для создания шаблонов проектов Vue.js.
После глобальной установки vue-cli мы можем инициализировать наш проект vue одной командой:
vue init <template-name> <project-name>Следующий vue-cli будет следовать за этим<template-name>Параметр внутри шаблона, который вызывает несколько вариантов вопросов и ответов. После ответа на вопрос и вариантов ответа сгенерировался каталог нашего проекта vue.Далее, пока установлены зависимости, можно запускать их напрямую.Разве это не очень удобно?
Далее, давайте посмотрим, что произошло за этой командой.
Принцип инициализации проекта vue-cli
отофициальная документацияВы можете знать, что vue-cli используетdownload-git-repoЭтот инструмент загружает проект в удаленный репозиторий git, если он добавлен--cloneпараметры, он будет работать внутриgit clone, перетащите удаленный репозиторий git в локальный путем клонирования. Это важно понимать:
vue-cli не генерирует проект из ничего, а загружает/вытаскивает существующий проект на локальный сервер для завершения работы по созданию проекта.
И этот «существующий проект» является так называемым «шаблоном».
Конечно, vue-cli не так просто подтянуть шаблон к локалке, он еще и позволяет персонализировать конфигурацию шаблона в виде вопроса и ответа Как это делается?
vue-cli используетinquirer.jsРеализована «сессия вопросов и ответов», которая выглядит следующим образом:
// 准备几个问题
const questions = [
{
type: 'input',
name: 'name',
message: 'What's your name?'
},
{
type: 'input',
name: 'age',
message: 'How old are you?',
}
]Затем передайте этот вопрос в inquirer.js:
inquirer.prompt(questions).then(({ name, age }) => {
console.log(`My name is ${name}, and I'm ${age} years old`)
})При запуске vue-cli помещает в командную строкуWhat's your name?а такжеHow old are you?Эти две проблемы возникают одна за другой, получая пользовательский ввод, присваивая вводnameа такжеageпеременная, чтобы вы могли получить введенную пользователем информацию. Затем мы переходим к следующему вопросу: как эти пользовательские данные связаны с настройкой шаблона?
Мы открываем шаблон vue-cli, напримерREADME.md в простом веб-пакете, это выглядит так:
# {{ name }}
> {{ description }}Вышеприведенное заключено в двойные скобки и в конечном итоге изменится на определенный контент в зависимости от ввода пользователя. Знакомо ли это написание? На самом деле этоHandlebarsсинтаксис шаблона.
Взяв за пример этот файл README.md, во время запущенного процесса vue-cli сначала прочитает содержимое файла и поместит его в память, а затем передастinquirer.jsПолучите пользовательский ввод, замените введенное значение содержимым файла и, наконец, передайте другой именованныйMetalsmithФайл README.md с персонализированным содержимым создается путем вывода замененного содержимого в виде файла.
Весь процесс не сложный.После понимания этих принципов мы можем более глубоко использовать vue-cli.
Javascript против Java, Vue-cli против Vue
Хотя эта аналогия не является точной, я думаю, что каждый должен быть в состоянии понять, что я имею в виду.
Проще говоря, Vue-CLi может не только инициализировать проект Vue, который теоретическивсе работает, в том числе реагировать, угловой и т. д., если у вас есть копия, которая может работатьшаблон, вы можете инициализировать проект через vue-cli.
На форуме много похожих вопросов:
- «Как настроить sass в vue-cli?»
- «Как изменить порт devServer в vue-cli?»
- «Обнаружено, что проект не может работать в vue-cli»
- ...
vue-cli сказал: «Я не ношу этот горшок».
Да, обнаруженные проблемы связаны не с vue-cli, а с сопутствующими шаблонами. Итак, как написать квалифицированный шаблон? Давайте учиться вместе.
Написать шаблон vue-cli
Ссылаться наофициальная документация, может до сих пор не понимаю как это написать, тогда можно напрямую сослаться на официальный примерwebpack-simple, и посмотрите, как это написано.
Сначала вы можете увидеть структуру каталогов:
действительно очень просто, гдеmeta.jsonЭто вопрос и ответ на вопрос, заданный пользователю,/templateОглавление — это фактическое содержимое шаблона. Сначала давайте посмотрим наmeta.jsonЧто вы написали:
{
"prompts": {
"name": {
"type": "string",
"required": true,
"label": "Project name"
},
"description": {
"type": "string",
"required": true,
"label": "Project description",
"default": "A Vue.js project"
},
"author": {
"type": "string",
"label": "Author"
},
"sass": {
"type": "confirm",
"message": "Use sass?",
"default": false
}
},
"completeMessage": "{{#inPlace}}To get started:\n\n npm install\n npm run dev.{{else}}To get started:\n\n cd {{destDirName}}\n npm install\n npm run dev.{{/inPlace}}"
}Как видите, он задал пользователю всего 4 вопроса:
- Project name
- Project description
- Author
- Use sass?
Далее мы открываем/templateкаталог и посмотрите, как он выглядит:
Это каталог проекта, который в конечном итоге будет сгенерирован. открыть внутриpackage.json:
{
"name": "{{ name }}",
"description": "{{ description }}",
"version": "1.0.0",
"author": "{{ author }}",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.4.4"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
{{#sass}}
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
{{/sass}}
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}В сочетании с содержанием предыдущего принципа нетрудно понять этотpackage.jsonДвойные скобки внутри означают.
Увидев это, вы уже хотите попробовать это и написать свой собственный шаблон? Или хотите создать свой собственный инструмент для создания шаблонов командной строки? Принцип очень прост, если вы будете следовать идее шаг за шагом.
постскриптум
Фактически, в начале прошлого года были написаны две статьи, связанные со строительными лесами:
- «Научить вас создавать интерфейсный инструмент для строительных лесов с нуля»
- Простой в использовании инструмент инициализации проектов SCION обновлен!
Однако я обнаружил, что многие студенты все еще имеют некоторые отклонения в понимании vue-cli, поэтому я написал эту статью, чтобы рассказать о своем понимании.
Кстати, я прочитаю живую лекцию на Segmentfault в 20:00 16 ноября на тему "[Front-end Engineering]: игра с конфигурацией Webpack". Заинтересованные студенты могут зарегистрироваться для участия. Убедитесь, тщательно подготовиться Полный галантереи!
Ссылка для регистрации:segmentfault.com/l/15...
С нетерпением жду возможности поделиться со всеми вами~