最初のVueを作成するのIntelliJ IDEAプロジェクト

1.1基本的な考え方(eラーニングからの基本的な概念)

1.1.1のNode.js

Node.jsのは、本質的にはライアン・ダール、クロームV8エンジンパッケージによって開発され、2009年5月にリリースJavascriptの実行環境(ランタイム)、です。Node.jsのは、APIは、ブラウザ以外の環境でより良い代替手段は、そのようなV8の実行を提供し、最適化されているいくつかの特別なケースを使用しています。V8エンジンのJavascriptの実行速度が非常に速く、非常に良いパフォーマンスです。Node.jsのは、簡単にネットワークアプリケーションを拡張しやすい高速応答を構築するためのクロームJavaScriptランタイム上に構築されたプラットフォームです。Node.jsのイベント駆動型、非ブロックI / Oモデルと軽量かつ効率的に、分散型のデバイス上で実行されているデータ集約型リアルタイムアプリケーションに理想的であることが。、ノードを要約すると、JSの実行環境は、シーンの特定のニーズを満たすために、ブラウザの外JavaScriptを提供します。

海抜1.1.2

NPMはnodejsパッケージ管理と配布ツールです。それは、JavaScriptの開発者がより簡単にコードスニペットとシェアを共有することができ、およびNPMコードによって共有を管理することも非常に便利で簡単です。nodejsに基づいて容易に参照と分析ライブラリとプラグインは、NPMによって開発されました。

1.1.3のWebPACK

WebPACKのパッカーモジュールは見ることができます:それは、あなたのプロジェクトの構造を分析しているん拡充を直接実行することはできませんJavaScriptのモジュールだけでなく、いくつかの他のブラウザ検索言語(SCSS、活字体、など)、および必要に応じて、それをパッケージ化しますブラウザ用のフォーマット。モジュールは、ブラウザのWebPACKで使用できる形式にパッケージフロントエンド・エンジニアリング・コードに基づいて開発することができます。

1.1.4概要

Vue.jsは、ほとんどの火災のためのフロントエンドフレームワークであり、そしてそれはAngular.js、React.js一緒に、と3つのフロントエンドフレームワークの主流になります。Vue.jsは唯一のビュー層との関係、使いやすいだけでなく、既存のサードパーティ製のライブラリやプロジェクトとの統合が容易なだけでなく、ユーザーインターフェイスを構築するためのフレームワークです。MVCでのVの前の主な仕事は、この層のために責任がある、(Vueのは、サードパーティのライブラリでサポートされ、開発者が大規模なプロジェクトを行うまで統合することができます)、主な仕事は、結果のフロントページを作成し、インターフェイスに対処することです。Vueのコアライブラリのビュー層にのみ焦点を当て、使いやすいだけでなく、サードパーティのライブラリを統合しやすいか、既存のプロジェクトだけでなく、

1.1.5説明リレーションズ

NPMは、開発ツールに反応、またVUEをインストールすることができますインストールNPM、VUEをインストール、またはローカルに反応を助けるためにインストールします。jQueryのページで紹介し、ダウンロードなどもちろん、あなたがあなたのサイトを見つけることができます。
あなたは、コマンドラインからインストールする必要がある場合、NPMは、フロントエンドのアドオンストアのようなものです、書くためのパッケージの開発者の様々ながある、という概念は、aptのLinuxのに似ています。
Node.jsのJSは、ローカルファイルとして多くの欠陥を持っているブラウザはナ操作することができない、サーバーです。その上JSサーバーので、私たちは、パッケージ、変換をI / Oを扱う、ノード管理を支援して、高速なハードウェア開発者によることができ、イサキが出てきました。

VUEの開発自体は従属ノードが、開発のWebPACKノードの統合に基づいてVUEのVUE-cliの足場ツールではありません。
私は唯一のWebPACKは、ノードに依存していると言うことができます。

1.2ソフトウェアのインストール

ソフトウェアバージョン1.2.1

オペレーティングシステム:

Windowsの10ホームエディション

アプリケーション:

IntelliJ IDEA 2018年3月5日のx64

jdk1.8.0_171

Node.jsのv8.11.3

1.2.2 JDKのインストール

