A.インストール
1.ここで注意することは、Node.jsのインストールをVueのCLI 3が必要で、ということです≥8.9をnodejsので、私たちはに行ってきました中国の公式ダウンロード：http://nodejs.cn/download/、あなたは最新バージョンをダウンロードすることができます。
2. VUE-cli3.0バージョンをインストールします。
二つの状況：以前にインストールVUE-cli3.0の1.あなたの以前のバージョン、新しいバージョンをインストールする前に、バージョンをアンインストールする必要があります前に。
古いバージョンをアンインストールします。
NPMのアンインストールVUE-cliの-g
新しいバージョンをインストールします。
NPM -gの@ VUE / CLIをインストール
2.あなたがインストールされていない前にVUE-cli3.0の以前のバージョンを、新しいバージョンは直接インストールすることができます。
3.遅すぎる、時には、外国の資源をNRMをインストールし、すぐにNPMのソースを切り替えるためにこれを使用することができます：
1.グローバル・インストールNRM
NPMインストール-g NRM
2.電流源の使用を確認してください
NRM電流
3.（アスタリスクで現在使用されたソースである）、オプションのソースを確認します
NRM LS
前記ハンドオーバ元
一例として、淘宝網ミラー：
NRMは、淘宝網を使用します
5.テストソース速度（すなわち、応答時間）
例：応答時間をテスト淘宝網の公式ソースとソース
NRMテストASL
NRMテスト淘宝網
描画することができ、スピード淘宝網の源は、公式の情報源よりもはるかに高速であるNRMをインストールした後、我々はダウンロードと言って、はるかに高速になりますスピードを構築し、プロジェクトを作成し、高速単語を。
II。プロジェクトを作成します。
1.新しいプロジェクトを作成します。
VUEは、ファイル名の後ろにjjrweb //は、（大文字で）こぶをサポートしていません作成します
次のインターフェイスをポップアップ：
1.最初の「私のデフォルトは」私の以前に保存したプリセットの設定で、以下はその次とに導入されます。
2.default（バベル、eslint）：デフォルトのパッケージ、提供バベルとeslintサポートを。
3.Manually機能を選択：自分自身をから選択する多くの機能を提供するために、必要な機能を選択します。あなたは活字体をサポートしたい場合たとえば、あなたは、このいずれかを選択する必要があります。
あなたはより多くのサポートをしたい場合は、ここで私が選ん手動で選択した機能を：これにスイッチを、選択するために、Enterキーを押し、
次のインターフェイスをポップアップ：
複数の選択肢は：、すべてのiキーロールオーバーオプションを選択するように切り替えるにはキーを使用して、現在の特性を選択するために、スペースバーを使用して、特徴的なオプションを切り替えるには、矢印キーを使用します。
（）バベル//トランスコーダ、コードは既存の実行環境にES6 ES5コードを変換することができます。
（）活字体//活字体ではJavaScript（接尾辞の.js）スーパーセット（サフィックス.TS）を含んとJavaScriptのシンタックスを拡張し、JavaScriptはブラウザで実行するために出力をコンパイルする必要があるが、その後、あまり人がある
（）プログレッシブWebアプリケーション（PWA）のサポート//プログレッシブWebアプリケーション
（）ルータ// VUE-ルータ（ VUEのルーティング）
（）// Vuex vuex（VUE状態管理モード）
（）// CSSをPRESプロセッサCSSプリプロセッサ（例：以下、サス）
（）リンター/フォーマッタ//チェックコードのスタイルとフォーマット（例：ESlint）
（）// ユニットテストユニットテスト（単体テスト）
（）// E2E E2E（エンドツーエンド）のテストをテスト
ここで私は選んだ入力し、オプションを想像します：
次のインターフェイスをポップアップ：
歴史ルータかどうか：ここで私は、NOを選択し、あなたが入力し、追加することができ、手動でルートに、我々は歴史を変更したい場合は、後で。
次のインターフェイスをポップアップ：
CSSプリプロセッサは、主にあなたが習慣の種類を選択することができ、CSSのブラウザの互換性を解決するためのCSSコードやその他の問題を簡単にするために、ここで私はあまりを選択します
次のインターフェイスをポップアップ：
ESLint：ESLint +きれいに//、より多くの使用をJavaScriptコード検出ツールのプラグを提供し、私はESLint +きれいを選びました
次のインターフェイスをポップアップ：
テストするとき：ここで私はリントが上に保存するには、保存時を検出することを選びました
次のインターフェイスをポップアップ：
設定を保存する方法：ここで私はマップを選択することにしました
次のインターフェイスをポップアップ：
現在の設定を保存するかどうか（Y：この構成の記録、あなたは名前から必要であり、n：この構成の記録なし）：私が選んだNO、上記のそれはこれに来てちょうどその時、あなたははい、次回のプロジェクトを作成します選択した場合あなたは押す前に、テンプレートを選択することができるとき
次のインターフェイスをポップアップ：
完成した構造：プロジェクトフォルダに入力して、[プロジェクトを実行することができます。
2.プロジェクトの構造
たくさんの合理化が、それでも多くの相違点とvue2.0があります示したように、基本的な使用方法の変更は、特に大規模ではありません。
差分3.vue-cli2.0とのVUE-cli3.0
1.vuex（状態管理）：
VUEのCLI 2では ：vuexは、そのNPM構築プロセスに含まれていない、インストールの完了後に設定されています。私たちは、VUE CLI vuex 2デフォルトのファイルフォルダ（ストア）を参照してくださいだけでなく、3つのJSファイルが含まことができます：アクションを（一部の格納に外部APIインターフェースを呼び出す非同期実行方法をして、データを変更する変異変異をコミット）、インデックス（データ初期化変異アウトレット店）、（データ処理ロジック突然変異であるの同期実行収集方法、コミット変更Vuex変異のデータを格納するための唯一の方法）
VUEのCLI 3：vuexは、所定の処理用に設定選択を含みます。VUE CLI 3デフォルトの代わりに、元の3つのjsファイルストアフォルダの唯一のstore.js。使用法アクション、変異、状態とゲッターは店がたくさんあります
2.router（ルーティング）。
VUEのCLI 2 ： " ルーター/ index.js "
3 CLIのVUE：" router.js "（使用し、すべて同じことを行います）
3.静的、新しいパブリックフォルダを削除します
CLI 2 VUE ：静的静的リソースはWebPACKのデフォルトの保存先フォルダで、distのフォルダに直接コピーされるパッケージは、WebPACKの後にコンパイルされません
3 CLIのVUE ：静的追加パブリックを放棄します。「静的リソース」でVUEのCLI 3の2つの方法があります：
WebPACKによって治療リソースに導入またはJavaScriptでテンプレート/ CSSの「相対パス」で参照される圧縮され、コンパイルされます。
WebPACKの処理なしに入れ： public ディレクトリまたは絶対パスリソースによって参照される任意のコンパイラ圧縮処理なしで、A「直接コピー」されます
4.index.html：
VUEのCLI 2 ： " index.htmlを "
3 CLIのVUE ： " 公共/ index.htmlの "このテンプレートは、 HTML-のWebPACK -プラグイン -処置
5.src /ビュー：
vue cli 3 的 src文件夹 新增 views文件夹 用来存放 “页面”，区分 components（组件）
6.去掉 build（根据config中的配置来定义规则）、config（配置不同环境的参数）文件夹 ：
vue cli 3 中，这些配置 你可以通过 命令行参数、或 vue.config.js （在根目录 新建一个 vue.config.js 同名文件）里的 devServer 字段配置开发服务器
7.babel.config.js：
配置Babel 。Vue CLI 使用了 Babel 7 中的新配置格式 babel.config.js。和 .babelrc 或 package.json 中的 babel 字段不同，这个配置文件不会使用基于文件位置的方案，而是会一致地运用到项目根目录以下的所有文件，包括 node_modules 内部的依赖。官方推荐在 Vue CLI 项目中始终使用 babel.config.js 取代其它格式。
8.根目录的一些其他文件的改变：
之前所有的配置文件都在vue create 搭建时preset预设 或者 后期可以通过 命令参数 、 vue.config.js 中配置
三.项目编写
1.在package.json文件中添加
"scripts": { "serve": "vue-cli-service serve", //调用开发api "build": "vue-cli-service build", //上线 "test": "vue-cli-service build --mode test",//需要添加的内容，测试 },
2.在根目录下创建.env文件，并配置
NODE_ENV = 'production'
VUE_APP_FLAG = 'pro' //vue代码可以直接使用VUE_APP_名字
3.在根目录下创建.env.test文件
NODE_ENV = 'production'
VUE_APP_FLAG = 'test'
4.在根目录下创建vue.config.js
module.express = { baseUrl: process.env.NODE_ENV === 'production' ? '/static/' : './', devServer: {
port: 端口号,
proxy: {
'/api': {
target: 'https://movie.douban.com/', // target host
ws: true, // proxy websockets
changeOrigin: true, // needed for virtual hosted sites
pathRewrite: {
'^/api': '' // rewrite path
}
},
}
} baseUrl: '/', //基本路径，不要随意更改 outputDir:`dist-${process.env.NODE_ENV}`, // 打包生成目录 assetDir: 'static', lintOnSave: false, runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本 productionSourceMap: false, // 生产环境的 source map }
5.在main.js里配置api变量
/*第一层if判断生产环境和开发环境*/ if (process.env.NODE_ENV === 'production') { /*第二层if，根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境*/ if (process.env.VUE_APP_FLAG === 'pro') { //production 生产环境 axios.defaults.baseURL = 'http://www.aaaa.com';//路径 } else { //test 测试环境 axios.defaults.baseURL = 'http://192.168.0.152:8102';//路径 } } else { //dev 开发环境 axios.defaults.baseURL = 'http://192.168.0.152:8102';//路径 }
6.打包
npm run test