足場のインストールおよび展開プロジェクトプロセス
1:ソフトウェアnodejs 6.xx
1.1に依存:nodejs
http://nodejs.cn/download/
https://npm.taobao.org/mirrors/node/
X86 for 32 windows
X64 for 64 windows
1.2:次のステップ
インストールディレクトリ:中国語、スペースなし
c:/プログラムファイル/ nodejs
1.3:検出(windows-> start-> run-> cmd)
node -v
2:cnpmツールをインストールします(nodejsツールnpmインストールソフトウェア)
npm install -g cnpm --registry = https://registry.npm.taobao.org
#npm install tool
#install install uninstall remove
#-g global#
ttps:// registry.npm.taobao.org Taobaoミラーサイト
検出#
3:VUE-cliの足場をインストール
--global VUE-CLI CNPMをインストール
4:プロジェクト(プロジェクト自動的に完全なディレクトリと設定ファイル)(別売)を初期化する(足場)によると
#なしクラス初期化
VUEのinit WebPACKのプロジェクト名
例
VUEの初期化webpack my-project#
プロジェクト名を尋ねる:my-project
インストール:vue-router?はい/いいえはい
インストール:EsLint?いいえ
他はすべていいえ
検出:自動生成されたディレクトリ
#ビルドスクリプトディレクトリ#config
構成ディレクトリ(…)
#node_modulesすべてのnodejs依存関係ツールキットディレクトリ(空)
#srcコードディレクトリ
アセットリソースディレクトリ(img / css / js)
コンポーネントコンポーネントディレクトリ
ルータールーティング構成
App.vueトップレベルのコンポーネント
main.jsプログラムエントリjs
#package.jsonプロジェクト記述ファイル
注:tpls.zip
5:依存ツールキット
e:
cd tpls
e:/ tpls> cnpm installをインストール
注:入力した赤いコマンド、黒は自動的に表示される
5.1インストールvue-resourceをプロジェクトに入れ、現在のプロジェクトを見つけます
次のように入力します:npm install vue-resource --save
5.2インストールが完了したら、次のようにmain.jsにインポートします。
'vue-resource'からVueResourceをインポートする
Vue.use(VueResource)
6:プロジェクトを開始します
cnpm run dev
注:サーバーを開始します:ポート8080
注:Apacheの
検出は必要ありません:http : //127.0.0.1 :8080/ #/ サーバーを
停止します:ctrl + c
7:コード開発
src
8:vueプロジェクトの起動プロセス
cnpm run devを実行すると、現在のディレクトリで
package.jsonファイルが見つかり、サーバーのデフォルトポート8080が起動します。
srcディレクトリでmain.jsファイルを見つけて、プロジェクトに唯一の新しいVue()を作成します。テンプレートコンテンツAppをロードするには、AppはsrcディレクトリのApp.vueの最後のファイル
です。
srcディレクトリにrouterフォルダーがあり、このフォルダーの下にindex.js
ファイルがあります。このファイルは、ルーティングディクショナリを構成し、ルーティングアドレスを指定するためのものです