yujiokayama

■スクリーンショット
cmd + shift + 3 (全体保存)
cmd + shift + 4 (部分保存)
cmd + shift + 5 (部分保存、オプション付き)

yujiokayama

// --------------------------------------------------
// Flexbox SASS mixins
// The spec: http://www.w3.org/TR/css3-flexbox
// --------------------------------------------------

// Flexbox display
@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;

yujiokayama

//奇数の場合
if( ( Number % 2 ) != 0 ) {
}

//偶数の場合
if( ( Number % 2 ) == 0 ) {
}

//3の倍数の場合
if( ( Number % 3 ) == 0 ) {

yujiokayama

※nodev8以上をインストール済み

■基本設定
npm i -D webpack webpack-cli webpack-dev-server

■npm cmd
watch機能: npm run watch
ローカルサーバ立ち上げ: npm run start

package.jsonとwebpack.config.jsの設定

yujiokayama

参考
https://windii.jp/angular/angular7update

1.6→7
ng update @angular/cli @angular/core

2.cliを最新に
npm uninstall -g angular-cli
npm install -g @angular/cli@latest

yujiokayama

・document
https://material.angular.io/

・install
npm i -D @angular/material @angular/cdk @angular/animations

・setup to ng-add
ng add @angular/material

・create component

yujiokayama

1.routing-moduleを作成
CLI command
ng g module app-routing --flat --module=app

2.AppRoutingModuleを編集

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';

yujiokayama

npm i bootstrap font-awesome -D

src/styles.css
@import "~bootstrap/dist/css/bootstrap.css";
@import "~font-awesome/css/font-awesome.css";

yujiokayama

■コンポーネント
ページを構成するUI部品の事
1つ以上のコンポーネントでページは構成される
例)
・ヘッダー
・サイドバー
・メインコンテンツ
・フッター

コンポーネント

yujiokayama

■node_modulesインストール
npm i

■package.json作成
npm init -y