3
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Vueを利用してポートフォリオを作成してみる(1/3)

(記載時から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

スクリーンショット 2019-04-06 15.11.11.png

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
3
Help us understand the problem. What are the problem?