2018-06-10 zn社ノート四

一、手動配置（基本的にあまり使わない）

webpack+vue-loader webpackロードモジュールはどのようにこのプロジェクトを実行しますか?

npm installまたはcnpm install

npm run dev

        ->  package.json
            "scripts":{
                "dev":"webpack-dev-server --inline --hot --port 8082"
            }

以降のダウンロードモジュール:npm install --save-dev EADDRINUSEポートの使用量が少なくなりました:

    webpack-dev-server
    webpack

.vue末尾、コンポーネントを呼ぶ

ルーティング:vue-router

        ->   :
            bower info vue-router

 : 0.7.13

vue-loaderと組み合わせて使用:1.vue-routerモジュールcnpm install vueをダウンロード[email protected] 2.import VueRouter from 'vue-router' 3.Vue.use(VueRouter); 4.ルーティングの構成

    var router=new VueRouter();
    router.map({
         
    })

5.routerをオンにします.start(App,'#app');

注意:前:index.html->現在:index.html -> App.vue->ルートをネストするルート要素home newsが必要です:前と同じ

オンライン:npm run build->webpack-p

足場:vue-cli-vue足場基本プロジェクト構造

を提供します.

自体は多くのプロジェクトテンプレートを統合しています:simple個人は少しもwebpackが使えないと思っています(大型プロジェクト)Eslint検査コード規範、ユニットテストwebpack-simple個人推薦使用、コード検査なし√browserify->自分でbrowserify-simple

を見ます

基本使用フロー:1.npm install vue-cli-gインストールvueコマンド環境検証インストールok?vue --version 2.プロジェクトテンプレートvue initローカルフォルダ名3を生成する.生成ディレクトリに入るcd xxx npm install 4.npm run dev