Code Monkey home page Code Monkey logo

tft-simulator-set3's Introduction

nuxt-my-template

Not yet complete!!!

Provides the following

  • Full TypeScript support (including Vuex)
  • Efficient coding with Pug and Stylus
  • Static analysis and automatic format by ESLint
  • Indicator of component division by AtomicDesign
  • Efficient build by webpack setting

Features Vue Settings

  • Nuxt.js
    • Default is SSR
    • Router
    • Vuex
  • TypeScript
    • Client / Server
  • HTML template engine
    • Pug
  • CSS Pre-Processors
    • Stylus
  • Linter / Formatter
    • ESLint
    • Prettier
  • API Server
    • Express
    • like BFF
  • Unit Test
    • Jest

Features

  • TypeScript full support(client /server side)
  • nuxt-property-decorator
    • Component & TypeScript
    • SFC(single-file-component) Style
  • Pug as a HTML template engine
    • Rewriting vue's initial template using pug and stylus
  • Auto Format CSS to Stylus
    • Auto Sort Stylus Property
  • vuex-module-decorators
  • Auto Lint on save
  • Atomic Design to separate the components, but it's not that exact
    • Template element is not implemented

Coding Style

Style Guide

TypeScript Settings

	"strict": true,
	"noUnusedLocals": true,
	"noUnusedParameters": true,
	"noImplicitReturns": true,
	"noFallthroughCasesInSwitch": true,

Others

  • 2 spaces per indentation

TODO

  • Nuxt Basic Setup
  • Install ESLint/Pretter
    • Setup ESLint
    • Setup Prettier
    • Setup Vue/Vetur basic Linter/Formatter
    • LintOnSave(VSCode)
  • Install TypeScript
    • Setup tsconfig.json
      • Client Side
      • Server Side
  • Install CSS Pre-Processors
    • Install Stylus or Sass
      • Setup Format
      • Setup Lint
      • Add Global Style File
  • nuxt-property-decorator (class-style-component)
  • Install HTML Template Engine (Pug)
  • Install vuex-module-decorators
    • Setup Basic Vuex store
  • Setup Atomic Design
    • Rewrite Sample Component
  • Add Script to package.json
    • Report/Modern Build
  • Jest Test
    • Add basic test
      • SnapShot
      • Vue component
      • Vue component method
      • Vuex
        • State
        • Mutation
        • Action
        • MutationAction
  • Add .vscode file
    • settings.json
    • Reccomend Extentions
  • Write Readme.md
    • Coding style Guide
    • Snippets
    • Build Setup
  • Setup Webpack
    • Purge CSS
  • Setup Express
    • Create Simple API
    • Setup Layered Architecture
    • Create asyncData Sample
  • Setup OGP

Build Setup

# install dependencies
$ npm run install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# build for production including modern bundle 
$ npm run build:modern

# Generate report.html to help analyze bundle content
$ npm run report

# Run Lint and Auto fix format
$ npm run Lint
$ npm run Lint:fix

# generate static project
$ npm run generate

For detailed explanation on how things work, check out Nuxt.js docs.

tft-simulator-set3's People

Contributors

nyaagoo avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.