Commit b73f32dd authored by repin's avatar repin

Initial commit

parents
Pipeline #2166 failed with stages
{
"env": {
"test": {
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
]
}
}
}
# editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
module.exports = {
root: true,
env: {
browser: true,
'jest/globals': true,
node: true,
},
parserOptions: {
parser: '@babel/eslint-parser',
requireConfigFile: false,
},
extends: ['@nuxtjs', 'plugin:nuxt/recommended', 'prettier'],
plugins: ['jest'],
// add your custom rules here
rules: {},
}
/logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pids
*.pid
*.seed
*.pid.lock
lib-cov
coverage
.nyc_output
.grunt
bower_components
.lock-wscript
build/Release
node_modules/
jspm_packages/
typings/
.npm
.eslintcache
.node_repl_history
*.tgz
.yarn-integrity
.env
.cache
.next
.nuxt
dist
.vuepress/dist
.serverless
.idea
sw.*
.DS_Store
*.swp
/logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pids
*.pid
*.seed
*.pid.lock
lib-cov
coverage
.nyc_output
.grunt
bower_components
.lock-wscript
build/Release
node_modules/
jspm_packages/
typings/
.npm
.eslintcache
.node_repl_history
*.tgz
.yarn-integrity
.env
.cache
.next
.nuxt
dist
.vuepress/dist
.serverless
.idea
sw.*
.DS_Store
*.swp
{
"semi": false,
"singleQuote": true
}
FROM node:16.20.0-alpine3.17
WORKDIR /app
\ No newline at end of file
## NuxtCarcass:
Каркас для приложений на основе Nuxt. Содержит базовый набор необходимый функций, компонентов и настроек, как для работы front-end разработчиков, так и для верстальщиков.
---
### Установка и запуск:
**В случае использования Docker:**
- git clone ..
- docker compose -f docker-compose.local.yml up -d --build
- docker exec -ti nuxtcarcass sh
- npm i
- npm run dev
- http://127.0.0.1:3000
**Без Docker:**
- git clone
- npm i
- npm run dev
- http://127.0.0.1:3000
/**
Главный файл наших стилей:
* Здесь проставляются все базовые стили
* Здесь вызываются остальыне используемые файлы-стилей, сепарированные по своим значениям
** Обратите внимания, что порядок вызовов файлов важен в отображении Ваших стилей, в случае если есть какие-то дополнения или т.п.
*/
@import 'fonts';
* {
padding: 0;
margin: 0;
}
ul {
padding-left: 25px;
}
html, body {
font-family: 'Sans', serif;
}
@import 'header';
@import 'section';
@import 'pages/about/about';
@import 'footer';
@font-face {
font-family: 'Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
/**
Обратите внимания, в Nuxt импорт файлов происходит с помощью префикса ~assets, который выедет на одноименную папку
*/
src: url('~assets/fonts/sansserif.ttf') format('truetype');
}
footer {
margin-top: 100px;
padding: 0 25px;
}
header {
width: 100%;
margin-bottom: 100px;
.container {
display: flex;
padding: 15px 25px;
justify-content: space-between;
align-items: center;
}
}
.example-user-icon {
display: inline-block;
width: 16px;
height: 16px;
/**
Обратите внимания, в Nuxt импорт файлов происходит с помощью префикса ~assets, который выедет на одноименную папку
*/
background-image: url('~assets/images/icons/user.png');
background-size: contain;
margin-right: 5px;
}
.section-about {
article {
align-items: center;
display: flex;
}
}
section {
padding: 0 25px;
}
<template>
<footer>
<h3>Футер</h3>
<FooterDescription/>
</footer>
</template>
<script>
import FooterDescription from "./FooterDescription.vue";
export default {
name: 'FooterBlock',
components: {FooterDescription}
}
</script>
<template>
<div>
<small>Описание футера. Может быть отдельным большим блоком, поэтому выносим в отдельный компонент.</small>
<p><small>Если бы у нас здесь был к примеру блок подписки на рассылку – мы бы и его вынесли в отдельный компонент.</small></p>
</div>
</template>
<template>
<header>
<div class="container">
<div><b>Title</b></div>
<div>
<!-- Обратите внимания, что импорт файлов здесь происходит по полному пути от этой файла -->
<img src="../../../assets/images/icons/user.png" alt="user" width="32px"/>
</div>
</div>
</header>
</template>
<script>
export default {
// Опционально Название компонента должно равняться наименованию файла
name: 'HeaderBlock'
}
</script>
<template>
<article>
<div class="example-user-icon"></div> Page content
</article>
</template>
<script setup>
</script>
version: '3'
services:
app:
build:
context: .
dockerfile: Dockerfile.local
volumes:
- .:/app:cached
ports:
- '3000:3000'
expose:
- 3000
tty: true
module.exports = {
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/$1',
'^~/(.*)$': '<rootDir>/$1',
'^vue$': 'vue/dist/vue.common.js',
},
moduleFileExtensions: ['js', 'vue', 'json'],
transform: {
'^.+\\.js$': 'babel-jest',
'.*\\.(vue)$': 'vue-jest',
},
collectCoverage: true,
collectCoverageFrom: [
'<rootDir>/components/**/*.vue',
'<rootDir>/pages/**/*.vue',
],
testEnvironment: 'jsdom',
}
<template>
<div>
<HeaderBlock/>
<Nuxt/>
<FooterBlock/>
</div>
</template>
<script>
import HeaderBlock from '../components/layout/header/HeaderBlock.vue';
import FooterBlock from "../components/layout/footer/FooterBlock.vue";
export default {
name: 'Default',
components: {FooterBlock, HeaderBlock}
}
</script>
<template>
<div>
<HeaderBlock/>
<Nuxt/>
</div>
</template>
<script>
import HeaderBlock from '../components/layout/header/HeaderBlock.vue';
export default {
name: 'Documents',
components: {HeaderBlock}
}
</script>
export default {
ssr: false,
target: 'static',
server: {
host: '0',
port: 3000
},
head: {
title: 'app',
htmlAttrs: {
lang: 'ru',
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
css: [
'assets/styles/app.scss'
],
router: {
extendRoutes(routes) {
for (const index in Object.entries(routes)) {
const route = routes[index];
if (route.path.endsWith('/Index')) {
route.path = route.path.replace('/Index', '/');
}
}
},
},
plugins: [],
components: true,
buildModules: [
'@nuxtjs/eslint-module',
'@nuxtjs/stylelint-module',
],
modules: [],
build: {},
}
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"name": "app",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
"lint:style": "stylelint \"**/*.{css,scss,sass,html,vue}\" --ignore-path .gitignore",
"lint:prettier": "prettier --check .",
"lint": "npm run lint:js && npm run lint:style && npm run lint:prettier",
"lintfix": "prettier --write --list-different . && npm run lint:js -- --fix && npm run lint:style -- --fix",
"test": "jest"
},
"dependencies": {
"core-js": "^3.25.3",
"nuxt": "^2.15.8",
"vue": "^2.7.10",
"vue-server-renderer": "^2.7.10",
"vue-template-compiler": "^2.7.10"
},
"devDependencies": {
"@babel/eslint-parser": "^7.19.1",
"@nuxtjs/eslint-config": "^11.0.0",
"@nuxtjs/eslint-module": "^3.1.0",
"@nuxtjs/stylelint-module": "^4.1.0",
"@vue/test-utils": "^1.3.0",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^29.1.2",
"eslint": "^8.24.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-jest": "^27.0.4",
"eslint-plugin-nuxt": "^4.0.0",
"eslint-plugin-vue": "^9.5.1",
"jest": "^29.1.2",
"jest-environment-jsdom": "^29.1.2",
"postcss-html": "^1.5.0",
"prettier": "^2.7.1",
"sass": "^1.60.0",
"sass-loader": "^10.4.1",
"stylelint": "^14.13.0",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-recommended-vue": "^1.4.0",
"stylelint-config-standard": "^28.0.0",
"vue-jest": "^3.0.4"
},
"browserslist": [
">0.3%",
"not ie 11",
"not dead",
"not op_mini all",
"last 3 version",
"Chrome >= 35",
"Firefox >= 38",
"Edge >= 10",
"Explorer >= 10",
"ie >= 10",
"iOS >= 8",
"Safari >= 8",
"Android 2.3",
"Android >= 4",
"Opera >= 12"
]
}
<template>
<section class="section-about">
<h1>About</h1>
<!-- Для вставки компонента используем его имя и вставляем как тег -->
<ArticleBlock/>
</section>
</template>
<script>
// Для открытия этой станицы необходимо перейти по адресу /about, что равняется наименованием компонента
// Импортируем компонент
import ArticleBlock from '../components/pages/about/ArticleBlock.vue';
export default {
// Импортируемые компоненты обозначем здесь, в случае увеличения их количества - перечисляем через запятую
components: {ArticleBlock},
// Для всех страниц необходимо указывать наименование основного шаблона. Наименование равно названию компонента из папки layouts
layout: 'Default'
}
</script>
<template>
<section>
<h1>Section</h1>
<article>
<h2>Article</h2>
<div>
List block
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>
</article>
</section>
</template>
<script>
// Для открытия этой станицы необходимо перейти по адресу /. Компоненты с названием Index переименовываются просто в / для открытия в браузере
export default {
// Опционально, название компонента, должно соответствовать наименованию файла
name: 'Index',
// Для всех страниц необходимо указывать наименование основного шаблона. Наименование равно названию компонента из папки layouts
layout: 'Default'
}
</script>
<template>
<div>
Documents
</div>
</template>
<script>
// Для открытия этой станицы необходимо перейти по адресу /documents/, где /documents - название папки, / - наш Index компонент
export default {
// Для всех страниц необходимо указывать наименование основного шаблона. Наименование равно названию компонента из папки layouts
layout: 'Documents'
}
</script>
module.exports = {
customSyntax: 'postcss-html',
extends: [
'stylelint-config-standard',
'stylelint-config-recommended-vue',
'stylelint-config-prettier',
],
rules: {},
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment