Vue 3：プロジェクトの作成方法

Vue 3 プロジェクトの作成方法

Vue3のプロジェクト作成方法をまとめます。

事前準備

プロジェクト作成前にVue3の環境作成を行います。

1. Node.jsのインストール

Node.jsをインストールします。
→ 過去記事：Node.js：#1 インストールする

2. @vue/cliのインストール

@vue/cliをインストールします。

npm install -g @vue/cli

プロジェクト作成

作業フォルダでプロジェクト作成することで、プロジェクトのサブフォルダが作成されいます。

1. プロジェクトの作成

以下コマンドを入力します。

npx vue create プロジェクト名

      Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features
    

      >(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
    

      ? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x 
  2.x 
    

      ? Use class-style component syntax? (y/N) 
    

"y"を入力

      ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) 
    

      > ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier 
    

      Pick additional lint features: (Press  to select,  to toggle all,  to invert selection, and  to 
        proceed)
        >(*) Lint on save
         ( ) Lint and fix on commit (requires Git)
    

? Save this as a preset for future projects? (y/N)