(記載時からvue_cliのバージョンが変化しています。)
Vue.jsの勉強を兼ねて、ポートフォリオサイトをVue.jsで作成してみました。
現在はコンテンツが少ないのでVueの利点をですが、将来的にページ数や内容を増やすときの改修をしやすくしたいな&SPAとして運用していきたいなという期待も込めてのVue利用です。
vue.cliを利用して環境を作成する
まずは、vue.cliを利用してVue.jsの環境を作成します。
(node,yarn,vuecliはインストール済みです)
$ vue create test
どういう環境で作成するかを質問されるのでManuallyを選択します。
(defaultでもいいかもしれませんが、今回はSCSSを使いたかったので)
Vue CLI v3.5.1
┌───────────────────────────┐
│ Update available: 3.5.5 │
└───────────────────────────┘
? Please pick a preset:
default (babel, eslint)
❯ Manually select features
使いたい機能にspaceキーでチェックを入れます。
今回はBabel,CSS Pre-processors,Linterにチェックを入れてみます。
Vue CLI v3.5.1
┌───────────────────────────┐
│ Update available: 3.5.5 │
└───────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project:
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◯ Router
◯ Vuex
❯◉ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
各機能のオプションを色々質問されます。
自分が使いたいものを選択してEnterを押すだけです。
今回は下のような設定にしてみました。
? Check the features needed for your project: Babel, CSS Pre-processors, Linter
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In packag
e.json
環境設定が開始され、成功すると"Successfully created project test."と表示されるので
後は下に書かれているように、cd test > yarn serve を行い、
http://localhost:8080/
にアクセスするとおなじみの画面が表示されます。
success Saved lockfile.
✨ Done in 14.10s.
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project test.
👉 Get started with the following commands:
$ cd test
$ yarn serve
