Vueプロジェクト実戦(一)——0から1への脱皮

友情リンク
Vueプロジェクト実戦(一)-0から1への脱皮Vueプロジェクト実戦(二)-JQueryなどのサードパーティライブラリVueプロジェクト実戦(三)-コンポーネントの登録とVueプロジェクト実戦(四)-コンポーネント間の通信の導入
1、環境構成
Vueプロジェクトの作成にはnodeとnpmのサポートが必要です.すでにインストールされている場合は、この手順をスキップします.

1、node    ：
        ：https://nodejs.org/en/download/
                 
2、npm  ：
        node     npm，         
3、  ： cmd       ，              
    node -v
    npm  -v

2、Vueを走らせる
Webpackを使用してVueプロジェクトを構築し、cmdを開き、次のコマンドを順次入力します.

1、npm install -g vue-cli        //    vue-cli
2、vue init webpack project-name //           "webpack"      
3、cd project-name               //      
4、npm install                   //     
5、npm run dev                   //  ，    8080  ，    

実行結果は次のとおりです.
3、プロジェクトディレクトリ構造の紹介

1、src/assets：      ，           ，   ，       
2、src/components：       ，  vue-loader  
3、src/router：    
4、src/App.vue：App  ， index.html  
5、static   ：      ，          ， bootstrap、jquery 
6、src/main.js：      
7、index.html：             
    ：index.html->main.js->APP.vue->vue  （  vue-loader  ）

4、WebstormにVue文法をサポートさせる
フロントエンドの開発者であれば、webstormには慣れていませんが、webstormのデフォルトではvue構文はサポートされていません.webstormでvueプロジェクトを開くと赤くなります.以下、いくつかの設定でwebstormがvue構文をサポートします.

1、File/Setting/Languages&Frameworks/javascripts、ES 6を選択し、apply

をクリック

2、File/Editor/File Type、HTMLを選択して*を追加する.vue、Apply(ハイライトvue構文)

をクリック

3、FIle->Settings->Plugins->Browse repositories->検索vue->ダウンロード、vueサポート構成成功