Vue 2 0初期化からコンパイルパッケージパブリケーションへ

フロントエンドvueフレームワークがいつの間にかこのように火をつけていることを説明し、生態圏も徐々に完備しており、バックグラウンドもフロントエンドにデータを徹底的に分離しており、iosやアンドロイドクライアントのように、驚くべきことにフロントエンドルーティングという概念を持っており、さらに興奮しているのはwebpackパッケージでパッケージとパッケージ依存の問題を解決したことだ.一言も言わないで、先に例をあげます.###1.vue+webpack初期化開発環境初期化環境まずnodejs、webpack環境をグローバルにインストールしなければならない.node環境をどのようにインストールするかについては、ネット上に多くのチュートリアルがあると信じている.webpackの場合はnpmでインストールすることができる(淘宝ミラー構成でcnpmをインストールすることもできる).
インストール初期化

vue init webpack vue-demo

vue-demoは、初期化されたファイルを保存するためにvue-demoのフォルダを新規作成するプロジェクト名です.以下に項目名を提示しますが、記入しないで直接車に戻るとデフォルトの名前になります.
プロジェクトの説明:ここでは、このプロジェクトの基本的な重要な説明を記入することができます.例えば、お腹がいっぱいですかapp
プロジェクトの作成者:
vue-routerルーティングをインストールするかどうか:yesを選択
ESLintコードチェックをオンにするかどうか:解析:オンにすると1つ以上のスペースがあるか、1つの記号が少ないか、エラーアドバイスをコンパイルします:本当に理解してからオンにします.初めて勉強すればnoを選ぶことができます.本当のプロジェクトはオンにすることをお勧めします.
karmaでテストするかどうか:no提案:理解してから開けて、さもなくば配置の最初の穴はすべて登ることができません
ナイトウォッチテストNo
完了後のヒント:
通俗语の解析:1.vue-demoディレクトリの下2に切り替えます.npmインストールに関する構成3.プロジェクトの開始
インストール後
公式のサンプルプロジェクトを実行

npm run dev

ポートが自動的に開き、ブラウザのプレビューが自動的に開きます.
##2.ファイル構造のいくつかはインポートのいくつかのサードパーティのツールの構成を理解して、package.json
htmlエントリファイル-->index.html
main.js関連モジュールの導入
テンプレートファイルのインポート
エントリルーティング./router/index.js
ソース分析:

import Vue from 'vue'            ---->  vue  
import Router from 'vue-router'    ----->      
import Hello from '@/components/Hello'       ----->    ，    ，    

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',                 ---->      
      name: 'Hello',        ---->  
      component: Hello             ---->         ，      
    }
  ]
})

トップページのテンプレートの内容は、中身を修正してみて、何か変化があるかどうかを確認してみましょう.
##3.vueルーティング構成1.新規ページテンプレート2.テンプレートファイル3をインポートする.アクセスルーティング、およびルーティングに対応するページテンプレートの設定
新規作成vueページテンプレートファイル
index.jsページテンプレートをインポートし、アクセスルーティングを設定する
新しいルートへのアクセスを開始するには、なぜ私のAboutなのか疑問が投げ出されます.vueにはAboutが1行しかありませんが、Vアイコンが複数表示されていますか?
詳細はAppを参照してください.vueの中のコード、コメント討論を歓迎します.
##4ソースコードのパッケージ化の感動的な瞬間が来て、パッケージ化されたファイルを通じて、コンパイルされたbuildフォルダとindex.htmlをサーバーにコピーすればいいです.
ファイルをサーバにコピーします
まとめ:振り回されることを恐れない心を持ってください.
転載先:https://juejin.im/post/5a3217c7f265da433562c71d