предисловие
Когда мы используем Vue для разработки проектов, Vue-Cli предоставляет нам набор готовых шаблонов проектов, избавляя нас от необходимости настраивать webpack. Но поскольку Vue-Cli предназначен для всех разработчиков, шаблон проекта, который он предоставляет, очень простой, и когда мы используем этот шаблон для разработки, нам обычно нужно вводить его снова.axios Element-uiи другие широко используемые сторонние библиотеки, а также настроить некоторые часто используемые конфигурации оптимизации веб-пакетов, но когда мы снова начинаем новый проект, эти часто используемые вещи необходимо снова копировать. действительно сложно. Примите, поэтому мы надеемся, что мы можем определить наш собственный шаблон проекта. Когда мы открываем новый проект, мы напрямую используем наш собственный шаблон, и мы настроили часто используемый контент.
потомiframe архитектура микро интерфейс боевойТакже упоминалось, что проект «родитель-потомок» превращается в общий шаблон проекта, чтобы облегчить разработку новых проектов, поэтому в этой статье будет рассказано о том, как настроить шаблон проекта Vue-Cli.
3 файла один шаблон
Настройка шаблона проекта Vue-Cli очень проста и не может быть проще, поэтому вам в основном нужно предоставить 3 файла.preset.json prompts.js generator.jsи шаблонtemplateпоместите свой шаблон вtemplateпод папку.
Чтобы использовать ваш шаблон на любом устройстве, рекомендуется разместить свой шаблон на github, поэтомуПервый шаг — перейти на gitHub, чтобы создать проект, а затем снести свой проект.После того, как вы его потянете, перейдите к проекту и создайте указанные выше три файла и папку.На данный момент структура каталогов выглядит следующим образом.
├── template
├── generator.js
├── preset.json
└── prompts.js
Что делают эти три файла
preset.json
когда вы используетеvue createКогда вы даете команду создать проект, вам будет предложено сохранить информацию о параметрах в конце.Когда вы создаете проект в следующий раз, вы можете напрямую выбрать информацию, которую вы выбрали в прошлый раз, без необходимости выбирать ее снова.preset.jsonЭто предустановленная информация, называемая предустановкой;Предустановка официальной документации
prompts.js
когда вы используетеvue createкоманда для создания проекта, вас спросят, используете ли выBableЖдать,prompts.jsОн используется для хранения ваших вопросов и предоставленных вариантов;prompts.jsНаконец, массив необходимо экспортировать, и этот массив должен быть удовлетворенInquirerФормат вопроса массива,Inquirerофициальная документация
generator.js
generator.jsЭкспорт функции, которая принимает три параметра
- Один
GeneratorAPIПример: необходимо использовать пользовательские шаблоныGeneratorAPIизrender()метод - Этот вариант плагина-генератора, то есть пользователь
prompts.jsответы на вопросы в - весь пресет(
presets.foo) будет передан в качестве третьего параметра.
generator.jsофициальная документация
Внедрить простую версию пользовательского шаблона
первый шаг
Сначала сvue createдля создания проекта, а затем сохраните предустановленную информацию, перейдите к~/.vuerc, скопируйте предустановленную информацию, которую вы только что сохранили, вpreset.json
Открыть.vuercВы можете увидеть такие данные
{
"useTaobaoRegistry": true,
"latestVersion": "4.2.3",
"lastChecked": 1584603622605,
"packageManager": "npm",
"presets": {
"test": {
"useConfigFiles": true,
"plugins": {
"@vue/cli-plugin-babel": {},
"@vue/cli-plugin-router": {
"historyMode": true
},
"@vue/cli-plugin-vuex": {},
"@vue/cli-plugin-eslint": {
"config": "prettier",
"lintOn": [
"save",
"commit"
]
}
},
"cssPreprocessor": "less"
}
}
}
presetsЧто сохраняется, это ваша предустановленная информация.testэто псевдоним, который вы сохранили по умолчанию,preset.jsonвсе что тебе нужно этоtestзначение, поэтомуpreset.jsonвот что в нем
{
"useConfigFiles": true,
"plugins": {
"@vue/cli-plugin-babel": {},
"@vue/cli-plugin-router": {
"historyMode": true
},
"@vue/cli-plugin-vuex": {},
"@vue/cli-plugin-eslint": {
"config": "prettier",
"lintOn": [
"save",
"commit"
]
}
},
"cssPreprocessor": "less"
}
второй шаг
prompts.jsМы можем экспортировать пустой массив без вопросов;generator.jsвызыватьextendPackageметод, дающийpackage.jsonДобавить команды и пакеты для разработки и производственных сред; снова позвонитеrenderСпособ скопировать шаблон в шаблон
// prompts.js
module.exports = []
// generator.js
module.exports = (api, options, rootOptions) => {
api.extendPackage({
// 命令
scripts: {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
dependencies: {
"core-js": "^3.6.4",
"terser-webpack-plugin": "^2.3.5",
"vue": "^2.6.11",
"vue-router": "^3.1.5",
"vuex": "^3.1.2"
},
devDependencies: {
"@vue/cli-plugin-babel": "~4.2.0",
"@vue/cli-plugin-eslint": "~4.2.0",
"@vue/cli-plugin-router": "~4.2.0",
"@vue/cli-plugin-vuex": "~4.2.0",
"@vue/cli-service": "~4.2.0",
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.0.3",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^6.1.2",
"less": "^3.0.4",
"less-loader": "^5.0.0",
"lint-staged": "^9.5.0",
"prettier": "^1.19.1",
"vue-template-compiler": "^2.6.11"
}
});
// 复制template模版
api.render('../template');
};
третий шаг
package.json.файл в начале, измените на_,Например.eslintrc.js=="_eslintrc.js, и, наконец, загрузите свой проект на gitHub
четвертый шаг
использоватьvue create --preset username/repo my-projectсоздать свой проект,username/repoваше имя пользователя github и имя репозитория
Заканчивать
Здесь был сделан простой шаблон проекта Vue-Cli, вот один из них, который я приведуiframe архитектура микро интерфейс боевойСделать подшаблон, адрес дочернего шаблона:GitHub.com/ Луо Келин / я ...
Используйте команду:vue create --preset luokaibin/iframe-child-template your-project-name
Меры предосторожности
-
в шаблоне
.файлы, начинающиеся с.изменить на_В противном случае при создании проекта по шаблону.Открывающий файл не может быть скопирован;Официальное описание -
Когда вы используете шаблон для создания проекта, если возникает ошибка, и вы уверены, что это не проблема вашего собственного кода, вы можете поставить
.vuercсерединаpresetsУдален. -
// generator.js module.exports = (api, options, rootOptions) => { // 删除 vue-cli3 默认目录 api.render(files => { Object.keys(files) .filter(path => path.startsWith('src/') || path.startsWith('public/')) .forEach(path => delete files[path]) console.log(Object.keys(files)) }) api.render('../template'); };
расширить знания
Inquirer
Если вы используете шаблон для создания проекта, вы хотите предоставить пользователю некоторые вопросы, например, разрешить пользователю выбирать, использовать лиiViewещеelement-ui, то вы должны предоставитьprompts.jsЭта информация, ее содержание являетсяInquirerМассивы структур данных, поэтому вам нужно понять следующееInquirerофициальная документация
Вот пример
module.exports = [
{
name: 'ui', // 这个问题得到答案后，答案储存给那个字段，就是你要用的变量名称，key
type: 'list', // 问题类型 单选 多选 输入。。。。。
message: '请选择UI库', // 问题内容 给用户显示的问题
choices: [
{
name: 'Element UI', // 用户看的选项
value: 'element-ui' // 这个选项的value
},
{
name: 'iView',
value: 'iview'
},
{
name: 'none',
value: 'none'
}
],
default: 'none' // 默认值
}
]
ejs
Вы также должны использовать разные компоненты в соответствии с библиотекой пользовательского интерфейса, выбранной пользователем, и отображать разные шаблоны в соответствии с разным содержимым, тогда вам нужно использоватьejs, Официальный документ, вотejsПример внутри шаблона шаблона
<template>
<%_ if (options.ui === 'element-ui') { _%>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</el-container>
<%_ } _%>
<%_ if (options.ui === 'iview') { _%>
<Layout class="home">
<Header>Header</Header>
<Layout class="content">
<Sider hide-trigger>Sider</Sider>
<Layout>
<Content>Content</Content>
<Footer>Footer</Footer>
</Layout>
</Layout>
</Layout>
<%_ } _%>
<%_ if (options.ui === 'none') { _%>
<h1>首页</h1>
<%_ } _%>
</template>
<script>
export default {
name: 'Home',
};
</script>
<style lang="stylus" scoped>
<%_ if (options.ui === 'element-ui') { _%>
.el-container:first-child
height 100vh
.el-header, .el-footer
background-color #B3C0D1
color #333
text-align center
line-height 60px
.el-aside
background-color #D3DCE6
color #333
text-align center
line-height 200px
.el-main
background-color #E9EEF3
color #333
text-align center
line-height 160px
<%_ } _%>
<%_ if (options.ui === 'iview') { _%>
.home
height 100vh
color #ffffff
.content
flex-direction row
.ivu-layout-header
background-color #2d8cf0
.ivu-layout-footer
background-color #808695
color #ffffff
<%_ } _%>
</style>
использовать в шаблонахejsВы можете увидеть мой проект, который используется в этом проектеInquirerа такжеejs, адрес проекта:GitHub.com/Луо Кайбин/В…
Если вы хотите узнать больше о кастомных шаблонах, одному нужно читать официальную документацию, а другому порекомендовать проект от крупного парня.Адрес проекта:GitHub.com/C смотрел WB love/V…, документация проекта более подробная, а также в ней рассказывается о некоторых ямах, на которые наступил автор в процессе кастомизации шаблона.Также ссылаюсь на этот проект по изготовлению данного шаблона, и рекомендую его
серия статей
iframe архитектура микро интерфейс боевой
Эксплуатация и обслуживание просто еда (общая конфигурация Nginx)
Проектирование структуры крупномасштабного фронтенд-проекта
Решение для управления Git для крупных интерфейсных проектов
Как значительно повысить производительность фронтальной нагрузки
Установка Linux и настройка nginx (1)
Как реализовать компонент подсказки сообщения (Vue), используемый вызовом js