Initial commit

.babelrc

+{
+  "env": {
+    "test": {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "targets": {
+              "node": "current"
+            }
+          }
+        ]
+      ]
+    }
+  }
+}

.editorconfig

+# 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

.eslintrc.js

+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: {},
+}

.gitignore

+/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

.prettierignore

+/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

.prettierrc

+{
+  "semi": false,
+  "singleQuote": true
+}

Dockerfile.local

+FROM node:16.20.0-alpine3.17
+
+WORKDIR /app
\ No newline at end of file

README.md

+## 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

assets/styles/app.scss

+/**
+  Главный файл наших стилей:
+    * Здесь проставляются все базовые стили
+    * Здесь вызываются остальыне используемые файлы-стилей, сепарированные по своим значениям
+
+    ** Обратите внимания, что порядок вызовов файлов важен в отображении Ваших стилей, в случае если есть какие-то дополнения или т.п.
+*/
+
+@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';

assets/styles/fonts.scss

+@font-face {
+  font-family: 'Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  /**
+   Обратите внимания, в Nuxt импорт файлов происходит с помощью префикса ~assets, который выедет на одноименную папку
+  */
+  src: url('~assets/fonts/sansserif.ttf') format('truetype');
+}

assets/styles/footer.scss

+footer {
+  margin-top: 100px;
+  padding: 0 25px;
+}

assets/styles/header.scss

+header {
+  width: 100%;
+  margin-bottom: 100px;
+
+  .container {
+    display: flex;
+    padding: 15px 25px;
+    justify-content: space-between;
+    align-items: center;
+  }
+}

assets/styles/pages/about/about.scss

+.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;
+  }
+}

assets/styles/section.scss

+section {
+  padding: 0 25px;
+}

components/layout/footer/FooterBlock.vue

+<template>
+  <footer>
+    <h3>Футер</h3>
+    <FooterDescription/>
+  </footer>
+</template>
+
+<script>
+import FooterDescription from "./FooterDescription.vue";
+
+export default {
+  name: 'FooterBlock',
+  components: {FooterDescription}
+}
+</script>

components/layout/footer/FooterDescription.vue

+<template>
+  <div>
+    <small>Описание футера. Может быть отдельным большим блоком, поэтому выносим в отдельный компонент.</small>
+    <p><small>Если бы у нас здесь был к примеру блок подписки на рассылку – мы бы и его вынесли в отдельный компонент.</small></p>
+  </div>
+</template>

components/layout/header/HeaderBlock.vue

+<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>

components/pages/about/ArticleBlock.vue

+<template>
+  <article>
+    <div class="example-user-icon"></div> Page content
+  </article>
+</template>
+<script setup>
+</script>

docker-compose.local.yml

+version: '3'
+services:
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile.local
+    volumes:
+      - .:/app:cached
+    ports:
+      - '3000:3000'
+    expose:
+      - 3000
+    tty: true

jest.config.js

+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',
+}

layouts/Default.vue

+<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>

layouts/Documents.vue

+<template>
+  <div>
+    <HeaderBlock/>
+    <Nuxt/>
+  </div>
+</template>
+
+<script>
+import HeaderBlock from '../components/layout/header/HeaderBlock.vue';
+
+export default {
+  name: 'Documents',
+  components: {HeaderBlock}
+}
+</script>

nuxt.config.js

+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: {},
+}

package.json

+{
+  "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"
+  ]
+}

pages/About.vue

+<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>

pages/Index.vue

+<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>

pages/documents/Index.vue

+<template>
+  <div>
+    Documents
+  </div>
+</template>
+
+<script>
+// Для открытия этой станицы необходимо перейти по адресу /documents/, где /documents - название папки, / - наш Index компонент
+export default {
+  // Для всех страниц необходимо указывать наименование основного шаблона. Наименование равно названию компонента из папки layouts
+  layout: 'Documents'
+}
+</script>

stylelint.config.js

+module.exports = {
+  customSyntax: 'postcss-html',
+  extends: [
+    'stylelint-config-standard',
+    'stylelint-config-recommended-vue',
+    'stylelint-config-prettier',
+  ],
+  rules: {},
+}