【Vueレッスン1】ベビーシッターレベル:ゼロからVUE開発環境の構築とプロジェクトの開始

一、Vueとは何か
Vueはユーザーインタフェースを構築するための漸進的なフレームワークで、「読み方がViewに似ていることに注意し、著者の初志もViewの機能を果たす」とし、Vueはレイヤーだけを重視している点はReactとそっくりで、Vueの特徴は:

簡単、使いやすい

フレキシブル

高効率

二、Vue環境構築
nodeをインストールして、npmとyarnを使ってまずnodeをインストールして、公式サイトに行ってダウンロードすることができます:https://nodejs.org/en/download/current/対応するバージョンをダウンロードしてインストールすればいいです.
MacパソコンにもHomebrewでインストールできます

brew install node 

インストール済みnodeはnpm「nodeのパッケージマネージャ」を持参し、インストール完了後コマンドラインに入力します

node -v

次のnodeのバージョン情報を見ると、インストールに成功しました.

:node -v
v12.13.0

npmでVueをインストールする
コマンドラインに次のコマンドを入力するとインストールが完了します.

//     
npm install -g vue

エラーが発生した場合はsudoを入力するかroot IDでインストールします

sudo install -g vue

vue-Vを使用してインストールに成功したかどうかを確認し、出版番号が表示された場合はインストールに成功したことを示します.

:vue -V      //          -V
2.9.6

yarn「npmに代わるパッケージマネージャ」でインストール
yarnを使用するにはyarnをインストールする必要があります.ここではnpmを使用してyarnをインストールします.

//     
npm install yarn -g 

yarn環境変数を構成します.たとえば、私の環境変数は~/.bash_profileに保存され、vimコマンドで編集されます.

vim ~/.bash_profile

以下の構成を行います.

# yarn
export PATH="$PATH:`yarn global bin`"

cli「コマンドラインツール」を使用する
上記の参照またはvueのインストールに加えて、vue-cli「足場ツール」vue-cliは足場ツール「ツールセットであり、vueプロジェクトを迅速に作成できます」と同様にnpm or yarnを使用してvue-cliをインストールすることができます.グローバルにインストールします.

npm install -g vue-cli 
//     
yarn add -g vue-cli

インストールが完了したら、vue-Vを入力してインストールに成功したかどうかを確認するか、vue-listを使用して上記の内容を確認すると、vue-cli足場ツールのインストールに成功したことを証明します.
三、vue-cliを使用してプロジェクトを作成する
1、新しいディレクトリをgitディレクトリの下に置く

 cd git
 mkdir vue-demo
 cd vue-demo

2、vue-cliを使用してプロジェクトを作成する

vue init webpack firstvuedemo

ここのvueプロジェクトはwebpackに基づいています.上記のコマンドを使用してfirstvuedemoというvueプロジェクトを作成することができます.上記のコマンドを入力すると、テンプレートのダウンロードを開始し、プロジェクト名の「自分で書けばいい」を入力し、車に戻ります.yesが現れたら直接車に戻ります「今からそうしましょう.なぜか気にしないでください.でも、輝兄のreact-antd proチュートリアルを見たらわかります.最後にnpmかyarnを使ってパッケージを管理するようにヒントを与えました.私が選んだのはyarnです」
ピットガイド:UseEslint Loader(y/n)?ステップ時にnを入力して車に戻ります.そうしないとuseEslint仕様が選択され、Formmatのレイアウトが勝手にできなくなります.yesソリューションをうっかり選択した場合は、次のようになります.
1.開く/config/index.jsファイル、見つかりました:

    // Use Eslint Loader?
    // If true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    
    //   true   false  
    useEslint: false, 

2.ルートディレクトリを開く/.eslintrc.js

	// add your custom rules here
    rules: {
     
    // allow async-await
    
    //     
    'generator-star-spacing': 'off',
    'indent': ['off', 0],
     "space-before-function-paren": 0,

    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
    }

プロジェクトの作成に成功し、npmやyarnを使用してインストールできない場合は、ソースを切り替えると「tabaoのソースは素晴らしい」となります.上記のヒントに従って、プロジェクトに入り、プロジェクトを実行して結果を見てみましょう.
3、運行項目

cd firstvuedemo
//    
yarn run dev

Webpackを使用してサービスを開始し、コンパイルして完了すると、プロジェクトの実行を促すアドレスのデフォルトは次のとおりです.http://localhost:8080ブラウザにhttp://localhost:8080と入力して結果を確認したらどうですか.vue-cliを使用してvueプロジェクトを作成しましたが、デフォルトのホームページはVueの紹介です.自分のプロジェクトの修正をすればいいです.足場の作成は簡単でしょう.
四、VSコードプラグインの構成
Vetur(レイアウト.vueのフォーマット、Macデフォルトのショートカットshift + command + F)は、もちろんCode -> Preferences -> KeyBoard Shortcutsでバインドショートカットを修正することができます.