Vueがすぐにプロジェクトを作成します

転載：https://www.jianshu.com/p/c7df292915e7

プロジェクト管理のVueを容易にするために、Vueの公式のチームが開発した  VUE-cliの  ツールを。

この記事では、VUE-CLIは早くVueのプロジェクトを作成行くことができます。

ローカルインストールVUE-CLI

グローバル・ユースNPM VUE-CLIをインストールします。

cnpm -gする@ VUE / CLIをインストール

プロジェクトを作成します。

実行：

VUEのhello-世界を作ります

これは、次のインターフェイスをポップアップ表示されます：

ここでは2つのオプションがあります。

• default (babel, eslint)デフォルトのパッケージ、提供バベルとeslintサポートを。
• Manually select features自分自身の中から選択する多くの機能を提供するために、必要な機能を選択します。あなたは活字体をサポートしたい場合たとえば、あなたは、このいずれかを選択する必要があります。

使用可能な上下方向键オプションを切り替えます。あなただけバベルとeslintサポートが必要な場合は、最初の項目を選択し、静かに初期化VUEプロジェクトを待って、逃げます。

あなたはより多くのサポートが必要な場合、彼らは2つ目の項目を選択します。2番目の項目に切り替えて、Enterキーを押してメニューは、次のインターフェイスを選択するように入力します。

、全てのi-キーロールオーバーオプションを選択するように切り替えるにはキーを使用して、現在の特性を選択するために、スペースバーを使用して、特徴的なオプションを切り替えるには、矢印キーを使用します建てVUE-CLIは8つの機能、複数の選択肢をサポートしています。

各機能について、ここで簡単に説明されるように：

• TypeScript これは、ソースコードを書く活字体の使用をサポートしています。
• Progressive Web App (PWA) Support PWAのサポート。
• RouterサポートVUE-ルータ。
• Vuexサポートvuex。
• CSS Pre-processors CSSプリプロセッサをサポートしています。
• Linter / Formatter コードスタイルのチェックとフォーマットをサポートしています。
• Unit Testing ユニットテストのサポート。
• E2E Testing E2Eテストをサポートしています。

だから、口座に原則としてプロジェクトの堅牢性を取って、一般的なプロジェクトの開発に基づいて、この選択次の機能をサポートしています。

押して選択し、次のステップを確認するために入力します。

ここでは、書き込みのクラススタイルを使用しないように、Vueのアセンブリを開発中で選択を行うです。それが簡単に活字体を使用できるようにするため、ここではY選択：

 次のステップを入力してEnterキーを押し：

このオプションの意味は、自動的にバベルが活字体コード変換であるpolyfiillsを注入するためのツールを使用することではありません。あなたは本当にそれが何を意味するのか、あなたがコントロールすることはできません特にわからない場合は、直接Yを選択し、次のステップ：

それは我々がここでプロジェクトは3つのオプションを提供している中でダイナミックなスタイルの言語をサポートするために、ここで必要なものです：

• SCSS / SASS
• もっと少なく
• スタイラス

ここでLESS、次のステップを選択します。

ユニットテストツールの選択、ダイレクト選択今より多くの火災冗談、次のステップ：

このステップは、構成ファイルの場所を選択することです。バベル、PostCSSなどのために、独自の構成ファイルを持つことができます.babelrc、.postcssrcなどをするだけでなく、内部のpackage.jsonに設定情報を置くことができます。ここで選択し、エディタ（Visual Studioのコード）の友好的支援のための（エディタの一般的なデフォルトはプロジェクトのルートディレクトリに設定ファイルを探します）、外部の設定ファイルを選択し In dedicated config files 、次のステップ：

これは、プロジェクトを促進するために作成されたとき、彼らが保存されて設定するオプションの現在のシリーズ、多重化を望む場合は依頼することです。MACのために、構成情報は、内部の〜/ .vuercに格納されています。

私は、nを選択し、次のステップにここにいます：

選挙が終わった後、VUE-CLI以前に選択の内容には、プロジェクトの初期化を開始します。

ここでは、ライン上で、中国の淘宝網のデフォルトの画像に直接、その後、選択NPMレジストリです。

起動項目

初期の完了後、プロジェクトのルートディレクトリに移動します。

CDハローワールド

プロジェクト開始：

NPMはサーブ実行します

ちょっと待って、次のインタフェースが自動的にブラウザに表示されます見ることができます：

 

パッケージのオンライン

開発プロジェクトが完了した後、それはライン上にパッケージされなければなりません。VUE-CLIコマンドは、プロジェクトのルートディレクトリの下に行われ、パッケージ提供しています。

NPM実行ビルド

执行完之后，可以看到在项目根目录下多出了一个 dist 目录，该目录下就是打包好的所有静态资源，直接部署到静态资源服务器就好了。

实际上，在部署的时候要注意，假设静态服务器的域名是 http://static.baidu.com ，那么对应到访问 <项目根目录>/dist/index.html 的 URL 一定要是 http://static.baidu.com/index.html ，其他的静态资源以此类推。

单元测试

执行：

npm run test