読者は、Oracleの公式ウェブサイトのJava版の最新バージョンを入手することができます。インストール後、インストール、構成、およびJRE_HOME JAVA_HOME環境変数の後に完全な構成です。次のコマンドは、JDKが正常にインストールを示して実行します。

C:45014>のjava -version \ \ユーザー

Javaのバージョン "1.8.0_171"

Javaの(TM)SEランタイム環境(1.8.0_171-B11を構築)

Java HotSpot(TM)64ビットサーバーVM(25.171-B11、混合モードを構築します)

Node.jsのインストール1.2.3

ダウンロード:https://nodejs.org/en/download/ダウンロードはデフォルトのインストールが完了したら、インストールは完了し、オープンcmdが参照するには、以下のコマンドを入力している場合のインストールに成功し
C:45014> \ Users \ユーザーノード-v

v8.11.3

C:45014> \ \ユーザーNPM -v

5.6.0

1.2.4足場インストールプロジェクト

D:\コード\ Ideaproject \ vue_test> のinit WebPACKのvue_test用

実行が完了した後、次のファイルとディレクトリを作成します。

 

私の8080ポートが既に使用されているので、私は8090に変更されました。ポートを見つけ、/config/index.jsファイルを変更:8080、として改正:ポート:8090

そして、実行

D:\コード\ Ideaproject \ vue_test \ vue_test> NPMインストール

D:\コード\ Ideaproject \ vue_test \ vue_test> NPER DEVを実行します

>のDev [email protected]のD:\コード\ Ideaproject \ vue_test \ vue_test

> WebPACKの-devのサーバー--inline --progress --config構築/ webpack.dev.conf.js

 10%の建物モジュール3/7モジュール4アクティブ...トン\ node_modules \ WebPACKのホット\ emitter.js \

5752ms夜9時21分11秒で正常にコンパイルされたDONE

 私はあなたのアプリケーションがここで実行されている:のhttp:// localhostを:8090

お使いのブラウザを開き、次のコマンドを入力します。HTTP:// localhostを:8090

 

1.2.5インストールのアイデア

参考ダウンロード(ネットワークソース、非常に良い):https://www.0daydown.com/02/867195.html

唯一のアイデアの商用版をインストールすることに注意してください、またはプラグインをインストールすることはできません

このプラグインはのためのサポートを提供  Vue.jsを  のIntelliJ IDEAアルティメット、WebStorm、PhpStorm、PyCharm Professionalとルビーマインで。

ビジネスEditionのみのアイデアをサポートしています

これは、インテリジェントVueの固有のコード補完、ナビゲーション、およびリファクタリングを提供します。

プラグインはのコレクションバンドル  Vue.jsのコードテンプレート  によって  サラDrasnerを

Vue.jsの1.2.6アイデアは、プラグインのインストール

アイデアが見つかりメニュー:

  • 选择File -》 Settings -》 Plugins:搜索vue.js,安装Vue.js,注意安装完成后会提示重新IDE

 

  •  设置JavaScript为ECMAScript 6

   File -》 Settings -》 Languages&Frameworks -》 JavaScript:修改JavaScript language version为ECMAScript 6

 

1.2.7  vueAdmin-template导入

新建空的工程:vueAdmin-template,

vueAdmin-template是基于vue的一套后台管理系统基础模板。

GitHub地址:https://github.com/PanJiaChen/vueAdmin-template#vueadmin-template

  • 下载后解压到D:\code\vueAdmin-template,导入工程如下:

 

  •  点击Terminal,并执行npm install

 

 

1.2.8  配置run启动命令

选择Run菜单下的Edit Configuration,点击加号,选择npm,Name为Dev,package.json选择D:\code\vueAdmin-template目录下的package.json,Command为run,Scripts为dev,然后就可以直接在idea中运行了。

 

 

1.2.9  启动vueAdmin-template工程

选择Run下run命令进行执行,显示如下结果:

 

 

注意点:如果提示如下错误:

vue中"‘webpack-dev-server’不是内部或外部命令,也不是可运行的程序"的报错

解决办法将项目里的“node_modules”文件夹删除,然后重新运行cnpm install

执行成功后,自动打开浏览器并显示如下界面:

 

 用户名和密码输入admin/admin,即可进入页面,后续便可自己学习。

 

-----end--------

 

おすすめ

転載: www.cnblogs.com/taoweizhong/p/10991912.html