本稿について
本稿はサイト運営者が学んだことなどを記したメモの内容です。
全てが正確な情報とは限りません。ご注意ください。また修正するべき点は適時修正していきます
全てが正確な情報とは限りません。ご注意ください。また修正するべき点は適時修正していきます
#vue
プロジェクトの作成
$ npx create-nuxt-app project-name
※ yarnでも可能
プロジェクト名の設定
? Project name: project-name
※ デフォルトだと
npx create-nuxt-app で指定したプロジェクト名になる言語の選択
? Programming language: (Use arrow keys)
❯ JavaScript
TypeScript
パッケージ管理の選択
? Package manager: (Use arrow keys)
❯ Yarn
Npm
UIフレームワークの選択
? Project name: focusup-web
? Programming language: JavaScript
? Package manager: Npm
? UI framework:
None
Ant Design Vue
Bootstrap Vue
Buefy
Bulma
Chakra UI
Element
❯ Framevuerk
iView
Tachyons
Tailwind CSS
Vuesax
Vuetify.js
追加するモジュールの選択
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ Axios
◯ Progressive Web App (PWA)
◯ Content
コード規約管理ツールの追加
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ ESLint
◯ Prettier
◯ Lint staged files
◯ StyleLint
◯ Commitlint
テストフレームワークの選択
? Testing framework:
None
❯ Jest
AVA
WebdriverIO
レンダリングのモードの選択
? Rendering mode:
❯ Universal (SSR / SSG)
Single Page App
サーバー(node) で動かすか, SPAで動かすか
? Deployment target: (Use arrow keys)
❯ Server (Node.js hosting)
Static (Static/JAMStack hosting)
jamstackについてはこちらを参照
開発ツールを追加する (option)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ jsconfig.json (Recommended for VS Code if you're not using typescript)
◯ Semantic Pull Requests
◯ Dependabot (For auto-updating dependencies, GitHub only)
※ jsconfigについてはこちら
※ Semantic Pull Requestsについてはこちら
※ Dependabotについてはこちら
CIツール
? Continuous integration: (Use arrow keys)
❯ None
GitHub Actions (GitHub only)
githubを選択すると usernameを指定する
? What is your GitHub username? hogehoge
リポジトリ管理ツール(Gitのみ)
? Version control system: (Use arrow keys)
❯ Git
None
これだけでプロジェクトできた
🎉 Successfully created project project-name
To get started:
cd project-name
npm run dev
To build & start for production:
cd project-name
npm run build
npm run start
To test:
cd focusup-web
npm run test
[参考]