├── .gitignore ├── .prettierignore ├── .prettierrc ├── .stylelintrc.js ├── .vue.stylelintrc.js ├── README.md ├── docker-compose.yml ├── jest.config.js ├── modules ├── default.conf ├── httpd.conf └── typescript.js ├── nuxt.config.js ├── package.json ├── src ├── assets │ └── .gitkeep ├── components │ └── Card.vue ├── interfaces │ └── Person.ts ├── layouts │ └── default.vue ├── middleware │ └── README.md ├── pages │ ├── about │ │ ├── index.spec.ts │ │ └── index.vue │ ├── index.vue │ └── members │ │ ├── _id │ │ ├── edit.vue │ │ └── index.vue │ │ ├── edit.vue │ │ └── show.vue ├── static │ ├── .htaccess │ ├── favicon.ico │ ├── random-data.json │ └── robots.txt ├── store │ ├── count.ts │ └── index.ts ├── styles │ ├── keyframes.css │ ├── reset.css │ └── variables.css └── types │ ├── process.d.ts │ └── vue-shims.d.ts ├── tsconfig.json ├── tslint.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Created by https://www.gitignore.io/api/osx,linux,windows,node 3 | 4 | ### Linux ### 5 | *~ 6 | 7 | # temporary files which can be created if a process still has a handle open of a deleted file 8 | .fuse_hidden* 9 | 10 | # KDE directory preferences 11 | .directory 12 | 13 | # Linux trash folder which might appear on any partition or disk 14 | .Trash-* 15 | 16 | # .nfs files are created when an open file is removed but is still being accessed 17 | .nfs* 18 | 19 | ### Node ### 20 | # Logs 21 | logs 22 | *.log 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # Runtime data 28 | pids 29 | *.pid 30 | *.seed 31 | *.pid.lock 32 | 33 | # Directory for instrumented libs generated by jscoverage/JSCover 34 | lib-cov 35 | 36 | # Coverage directory used by tools like istanbul 37 | coverage 38 | 39 | # nyc test coverage 40 | .nyc_output 41 | 42 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 43 | .grunt 44 | 45 | # Bower dependency directory (https://bower.io/) 46 | bower_components 47 | 48 | # node-waf configuration 49 | .lock-wscript 50 | 51 | # Compiled binary addons (http://nodejs.org/api/addons.html) 52 | build/Release 53 | 54 | # Dependency directories 55 | node_modules/ 56 | jspm_packages/ 57 | 58 | # Typescript v1 declaration files 59 | typings/ 60 | 61 | # Optional npm cache directory 62 | .npm 63 | 64 | # Optional eslint cache 65 | .eslintcache 66 | 67 | # Optional REPL history 68 | .node_repl_history 69 | 70 | # Output of 'npm pack' 71 | *.tgz 72 | 73 | # Yarn Integrity file 74 | .yarn-integrity 75 | 76 | # dotenv environment variables file 77 | .env 78 | 79 | 80 | ### OSX ### 81 | *.DS_Store 82 | .AppleDouble 83 | .LSOverride 84 | 85 | # Icon must end with two \r 86 | Icon 87 | 88 | # Thumbnails 89 | ._* 90 | 91 | # Files that might appear in the root of a volume 92 | .DocumentRevisions-V100 93 | .fseventsd 94 | .Spotlight-V100 95 | .TemporaryItems 96 | .Trashes 97 | .VolumeIcon.icns 98 | .com.apple.timemachine.donotpresent 99 | 100 | # Directories potentially created on remote AFP share 101 | .AppleDB 102 | .AppleDesktop 103 | Network Trash Folder 104 | Temporary Items 105 | .apdisk 106 | 107 | ### Windows ### 108 | # Windows thumbnail cache files 109 | Thumbs.db 110 | ehthumbs.db 111 | ehthumbs_vista.db 112 | 113 | # Folder config file 114 | Desktop.ini 115 | 116 | # Recycle Bin used on file shares 117 | $RECYCLE.BIN/ 118 | 119 | # Windows Installer files 120 | *.cab 121 | *.msi 122 | *.msm 123 | *.msp 124 | 125 | # Windows shortcuts 126 | *.lnk 127 | 128 | 129 | # End of https://www.gitignore.io/api/osx,linux,windows,node 130 | 131 | # Nuxt generate files 132 | .nuxt 133 | dist 134 | src/static/sitemap.xml 135 | 136 | # Editors 137 | /.vscode 138 | /.idea 139 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | src/static 4 | package.json 5 | tsconfig.json 6 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | printWidth: 120 2 | tabWidth: 2 3 | useTabs: false 4 | semi: true 5 | singleQuote: true 6 | trailingComma: all 7 | 8 | overrides: 9 | - files: "*.css" 10 | options: 11 | parser: css 12 | singleQuote: false 13 | - files: "*.json" 14 | options: 15 | singleQuote: false 16 | - files: "*.vue" 17 | options: 18 | parser: vue 19 | -------------------------------------------------------------------------------- /.stylelintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['stylelint-config-framelunch'], 3 | ignoreFiles: ['./*', 'dist/**/*', 'src/static/**/*'], 4 | rules: { 5 | // @系の構文の前には基本空行をいれる 6 | 'at-rule-empty-line-before': [ 7 | 'always', 8 | { 9 | except: ['first-nested'], 10 | ignore: ['after-comment', 'blockless-after-same-name-blockless'], 11 | }, 12 | ], 13 | // 複雑すぎる指定はNG ただし属性っぽいものはだいたいOK 14 | 'selector-max-specificity': ['0,2,0', { ignoreSelectors: ['/:.*/', '/-[^-].*/', '/ \\+ /'] }], 15 | // コメントの前には空行 16 | 'comment-empty-line-before': [ 17 | 'always', 18 | { 19 | except: ['first-nested'], 20 | ignore: ['after-comment', 'stylelint-commands'], 21 | }, 22 | ], 23 | // カンマの後ろにはスペース 24 | 'function-comma-space-after': 'always-single-line', 25 | 26 | /* 27 | * conflict with prettier 28 | */ 29 | 'max-line-length': null, 30 | indentation: null, 31 | 'no-extra-semicolons': null, 32 | 'declaration-block-semicolon-newline-after': null, 33 | 'declaration-block-semicolon-newline-before': null, 34 | 'declaration-block-semicolon-space-after': null, 35 | 'declaration-block-semicolon-space-before': null, 36 | 'string-quotes': null, 37 | 'block-closing-brace-empty-line-before': null, 38 | 'block-closing-brace-newline-after': null, 39 | 'block-closing-brace-newline-before': null, 40 | 'block-closing-brace-space-after': null, 41 | 'block-closing-brace-space-before': null, 42 | 'block-opening-brace-newline-after': null, 43 | 'block-opening-brace-newline-before': null, 44 | 'block-opening-brace-space-after': null, 45 | 'block-opening-brace-space-before': null, 46 | 'number-leading-zero': null, 47 | 'number-no-trailing-zeros': null, 48 | 'value-list-comma-newline-after': null, 49 | 'declaration-colon-newline-after': null, 50 | }, 51 | }; 52 | -------------------------------------------------------------------------------- /.vue.stylelintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['stylelint-config-framelunch'], 3 | processors: ['stylelint-processor-html'], 4 | ignoreFiles: ['dist/**/*', 'src/static/**/*'], 5 | rules: { 6 | // @系の構文の前には基本空行をいれる 7 | 'at-rule-empty-line-before': [ 8 | 'always', 9 | { 10 | except: ['first-nested'], 11 | ignore: ['after-comment', 'blockless-after-same-name-blockless'], 12 | }, 13 | ], 14 | // 複雑すぎる指定はNG ただし属性っぽいものはだいたいOK 15 | 'selector-max-specificity': ['0,2,0', { ignoreSelectors: ['/:.*/', '/-[^-].*/', '/ \\+ /'] }], 16 | // コメントの前には空行 17 | 'comment-empty-line-before': [ 18 | 'always', 19 | { 20 | except: ['first-nested'], 21 | ignore: ['after-comment', 'stylelint-commands'], 22 | }, 23 | ], 24 | // カンマの後ろにはスペース 25 | 'function-comma-space-after': 'always-single-line', 26 | 27 | /* 28 | * conflict with prettier 29 | */ 30 | 'max-line-length': null, 31 | indentation: null, 32 | 'no-extra-semicolons': null, 33 | 'declaration-block-semicolon-newline-after': null, 34 | 'declaration-block-semicolon-newline-before': null, 35 | 'declaration-block-semicolon-space-after': null, 36 | 'declaration-block-semicolon-space-before': null, 37 | 'string-quotes': null, 38 | 'block-closing-brace-empty-line-before': null, 39 | 'block-closing-brace-newline-after': null, 40 | 'block-closing-brace-newline-before': null, 41 | 'block-closing-brace-space-after': null, 42 | 'block-closing-brace-space-before': null, 43 | 'block-opening-brace-newline-after': null, 44 | 'block-opening-brace-newline-before': null, 45 | 'block-opening-brace-space-after': null, 46 | 'block-opening-brace-space-before': null, 47 | 'number-leading-zero': null, 48 | 'number-no-trailing-zeros': null, 49 | 50 | /* 51 | * for vue 52 | */ 53 | 'no-empty-source': null, 54 | }, 55 | }; 56 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Nuxt.js Typescript + PostCSS Template 2 | 3 | ## 元ネタ 4 | 5 | https://github.com/nuxt-community/typescript-template/tree/22d0c56f20bfd588c264ba90b4a43e57f83fdb3f 6 | 7 | ## ちがい 8 | 9 | * ディレクトリ構成を変更し、`src`ディレクトリに各ファイルをまとめる構成にしました。 10 | * いくつかのディレクトリが追加・編集・削除されていますがなんとなく眺めてもらえればわかるかと思います。 11 | * `.gitignore`がより詳細に設定されています。 12 | * `prettier`を設定しファイルコミット時にprettierがかかるようになっています。 13 | * エディタを設定しファイル保存時にprettierが実行されるようにするのがおすすめです。 14 | * `tslint`を設定し`.ts`ファイルの構文をチェックします。`.vue`ファイルについては現在のところスルーです。 15 | * `stylelint`を設定し`.css`, `.vue`ファイルの構文をチェックします。 16 | * `sanitize.css`を読み込みCSSをリセットしています。 17 | * `nuxt-property-decorator`を削除し`vue-property-decorator`に置き換えています。前者は更新が止まっておりまた後者の劣化移植でしかないようにみえます。 18 | * `tsconfig.json`を変更しより厳格にtsコードのチェックを行うようになっています。 19 | * `@nuxtjs/sitemap`を導入しいい感じのsitemapを生成するようにしています。 20 | * `jest`を導入しテストが書けるようになっています。`yarn test`で実行 21 | * 諸々便利なので検証用にdockerでapacheが動くようになっています。詳しくは[この辺](#検証方法)参照 22 | * nginxも追加しようかと思ってます 23 | 24 | ## 注意点 25 | 26 | JavaScriptではなくTypeScriptです。補完が聞いて便利なんです 27 | 28 | ## 動かし方 29 | 30 | ```bash 31 | # install module 32 | yarn 33 | # start development 34 | yarn dev 35 | # production build 36 | yarn build 37 | # ... and launch server 38 | yarn start 39 | # generate static files 40 | yarn generate 41 | ``` 42 | 43 | ## 拡張方法 44 | 45 | ### 新しいページを追加したい 46 | 47 | `src/pages/`の下を拡張していくと勝手にルーティングも変更されてよしなにしてくれます。 48 | 詳しくは[オフィシャルを参照](https://ja.nuxtjs.org/guide/routing)あれ 49 | 50 | ### その他 51 | 52 | ほぼすべて`nuxt.config.js`に設定がまとまっているので変更してください。 53 | 詳しくは[オフィシャルを参照](https://ja.nuxtjs.org/guide/configuration)あれ 54 | 55 | ### 56 | 57 | ## 検証方法 58 | 59 | `docker-compose up -d` でdistディレクトリをドキュメントルートとしてマウントしたapacheコンテナを起動できます。 60 | 61 | `http://localhost:8080` へアクセスすると確認できます。 `.htaccess`の検証に便利です。 62 | 63 | 64 | ## TODO 65 | 66 | * [x] test 67 | * [ ] `.vue` lint 68 | * [x] robots.txtとかfaviconとかの扱い 69 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: "2" 2 | services: 3 | apache: 4 | image: httpd:alpine 5 | ports: 6 | - "8080:80" 7 | - "8443:443" 8 | volumes: 9 | - ./dist:/usr/local/apache2/htdocs 10 | - ./modules/httpd.conf:/usr/local/apache2/conf/httpd.conf 11 | nginx: 12 | image: nginx:alpine 13 | ports: 14 | - "8880:80" 15 | - "8843:443" 16 | volumes: 17 | - ./dist:/usr/share/nginx/html 18 | - ./modules/default.conf:/etc/nginx/conf.d/default.conf 19 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleFileExtensions: ['ts', 'js', 'json', 'vue'], 3 | transform: { 4 | '^.+\\.vue$': 'vue-jest', 5 | '^.+\\.tsx?$': 'ts-jest', 6 | }, 7 | testRegex: '\\.spec\\.(ts|tsx)$', 8 | }; 9 | -------------------------------------------------------------------------------- /modules/default.conf: -------------------------------------------------------------------------------- 1 | server { 2 | listen 80; 3 | server_name localhost; 4 | 5 | #charset koi8-r; 6 | #access_log /var/log/nginx/host.access.log main; 7 | 8 | location / { 9 | root /usr/share/nginx/html; 10 | index index.html index.htm; 11 | } 12 | 13 | #error_page 404 /404.html; 14 | 15 | # redirect server error pages to the static page /50x.html 16 | # 17 | error_page 500 502 503 504 /50x.html; 18 | location = /50x.html { 19 | root /usr/share/nginx/html; 20 | } 21 | 22 | # proxy the PHP scripts to Apache listening on 127.0.0.1:80 23 | # 24 | #location ~ \.php$ { 25 | # proxy_pass http://127.0.0.1; 26 | #} 27 | 28 | # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 29 | # 30 | #location ~ \.php$ { 31 | # root html; 32 | # fastcgi_pass 127.0.0.1:9000; 33 | # fastcgi_index index.php; 34 | # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; 35 | # include fastcgi_params; 36 | #} 37 | 38 | # deny access to .htaccess files, if Apache's document root 39 | # concurs with nginx's one 40 | # 41 | #location ~ /\.ht { 42 | # deny all; 43 | #} 44 | } 45 | 46 | -------------------------------------------------------------------------------- /modules/httpd.conf: -------------------------------------------------------------------------------- 1 | # 2 | # This is the main Apache HTTP server configuration file. It contains the 3 | # configuration directives that give the server its instructions. 4 | # See for detailed information. 5 | # In particular, see 6 | # 7 | # for a discussion of each configuration directive. 8 | # 9 | # Do NOT simply read the instructions in here without understanding 10 | # what they do. They're here only as hints or reminders. If you are unsure 11 | # consult the online docs. You have been warned. 12 | # 13 | # Configuration and logfile names: If the filenames you specify for many 14 | # of the server's control files begin with "/" (or "drive:/" for Win32), the 15 | # server will use that explicit path. If the filenames do *not* begin 16 | # with "/", the value of ServerRoot is prepended -- so "logs/access_log" 17 | # with ServerRoot set to "/usr/local/apache2" will be interpreted by the 18 | # server as "/usr/local/apache2/logs/access_log", whereas "/logs/access_log" 19 | # will be interpreted as '/logs/access_log'. 20 | 21 | # 22 | # ServerRoot: The top of the directory tree under which the server's 23 | # configuration, error, and log files are kept. 24 | # 25 | # Do not add a slash at the end of the directory path. If you point 26 | # ServerRoot at a non-local disk, be sure to specify a local disk on the 27 | # Mutex directive, if file-based mutexes are used. If you wish to share the 28 | # same ServerRoot for multiple httpd daemons, you will need to change at 29 | # least PidFile. 30 | # 31 | ServerRoot "/usr/local/apache2" 32 | 33 | # 34 | # Mutex: Allows you to set the mutex mechanism and mutex file directory 35 | # for individual mutexes, or change the global defaults 36 | # 37 | # Uncomment and change the directory if mutexes are file-based and the default 38 | # mutex file directory is not on a local disk or is not appropriate for some 39 | # other reason. 40 | # 41 | # Mutex default:logs 42 | 43 | # 44 | # Listen: Allows you to bind Apache to specific IP addresses and/or 45 | # ports, instead of the default. See also the 46 | # directive. 47 | # 48 | # Change this to Listen on specific IP addresses as shown below to 49 | # prevent Apache from glomming onto all bound IP addresses. 50 | # 51 | #Listen 12.34.56.78:80 52 | Listen 80 53 | 54 | # 55 | # Dynamic Shared Object (DSO) Support 56 | # 57 | # To be able to use the functionality of a module which was built as a DSO you 58 | # have to place corresponding `LoadModule' lines at this location so the 59 | # directives contained in it are actually available _before_ they are used. 60 | # Statically compiled modules (those listed by `httpd -l') do not need 61 | # to be loaded here. 62 | # 63 | # Example: 64 | # LoadModule foo_module modules/mod_foo.so 65 | # 66 | LoadModule mpm_event_module modules/mod_mpm_event.so 67 | #LoadModule mpm_prefork_module modules/mod_mpm_prefork.so 68 | #LoadModule mpm_worker_module modules/mod_mpm_worker.so 69 | LoadModule authn_file_module modules/mod_authn_file.so 70 | #LoadModule authn_dbm_module modules/mod_authn_dbm.so 71 | #LoadModule authn_anon_module modules/mod_authn_anon.so 72 | #LoadModule authn_dbd_module modules/mod_authn_dbd.so 73 | #LoadModule authn_socache_module modules/mod_authn_socache.so 74 | LoadModule authn_core_module modules/mod_authn_core.so 75 | LoadModule authz_host_module modules/mod_authz_host.so 76 | LoadModule authz_groupfile_module modules/mod_authz_groupfile.so 77 | LoadModule authz_user_module modules/mod_authz_user.so 78 | #LoadModule authz_dbm_module modules/mod_authz_dbm.so 79 | #LoadModule authz_owner_module modules/mod_authz_owner.so 80 | #LoadModule authz_dbd_module modules/mod_authz_dbd.so 81 | LoadModule authz_core_module modules/mod_authz_core.so 82 | #LoadModule authnz_ldap_module modules/mod_authnz_ldap.so 83 | #LoadModule authnz_fcgi_module modules/mod_authnz_fcgi.so 84 | LoadModule access_compat_module modules/mod_access_compat.so 85 | LoadModule auth_basic_module modules/mod_auth_basic.so 86 | #LoadModule auth_form_module modules/mod_auth_form.so 87 | #LoadModule auth_digest_module modules/mod_auth_digest.so 88 | #LoadModule allowmethods_module modules/mod_allowmethods.so 89 | #LoadModule isapi_module modules/mod_isapi.so 90 | #LoadModule file_cache_module modules/mod_file_cache.so 91 | #LoadModule cache_module modules/mod_cache.so 92 | #LoadModule cache_disk_module modules/mod_cache_disk.so 93 | #LoadModule cache_socache_module modules/mod_cache_socache.so 94 | #LoadModule socache_shmcb_module modules/mod_socache_shmcb.so 95 | #LoadModule socache_dbm_module modules/mod_socache_dbm.so 96 | #LoadModule socache_memcache_module modules/mod_socache_memcache.so 97 | #LoadModule watchdog_module modules/mod_watchdog.so 98 | #LoadModule macro_module modules/mod_macro.so 99 | #LoadModule dbd_module modules/mod_dbd.so 100 | #LoadModule bucketeer_module modules/mod_bucketeer.so 101 | #LoadModule dumpio_module modules/mod_dumpio.so 102 | #LoadModule echo_module modules/mod_echo.so 103 | #LoadModule example_hooks_module modules/mod_example_hooks.so 104 | #LoadModule case_filter_module modules/mod_case_filter.so 105 | #LoadModule case_filter_in_module modules/mod_case_filter_in.so 106 | #LoadModule example_ipc_module modules/mod_example_ipc.so 107 | #LoadModule buffer_module modules/mod_buffer.so 108 | #LoadModule data_module modules/mod_data.so 109 | #LoadModule ratelimit_module modules/mod_ratelimit.so 110 | LoadModule reqtimeout_module modules/mod_reqtimeout.so 111 | #LoadModule ext_filter_module modules/mod_ext_filter.so 112 | #LoadModule request_module modules/mod_request.so 113 | #LoadModule include_module modules/mod_include.so 114 | LoadModule filter_module modules/mod_filter.so 115 | #LoadModule reflector_module modules/mod_reflector.so 116 | #LoadModule substitute_module modules/mod_substitute.so 117 | #LoadModule sed_module modules/mod_sed.so 118 | #LoadModule charset_lite_module modules/mod_charset_lite.so 119 | #LoadModule deflate_module modules/mod_deflate.so 120 | #LoadModule xml2enc_module modules/mod_xml2enc.so 121 | #LoadModule proxy_html_module modules/mod_proxy_html.so 122 | LoadModule mime_module modules/mod_mime.so 123 | #LoadModule ldap_module modules/mod_ldap.so 124 | LoadModule log_config_module modules/mod_log_config.so 125 | #LoadModule log_debug_module modules/mod_log_debug.so 126 | #LoadModule log_forensic_module modules/mod_log_forensic.so 127 | #LoadModule logio_module modules/mod_logio.so 128 | #LoadModule lua_module modules/mod_lua.so 129 | LoadModule env_module modules/mod_env.so 130 | #LoadModule mime_magic_module modules/mod_mime_magic.so 131 | #LoadModule cern_meta_module modules/mod_cern_meta.so 132 | #LoadModule expires_module modules/mod_expires.so 133 | LoadModule headers_module modules/mod_headers.so 134 | #LoadModule ident_module modules/mod_ident.so 135 | #LoadModule usertrack_module modules/mod_usertrack.so 136 | #LoadModule unique_id_module modules/mod_unique_id.so 137 | LoadModule setenvif_module modules/mod_setenvif.so 138 | LoadModule version_module modules/mod_version.so 139 | #LoadModule remoteip_module modules/mod_remoteip.so 140 | #LoadModule proxy_module modules/mod_proxy.so 141 | #LoadModule proxy_connect_module modules/mod_proxy_connect.so 142 | #LoadModule proxy_ftp_module modules/mod_proxy_ftp.so 143 | #LoadModule proxy_http_module modules/mod_proxy_http.so 144 | #LoadModule proxy_fcgi_module modules/mod_proxy_fcgi.so 145 | #LoadModule proxy_scgi_module modules/mod_proxy_scgi.so 146 | #LoadModule proxy_fdpass_module modules/mod_proxy_fdpass.so 147 | #LoadModule proxy_wstunnel_module modules/mod_proxy_wstunnel.so 148 | #LoadModule proxy_ajp_module modules/mod_proxy_ajp.so 149 | #LoadModule proxy_balancer_module modules/mod_proxy_balancer.so 150 | #LoadModule proxy_express_module modules/mod_proxy_express.so 151 | #LoadModule proxy_hcheck_module modules/mod_proxy_hcheck.so 152 | #LoadModule session_module modules/mod_session.so 153 | #LoadModule session_cookie_module modules/mod_session_cookie.so 154 | #LoadModule session_crypto_module modules/mod_session_crypto.so 155 | #LoadModule session_dbd_module modules/mod_session_dbd.so 156 | #LoadModule slotmem_shm_module modules/mod_slotmem_shm.so 157 | #LoadModule slotmem_plain_module modules/mod_slotmem_plain.so 158 | #LoadModule ssl_module modules/mod_ssl.so 159 | #LoadModule optional_hook_export_module modules/mod_optional_hook_export.so 160 | #LoadModule optional_hook_import_module modules/mod_optional_hook_import.so 161 | #LoadModule optional_fn_import_module modules/mod_optional_fn_import.so 162 | #LoadModule optional_fn_export_module modules/mod_optional_fn_export.so 163 | #LoadModule dialup_module modules/mod_dialup.so 164 | #LoadModule http2_module modules/mod_http2.so 165 | #LoadModule proxy_http2_module modules/mod_proxy_http2.so 166 | #LoadModule lbmethod_byrequests_module modules/mod_lbmethod_byrequests.so 167 | #LoadModule lbmethod_bytraffic_module modules/mod_lbmethod_bytraffic.so 168 | #LoadModule lbmethod_bybusyness_module modules/mod_lbmethod_bybusyness.so 169 | #LoadModule lbmethod_heartbeat_module modules/mod_lbmethod_heartbeat.so 170 | LoadModule unixd_module modules/mod_unixd.so 171 | #LoadModule heartbeat_module modules/mod_heartbeat.so 172 | #LoadModule heartmonitor_module modules/mod_heartmonitor.so 173 | #LoadModule dav_module modules/mod_dav.so 174 | LoadModule status_module modules/mod_status.so 175 | LoadModule autoindex_module modules/mod_autoindex.so 176 | #LoadModule asis_module modules/mod_asis.so 177 | #LoadModule info_module modules/mod_info.so 178 | #LoadModule suexec_module modules/mod_suexec.so 179 | 180 | #LoadModule cgid_module modules/mod_cgid.so 181 | 182 | 183 | #LoadModule cgi_module modules/mod_cgi.so 184 | 185 | #LoadModule dav_fs_module modules/mod_dav_fs.so 186 | #LoadModule dav_lock_module modules/mod_dav_lock.so 187 | #LoadModule vhost_alias_module modules/mod_vhost_alias.so 188 | #LoadModule negotiation_module modules/mod_negotiation.so 189 | LoadModule dir_module modules/mod_dir.so 190 | #LoadModule imagemap_module modules/mod_imagemap.so 191 | #LoadModule actions_module modules/mod_actions.so 192 | #LoadModule speling_module modules/mod_speling.so 193 | #LoadModule userdir_module modules/mod_userdir.so 194 | LoadModule alias_module modules/mod_alias.so 195 | LoadModule rewrite_module modules/mod_rewrite.so 196 | 197 | 198 | # 199 | # If you wish httpd to run as a different user or group, you must run 200 | # httpd as root initially and it will switch. 201 | # 202 | # User/Group: The name (or #number) of the user/group to run httpd as. 203 | # It is usually good practice to create a dedicated user and group for 204 | # running httpd, as with most system services. 205 | # 206 | User daemon 207 | Group daemon 208 | 209 | 210 | 211 | # 'Main' server configuration 212 | # 213 | # The directives in this section set up the values used by the 'main' 214 | # server, which responds to any requests that aren't handled by a 215 | # definition. These values also provide defaults for 216 | # any containers you may define later in the file. 217 | # 218 | # All of these directives may appear inside containers, 219 | # in which case these default settings will be overridden for the 220 | # virtual host being defined. 221 | # 222 | 223 | # 224 | # ServerAdmin: Your address, where problems with the server should be 225 | # e-mailed. This address appears on some server-generated pages, such 226 | # as error documents. e.g. admin@your-domain.com 227 | # 228 | ServerAdmin you@example.com 229 | 230 | # 231 | # ServerName gives the name and port that the server uses to identify itself. 232 | # This can often be determined automatically, but we recommend you specify 233 | # it explicitly to prevent problems during startup. 234 | # 235 | # If your host doesn't have a registered DNS name, enter its IP address here. 236 | # 237 | #ServerName www.example.com:80 238 | 239 | # 240 | # Deny access to the entirety of your server's filesystem. You must 241 | # explicitly permit access to web content directories in other 242 | # blocks below. 243 | # 244 | 245 | AllowOverride none 246 | Require all denied 247 | 248 | 249 | # 250 | # Note that from this point forward you must specifically allow 251 | # particular features to be enabled - so if something's not working as 252 | # you might expect, make sure that you have specifically enabled it 253 | # below. 254 | # 255 | 256 | # 257 | # DocumentRoot: The directory out of which you will serve your 258 | # documents. By default, all requests are taken from this directory, but 259 | # symbolic links and aliases may be used to point to other locations. 260 | # 261 | DocumentRoot "/usr/local/apache2/htdocs" 262 | 263 | # 264 | # Possible values for the Options directive are "None", "All", 265 | # or any combination of: 266 | # Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews 267 | # 268 | # Note that "MultiViews" must be named *explicitly* --- "Options All" 269 | # doesn't give it to you. 270 | # 271 | # The Options directive is both complicated and important. Please see 272 | # http://httpd.apache.org/docs/2.4/mod/core.html#options 273 | # for more information. 274 | # 275 | Options Indexes FollowSymLinks 276 | 277 | # 278 | # AllowOverride controls what directives may be placed in .htaccess files. 279 | # It can be "All", "None", or any combination of the keywords: 280 | # AllowOverride FileInfo AuthConfig Limit 281 | # 282 | AllowOverride All 283 | 284 | # 285 | # Controls who can get stuff from this server. 286 | # 287 | Require all granted 288 | 289 | 290 | # 291 | # DirectoryIndex: sets the file that Apache will serve if a directory 292 | # is requested. 293 | # 294 | 295 | DirectoryIndex index.html 296 | 297 | 298 | # 299 | # The following lines prevent .htaccess and .htpasswd files from being 300 | # viewed by Web clients. 301 | # 302 | 303 | Require all denied 304 | 305 | 306 | # 307 | # ErrorLog: The location of the error log file. 308 | # If you do not specify an ErrorLog directive within a 309 | # container, error messages relating to that virtual host will be 310 | # logged here. If you *do* define an error logfile for a 311 | # container, that host's errors will be logged there and not here. 312 | # 313 | ErrorLog /proc/self/fd/2 314 | 315 | # 316 | # LogLevel: Control the number of messages logged to the error_log. 317 | # Possible values include: debug, info, notice, warn, error, crit, 318 | # alert, emerg. 319 | # 320 | LogLevel warn 321 | 322 | 323 | # 324 | # The following directives define some format nicknames for use with 325 | # a CustomLog directive (see below). 326 | # 327 | LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined 328 | LogFormat "%h %l %u %t \"%r\" %>s %b" common 329 | 330 | 331 | # You need to enable mod_logio.c to use %I and %O 332 | LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\" %I %O" combinedio 333 | 334 | 335 | # 336 | # The location and format of the access logfile (Common Logfile Format). 337 | # If you do not define any access logfiles within a 338 | # container, they will be logged here. Contrariwise, if you *do* 339 | # define per- access logfiles, transactions will be 340 | # logged therein and *not* in this file. 341 | # 342 | CustomLog /proc/self/fd/1 common 343 | 344 | # 345 | # If you prefer a logfile with access, agent, and referer information 346 | # (Combined Logfile Format) you can use the following directive. 347 | # 348 | #CustomLog "logs/access_log" combined 349 | 350 | 351 | 352 | # 353 | # Redirect: Allows you to tell clients about documents that used to 354 | # exist in your server's namespace, but do not anymore. The client 355 | # will make a new request for the document at its new location. 356 | # Example: 357 | # Redirect permanent /foo http://www.example.com/bar 358 | 359 | # 360 | # Alias: Maps web paths into filesystem paths and is used to 361 | # access content that does not live under the DocumentRoot. 362 | # Example: 363 | # Alias /webpath /full/filesystem/path 364 | # 365 | # If you include a trailing / on /webpath then the server will 366 | # require it to be present in the URL. You will also likely 367 | # need to provide a section to allow access to 368 | # the filesystem path. 369 | 370 | # 371 | # ScriptAlias: This controls which directories contain server scripts. 372 | # ScriptAliases are essentially the same as Aliases, except that 373 | # documents in the target directory are treated as applications and 374 | # run by the server when requested rather than as documents sent to the 375 | # client. The same rules about trailing "/" apply to ScriptAlias 376 | # directives as to Alias. 377 | # 378 | ScriptAlias /cgi-bin/ "/usr/local/apache2/cgi-bin/" 379 | 380 | 381 | 382 | 383 | # 384 | # ScriptSock: On threaded servers, designate the path to the UNIX 385 | # socket used to communicate with the CGI daemon of mod_cgid. 386 | # 387 | #Scriptsock cgisock 388 | 389 | 390 | # 391 | # "/usr/local/apache2/cgi-bin" should be changed to whatever your ScriptAliased 392 | # CGI directory exists, if you have that configured. 393 | # 394 | 395 | AllowOverride None 396 | Options None 397 | Require all granted 398 | 399 | 400 | 401 | # 402 | # Avoid passing HTTP_PROXY environment to CGI's on this or any proxied 403 | # backend servers which have lingering "httpoxy" defects. 404 | # 'Proxy' request header is undefined by the IETF, not listed by IANA 405 | # 406 | RequestHeader unset Proxy early 407 | 408 | 409 | 410 | # 411 | # TypesConfig points to the file containing the list of mappings from 412 | # filename extension to MIME-type. 413 | # 414 | TypesConfig conf/mime.types 415 | 416 | # 417 | # AddType allows you to add to or override the MIME configuration 418 | # file specified in TypesConfig for specific file types. 419 | # 420 | #AddType application/x-gzip .tgz 421 | # 422 | # AddEncoding allows you to have certain browsers uncompress 423 | # information on the fly. Note: Not all browsers support this. 424 | # 425 | #AddEncoding x-compress .Z 426 | #AddEncoding x-gzip .gz .tgz 427 | # 428 | # If the AddEncoding directives above are commented-out, then you 429 | # probably should define those extensions to indicate media types: 430 | # 431 | AddType application/x-compress .Z 432 | AddType application/x-gzip .gz .tgz 433 | 434 | # 435 | # AddHandler allows you to map certain file extensions to "handlers": 436 | # actions unrelated to filetype. These can be either built into the server 437 | # or added with the Action directive (see below) 438 | # 439 | # To use CGI scripts outside of ScriptAliased directories: 440 | # (You will also need to add "ExecCGI" to the "Options" directive.) 441 | # 442 | #AddHandler cgi-script .cgi 443 | 444 | # For type maps (negotiated resources): 445 | #AddHandler type-map var 446 | 447 | # 448 | # Filters allow you to process content before it is sent to the client. 449 | # 450 | # To parse .shtml files for server-side includes (SSI): 451 | # (You will also need to add "Includes" to the "Options" directive.) 452 | # 453 | #AddType text/html .shtml 454 | #AddOutputFilter INCLUDES .shtml 455 | 456 | 457 | # 458 | # The mod_mime_magic module allows the server to use various hints from the 459 | # contents of the file itself to determine its type. The MIMEMagicFile 460 | # directive tells the module where the hint definitions are located. 461 | # 462 | #MIMEMagicFile conf/magic 463 | 464 | # 465 | # Customizable error responses come in three flavors: 466 | # 1) plain text 2) local redirects 3) external redirects 467 | # 468 | # Some examples: 469 | #ErrorDocument 500 "The server made a boo boo." 470 | #ErrorDocument 404 /missing.html 471 | #ErrorDocument 404 "/cgi-bin/missing_handler.pl" 472 | #ErrorDocument 402 http://www.example.com/subscription_info.html 473 | # 474 | 475 | # 476 | # MaxRanges: Maximum number of Ranges in a request before 477 | # returning the entire resource, or one of the special 478 | # values 'default', 'none' or 'unlimited'. 479 | # Default setting is to accept 200 Ranges. 480 | #MaxRanges unlimited 481 | 482 | # 483 | # EnableMMAP and EnableSendfile: On systems that support it, 484 | # memory-mapping or the sendfile syscall may be used to deliver 485 | # files. This usually improves server performance, but must 486 | # be turned off when serving from networked-mounted 487 | # filesystems or if support for these functions is otherwise 488 | # broken on your system. 489 | # Defaults: EnableMMAP On, EnableSendfile Off 490 | # 491 | #EnableMMAP off 492 | #EnableSendfile on 493 | 494 | # Supplemental configuration 495 | # 496 | # The configuration files in the conf/extra/ directory can be 497 | # included to add extra features or to modify the default configuration of 498 | # the server, or you may simply copy their contents here and change as 499 | # necessary. 500 | 501 | # Server-pool management (MPM specific) 502 | #Include conf/extra/httpd-mpm.conf 503 | 504 | # Multi-language error messages 505 | #Include conf/extra/httpd-multilang-errordoc.conf 506 | 507 | # Fancy directory listings 508 | #Include conf/extra/httpd-autoindex.conf 509 | 510 | # Language settings 511 | #Include conf/extra/httpd-languages.conf 512 | 513 | # User home directories 514 | #Include conf/extra/httpd-userdir.conf 515 | 516 | # Real-time info on requests and configuration 517 | #Include conf/extra/httpd-info.conf 518 | 519 | # Virtual hosts 520 | #Include conf/extra/httpd-vhosts.conf 521 | 522 | # Local access to the Apache HTTP Server Manual 523 | #Include conf/extra/httpd-manual.conf 524 | 525 | # Distributed authoring and versioning (WebDAV) 526 | #Include conf/extra/httpd-dav.conf 527 | 528 | # Various default settings 529 | #Include conf/extra/httpd-default.conf 530 | 531 | # Configure mod_proxy_html to understand HTML4/XHTML1 532 | 533 | Include conf/extra/proxy-html.conf 534 | 535 | 536 | # Secure (SSL/TLS) connections 537 | #Include conf/extra/httpd-ssl.conf 538 | # 539 | # Note: The following must must be present to support 540 | # starting without SSL on platforms with no /dev/random equivalent 541 | # but a statically compiled-in mod_ssl. 542 | # 543 | 544 | SSLRandomSeed startup builtin 545 | SSLRandomSeed connect builtin 546 | 547 | 548 | -------------------------------------------------------------------------------- /modules/typescript.js: -------------------------------------------------------------------------------- 1 | const tsLoader = { 2 | loader: 'ts-loader', 3 | options: { appendTsSuffixTo: [/\.vue$/] }, 4 | }; 5 | 6 | module.exports = function() { 7 | // Add .ts extension for store, middleware and more 8 | this.nuxt.options.extensions.push('ts'); 9 | // Extend build 10 | this.extendBuild(config => { 11 | // Add TypeScript loader 12 | config.module.rules.push({ test: /((client|server)\.js)|(\.tsx?)$/, ...tsLoader }); 13 | // Add TypeScript loader for vue files 14 | config.module.rules 15 | .filter(rule => rule.loader === 'vue-loader') 16 | .forEach(rule => (rule.options.loaders.ts = tsLoader)); 17 | // Add .ts extension in webpack resolve 18 | if (config.resolve.extensions.indexOf('.ts') === -1) { 19 | config.resolve.extensions.push('.ts'); 20 | } 21 | }); 22 | }; 23 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | const parseArgs = require('minimist'); 2 | const postcssImport = require('postcss-import'); 3 | const postcssCustomProperties = require('postcss-custom-properties'); 4 | const postcssCustomMedia = require('postcss-custom-media'); 5 | const postcssNested = require('postcss-nested'); 6 | const postcssColorHexAlpha = require('postcss-color-hex-alpha'); 7 | const postcssFixes = require('postcss-fixes'); 8 | const postcssUrl = require('postcss-url'); 9 | const autoprefixer = require('autoprefixer'); 10 | 11 | const argv = parseArgs(process.argv.slice(2), { 12 | alias: { H: 'hostname', p: 'port' }, 13 | string: ['H'], 14 | unknown: _parameter => false, 15 | }); 16 | const port = argv.port || process.env.PORT || process.env.npm_package_config_nuxt_port || '3000'; 17 | const host = argv.hostname || process.env.HOST || process.env.npm_package_config_nuxt_host || 'localhost'; 18 | const postcss = [ 19 | postcssImport(), 20 | postcssCustomProperties({ preserve: false }), 21 | postcssCustomMedia(), 22 | postcssNested(), 23 | postcssColorHexAlpha(), 24 | postcssFixes(), 25 | postcssUrl(), 26 | autoprefixer(), 27 | ]; 28 | // 動的ルーティングのページをある程度静的に吐き出したい箇所はここにセット 29 | const routes = [ 30 | // '/members/1', '/members/2', '/members/3' 31 | ]; 32 | 33 | /* 34 | * meta 35 | */ 36 | const title = 'Nuxt.js template - TypeScript, PostCSS'; 37 | const description = 'Nuxt.js project'; 38 | const metaImage = 'https://dummyimage.com/300x200/3b8070/fff.png&text=Nuxt.js+template'; 39 | const baseUrl = process.env.BASE_URL || `http://${host}:${port}`; 40 | const og = [ 41 | // { property: 'og:type', content: '' }, 42 | // { property: 'og:image', content: '' }, 43 | // { property: 'og:url', content: '' }, 44 | // { property: 'og:site_name', content: '' }, 45 | ]; 46 | const twitter = [ 47 | // { property: 'twitter:card', content: '' }, 48 | // { property: 'twitter:site', content: '' }, 49 | ]; 50 | const meta = [ 51 | { charset: 'utf-8' }, 52 | { 'http-equiv': 'x-ua-compatible', content: 'ie=edge' }, 53 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 54 | { hid: 'description', name: 'description', content: description }, 55 | { hid: 'itempropName', itemprop: 'name', content: title }, 56 | { hid: 'itempropDesc', itemprop: 'description', content: description }, 57 | { hid: 'itempropImage', itemprop: 'image', content: metaImage }, 58 | { property: 'og:title', content: title }, 59 | { property: 'og:description', content: description }, 60 | ...og, 61 | ...twitter, 62 | ]; 63 | 64 | /* 65 | * sitemap 66 | */ 67 | const sitemap = { 68 | path: '/sitemap.xml', 69 | hostname: baseUrl, 70 | cacheTime: 1000 * 60 * 15, 71 | generate: true, // Enable me when using nuxt generate 72 | // exclude: [], 73 | routes, 74 | }; 75 | 76 | module.exports = { 77 | srcDir: 'src/', 78 | env: { baseUrl }, 79 | head: { title, meta, link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }] }, 80 | /* 81 | ** Customize the progress-bar color 82 | */ 83 | loading: { color: '#3B8070' }, 84 | /* 85 | * generate command configration 86 | */ 87 | generate: { routes }, 88 | /* 89 | * sitemap configuration 90 | */ 91 | sitemap, 92 | /* 93 | ** Build configuration 94 | */ 95 | // ここでvariablesを渡しても、postcss-custom-propertiesが発動しない 96 | css: [].map(src => ({ src, lang: 'postcss' })), 97 | build: { postcss, vendor: ['babel-polyfill'] }, 98 | modules: ['@nuxtjs/axios', '@nuxtjs/sitemap', '~~/modules/typescript.js'], 99 | extractCSS: true, // 別途CSSを出力するのではなく、htmlのstyleタグに埋め込まれる 100 | axios: {}, 101 | }; 102 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-ts", 3 | "version": "0.0.1", 4 | "private": true, 5 | "dependencies": { 6 | "@nuxtjs/axios": "^5.0.0", 7 | "@nuxtjs/sitemap": "^0.1.1", 8 | "axios": "^0.18.0", 9 | "babel-polyfill": "^6.26.0", 10 | "libraries-frontend-framelunch": "framelunch/libraries-frontend-framelunch", 11 | "nuxt": "^1.3.0", 12 | "vue-property-decorator": "^6.0.0", 13 | "vuex-class": "^0.3.0" 14 | }, 15 | "scripts": { 16 | "precommit": "lint-staged", 17 | "dev": "nuxt", 18 | "prebuild": "npm run clean", 19 | "build": "nuxt build", 20 | "start": "nuxt start", 21 | "pregenerate": "npm run clean", 22 | "generate": "nuxt generate", 23 | "clean": "rimraf dist", 24 | "guard": "run-p test:watch typecheck:watch", 25 | "test": "jest", 26 | "test:watch": "jest --watch", 27 | "test:coverage": "jest --coverage", 28 | "lint": "run-p lint:*", 29 | "lint:style": "stylelint './src/**/*.css'", 30 | "lint:script": "tslint './src/**/*.ts'", 31 | "lint:vue": "run-p lint:vue:*", 32 | "lint:vue:style": "stylelint --config .vue.stylelintrc.js './src/**/*.vue'", 33 | "fix": "prettier --write './src/**/*.{ts,js,json,css,vue}'", 34 | "typecheck": "tsc --noEmit", 35 | "typecheck:watch": "tsc --noEmit -w" 36 | }, 37 | "lint-staged": { 38 | "subTaskConcurrency": 1, 39 | "linters": { 40 | "*.ts": [ 41 | "prettier --write", 42 | "tslint", 43 | "git add" 44 | ], 45 | "*.css": [ 46 | "prettier --write", 47 | "stylelint", 48 | "git add" 49 | ], 50 | "*.json": [ 51 | "prettier --write", 52 | "git add" 53 | ], 54 | "*.vue": [ 55 | "prettier --write", 56 | "stylelint --config .vue.stylelintrc.js", 57 | "git add" 58 | ] 59 | } 60 | }, 61 | "browserslist": [ 62 | "ie 11", 63 | "ios >= 10", 64 | "> 1% in JP", 65 | "not ie <= 10", 66 | "not chrome 49" 67 | ], 68 | "devDependencies": { 69 | "@types/jest": "^23.1.2", 70 | "@types/node": "^10.3.6", 71 | "@vue/test-utils": "^1.0.0-beta.12", 72 | "http-server": "^0.11.1", 73 | "husky": "^0.14.3", 74 | "jest": "^23.2.0", 75 | "jest-vue-preprocessor": "^1.3.1", 76 | "lint-staged": "^7.0.0", 77 | "npm-run-all": "^4.1.2", 78 | "postcss-color-hex-alpha": "^3.0.0", 79 | "postcss-custom-media": "^6.0.0", 80 | "postcss-custom-properties": "^7.0.0", 81 | "postcss-fixes": "^2.0.1", 82 | "postcss-import": "^11.1.0", 83 | "postcss-loader": "^2.1.1", 84 | "postcss-nested": "^3.0.0", 85 | "postcss-url": "^7.3.1", 86 | "prettier": "^1.11.1", 87 | "rimraf": "^2.6.2", 88 | "stylelint": "^9.1.1", 89 | "stylelint-config-framelunch": "framelunch/stylelint-config-framelunch#v0.3.0", 90 | "stylelint-processor-html": "^1.0.0", 91 | "ts-jest": "^22.4.1", 92 | "ts-loader": "^3.5.0", 93 | "tslint": "^5.9.1", 94 | "tslint-config-prettier": "^1.9.0", 95 | "tslint-plugin-prettier": "^1.3.0", 96 | "typescript": "^2.7.2", 97 | "vue-jest": "^2.1.1" 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framelunch/nuxt-typescript-template/d4018403af9648097be8d24c16c1d190dfe97174/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/components/Card.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 20 | 21 | 27 | -------------------------------------------------------------------------------- /src/interfaces/Person.ts: -------------------------------------------------------------------------------- 1 | export interface Person { 2 | id: number; 3 | firstName: string; 4 | lastName: string; 5 | } 6 | 7 | export type People = Person[]; 8 | 9 | export interface PersonEntity { 10 | id: number; 11 | first_name: string; 12 | last_name: string; 13 | } 14 | -------------------------------------------------------------------------------- /src/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | This directory contains your Application Middleware. 4 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts). 5 | 6 | More informations about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing#middleware 8 | 9 | **This directory is not required, you can delete it if you don't want to use it.** 10 | -------------------------------------------------------------------------------- /src/pages/about/index.spec.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies */ 2 | import { shallowMount } from '@vue/test-utils'; 3 | 4 | import Index from './index.vue'; 5 | 6 | describe('about/index', () => { 7 | it('renders props.msg', () => { 8 | const msg = 'About'; 9 | const wrapper = shallowMount(Index, { 10 | propsData: { msg }, 11 | }); 12 | 13 | expect(wrapper.text()).toEqual(msg); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /src/pages/about/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | -------------------------------------------------------------------------------- /src/pages/index.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 58 | 59 | 84 | -------------------------------------------------------------------------------- /src/pages/members/_id/edit.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | -------------------------------------------------------------------------------- /src/pages/members/_id/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | -------------------------------------------------------------------------------- /src/pages/members/edit.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 9 | 10 | 15 | -------------------------------------------------------------------------------- /src/pages/members/show.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 9 | 10 | 15 | -------------------------------------------------------------------------------- /src/static/.htaccess: -------------------------------------------------------------------------------- 1 | # Rewrite 2 | RewriteEngine On 3 | RewriteBase / 4 | # TODO: 直接覗かれたら404を返したい！これだと全殺しなのでだめ 5 | # RewriteRule ^members/edit.*$ - [R=404,L] 6 | # RewriteRule ^members/show.*$ - [R=404,L] 7 | # membersの動的URLはそれぞれのhtmlを表示する あとはvueがよしなにやってくれる 8 | RewriteRule ^members/\d+$ members/show/index.html 9 | RewriteRule ^members/\d+/edit$ members/edit/index.html 10 | -------------------------------------------------------------------------------- /src/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framelunch/nuxt-typescript-template/d4018403af9648097be8d24c16c1d190dfe97174/src/static/favicon.ico -------------------------------------------------------------------------------- /src/static/robots.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framelunch/nuxt-typescript-template/d4018403af9648097be8d24c16c1d190dfe97174/src/static/robots.txt -------------------------------------------------------------------------------- /src/store/count.ts: -------------------------------------------------------------------------------- 1 | export interface State { 2 | count: number; 3 | } 4 | 5 | export const state = () => ({ count: 0 } as State); 6 | 7 | /* 8 | * getter stateを規則的に加工したいときはこれでOK 9 | * @Getter('count/count100') count100: number; で{{count100}}でとれるようになる 10 | */ 11 | export const getters = { 12 | count100(currentState: State) { 13 | return currentState.count * 100; 14 | }, 15 | }; 16 | 17 | /* 18 | * mutation ここでstateを変更する。複雑なことはなるべくactionでやる 19 | * こいつを直接呼ぶことはあんまないっていうか、多分アンチパターン 20 | */ 21 | export const mutations = { 22 | addCount(currentState: State, add: number) { 23 | currentState.count += add; 24 | }, 25 | }; 26 | 27 | /* 28 | * action stateに反映したい値を取得・作成する。非同期処理もここ。 29 | * @Action('count/countup') onCountUpClick: void; 30 | * @Action('count/countdown') onCountDownClick: void; 31 | * で@click="onCountDownClick" みたいな 32 | */ 33 | export const actions = { 34 | countup({ commit }: IncludeCommitObject) { 35 | commit('addCount', 1); 36 | }, 37 | countdown({ commit }: IncludeCommitObject) { 38 | commit('addCount', -1); 39 | }, 40 | }; 41 | 42 | /* 43 | * TODO 強引 44 | */ 45 | interface IncludeCommitObject { 46 | commit(action: string, value: any): void; 47 | } 48 | -------------------------------------------------------------------------------- /src/store/index.ts: -------------------------------------------------------------------------------- 1 | import { AxiosRequestConfig } from 'axios'; 2 | 3 | import { People, Person, PersonEntity } from '../interfaces/Person'; 4 | 5 | export interface State { 6 | people: People; 7 | } 8 | 9 | export const state = () => ({ people: [] } as State); 10 | 11 | /* 12 | * mutation ここでstateを変更する。複雑なことはなるべくactionでやる 13 | */ 14 | export const mutations = { 15 | setPeople(currentState: State, people: People) { 16 | currentState.people = people; 17 | }, 18 | }; 19 | 20 | /* 21 | * action stateに反映したい値を取得・作成する。非同期処理もここ。 22 | * 各componentからはこれを呼ぶ @Action('ACTION_NAME') onButtonClick: void; みたいな。 23 | */ 24 | export const actions = { 25 | async nuxtServerInit({ commit }: IncludeCommitObject, { app, isStatic, isDev, isHMR, route }: NuxtApp) { 26 | if (isStatic || route.name !== 'index') { 27 | return; 28 | } 29 | 30 | const people = await app.$axios.$get('./random-data.json'); 31 | commit( 32 | 'setPeople', 33 | people.slice(0, 20).map( 34 | person => 35 | ({ 36 | id: person.id, 37 | firstName: person.first_name, 38 | lastName: person.last_name, 39 | } as Person), 40 | ), 41 | ); 42 | }, 43 | }; 44 | 45 | /* 46 | * TODO 強引 47 | */ 48 | interface IncludeCommitObject { 49 | commit(action: string, value: any): void; 50 | } 51 | 52 | interface NuxtApp { 53 | app: { 54 | $axios: { 55 | $get(url: string, config?: AxiosRequestConfig): Promise; 56 | }; 57 | }; 58 | route: { name: string }; 59 | isStatic: boolean; 60 | isDev: boolean; 61 | isHMR: boolean; 62 | } 63 | -------------------------------------------------------------------------------- /src/styles/keyframes.css: -------------------------------------------------------------------------------- 1 | @import "libraries-frontend-framelunch/css/_keyframes.css"; 2 | -------------------------------------------------------------------------------- /src/styles/reset.css: -------------------------------------------------------------------------------- 1 | @import "libraries-frontend-framelunch/css/_reset.css"; 2 | -------------------------------------------------------------------------------- /src/styles/variables.css: -------------------------------------------------------------------------------- 1 | @import "libraries-frontend-framelunch/css/_variables.css"; 2 | 3 | :root { 4 | --color-text: #f0f0f0; 5 | } 6 | -------------------------------------------------------------------------------- /src/types/process.d.ts: -------------------------------------------------------------------------------- 1 | declare namespace NodeJS { 2 | interface Process { 3 | client: boolean; 4 | server: boolean; 5 | browser: boolean; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/types/vue-shims.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import Vue from 'vue'; 3 | 4 | export default Vue; 5 | } 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "es2015", 5 | "lib": ["dom", "es2015", "es2017"], 6 | "allowJs": true, 7 | "sourceMap": true, 8 | "removeComments": true, 9 | "strict": true, 10 | "noImplicitAny": true, 11 | "strictNullChecks": true, 12 | "strictFunctionTypes": true, 13 | "strictPropertyInitialization": false, 14 | "noImplicitThis": true, 15 | "moduleResolution": "node", 16 | "baseUrl": ".", 17 | "paths": { 18 | "~/*": ["./src/*"] 19 | }, 20 | "allowSyntheticDefaultImports": true, 21 | "experimentalDecorators": true, 22 | "emitDecoratorMetadata": true 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": ["tslint-plugin-prettier"], 3 | "defaultSeverity": "error", 4 | "extends": [ 5 | "tslint:recommended", // https://github.com/palantir/tslint/blob/master/src/configs/recommended.ts 6 | "tslint-config-prettier" 7 | ], 8 | "rules": { 9 | // コンソール禁止 無効化 babel挟むとかしてどっかではずせばよい 10 | "no-console": [false], 11 | // 文字列はシングルクォート JSXはダブル テンプレがらみやエスケープ絡みは適当 12 | "quotemark": [true, "single", "jsx-double", "avoid-template", "avoid-escape"], 13 | // オブジェクトのキーをa-z順 めんどくさすぎるので無効化 14 | "object-literal-sort-keys": [false], 15 | // import順をa-z順 めんどくさすぎるので無効化 16 | "ordered-imports": [false], 17 | // interfaceはIはじまりで命名 無効化 Microsoftのクセが有る人にはそっちのほうがいいんだけど。 18 | "interface-name": [false], 19 | // アローファンクションの引数をカッコで括る 有効 ただし引数が1つだけの場合は無効化 20 | "arrow-parens": [true, "ban-single-arg-parens"], 21 | // クラスのアクセス修飾子強制 JSに寄せるため無効化 22 | "member-access": [false], 23 | // クラスのメンバをa-z順 めんどくさすぎるので無効化 24 | "member-ordering": [false], 25 | // 変数名予約語禁止、lowerCase or UPPER_CASE、アンスコ始まりOK 26 | "variable-name": [true, "ban-keywords", "check-format", "allow-leading-underscore"], 27 | // namespace禁止 ただし型定義の際には許可する 28 | "no-namespace": [true, "allow-declarations"], 29 | // ifやwhileなど{}が必要な構文は必須 ただし同一行に書いちゃう場合はスルー 30 | "curly": [true, "ignore-same-line"], 31 | 32 | /* 33 | * enable prettier 34 | */ 35 | "prettier": true 36 | } 37 | } 38 | --------------------------------------------------------------------------------