Vue3.0はプロジェクトの迅速な構築を開始します（1）

勉強しすぎると混乱します。勉強しないと混乱します。

1足場を設置する

npm install -g @vue/cli
# OR
yarn global add @vue/cli

2バージョンVueCLIv4.5.7を確認します

vue -V

3プロジェクトをビルドします

vue create vue3.0

? Please pick a preset: (Use arrow keys)            //请选择预选项
> Default ([Vue 2] babel, eslint)                   //使用Vue2默认模板进行创建
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)   //使用Vue3默认模板进行创建
  Manually select features                          //手动选择(自定义)的意思

現時点では、3番目のオプションを手動で選択します。選択時にEnterキーを押すことで実現できます。（現時点で上記の3つのオプションがない場合、説明されているvue-cliは古いバージョンであり、更新する必要があります。）

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors             //CSS预处理器
 (*) Linter / Formatter             //格式化工具
 ( ) Unit Testing                   //单元测试
 ( ) E2E Testing                    //E2E测试

TypeScriptオプションを選択し、Enterキーを押して次のレベルの選択に入ります

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

ここで3.xバージョンを選択するには、Enterをクリックします。

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

するかどうかの形でJSXをコンパイルTypeScriptしてBabel。ここでは、我々はまた、選択しましたn

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
  TSLint (deprecated)

次にESLint、いくつかの構成があります。ここでは最初の項目を選択しますが、デフォルトは問題ありません。Enterキーを押すと、追加されたlint機能を選択できるようになります。

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save         //保存的时候进行Lint
 ( ) Lint and fix on commit   //需要帮你进行fix（修理），这项我们不进行选择

Enterキーを押した後、これらの構成ファイルを個別に保存するか、package.jsonファイルに直接保存するかを選択できます。ここでの選択は別のファイルに配置されます。

Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files

最後の質問は、これらの構成を保存して、次回直接使用する必要があるかどうかです。ここでは（n）を使用しないことを選択します。無関心にあなたは自分で選ぶことができます

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

静かに待ってください-------インストールが完了したことを示す次のメッセージが表示されます。

Done in 10.33s.


 $ cd vue3
 $ npm run serve

プロンプトが表示されたらコマンドラインでcd vue3プロジェクトを入力し、Enterキーをnpm run serve押してプロジェクトプレビューを開きます。このとき、2つのアドレスが与えられ、どちらも現在のプロジェクトにアクセスできます。

根据提示在命令行输入cd vue3-1进入项目，然后再输入yarn serve开启项目预览。这时候就会给出两个地址，都可以访问到现在的项目.

ブラウザのアドレスバーにアドレスを入力し、次のページを参照して、インストールが正常であることを示します。

これはプロジェクトの設定と同じくらい簡単です。次のステップは基本的な使用法を学ぶことです

Vue3.0はプロジェクトの迅速な構築を開始します（1）

おすすめ