NPM基本構成&インストールプロジェクトは、最初のVUEを作成するためのNode.js

使用する前に、これらの事をやってするために使用されていることを理解してみましょう。

  • Node.jsの:オペレーティング環境のjavascriptの1種類、ブラウザから実行するにはJavaScriptを有効にします。
    外観のNode.js、同じ言語を夢の前端と後端を利用して、統一されたモデルを実現することができます。
  • NPM:Nodejs下のパッケージマネージャ。
  • WebPACKの:その​​主な目的は、このような合併やパッケージ資源として適切な準備を行うために静的リソースを公開する文法CommonJSのブラウザの必要性を介してすべてを置くことです。
  • VUE -cli:ユーザー生成Vueのプロジェクトテンプレート。(助けるために、あなたはすぐにのみ、NPMインストールベースの依存ライブラリは、インストールすることができ備え、あなたVUE構造を与えるために、あるプロジェクトVUEを、開始します)

最初のステップは、インストールがnodejs

中国のネットワークをnodejs:http://nodejs.cn/

最初VUEを作成するには、NPM基本設定&インストールプロジェクトをNode.jsの - ダイヤモンド・マウンテンのブログ

ダウンロードした後は、ルートディレクトリにパスを変更することをお勧めします。
(ここに私の他のディスクパーティションは、他のOS、唯一のCドライブをインストールしているため、あなたが他のトレイに他のディスクを推奨している場合)

最初VUEを作成するには、NPM基本設定&インストールプロジェクトをNode.jsの - ダイヤモンド・マウンテンのブログ

デフォルトでは、自動的にパス環境変数に追加されます

最後に、インストールを完了します。

最初VUEを作成するには、NPM基本設定&インストールプロジェクトをNode.jsの - ダイヤモンド・マウンテンのブログ

 

インストールが完了ビュー変数とバージョンです

使用コマンドCMD(Windowsキー+ R)

  • 環境変数を表示します。 echo %PATH%
  • ノードのバージョンを表示します。 node -v
  • NPMバージョンを表示します。 npm -v

最初VUEを作成するには、NPM基本設定&インストールプロジェクトをNode.jsの - ダイヤモンド・マウンテンのブログ

第二段階は、デフォルトモジュールとキャッシュディレクトリを変更します

インストール直後、NMP NodeJSとNPMがここにインストール言うことではないユーザーディレクトリに生成されたローカルリポジトリフォルダは、直接使用することができ、これは多くの場合、作られた、初心者の間違いの一つです。デフォルトでは、NPMがインストールされているので、モジュールはNodeJSのプログラムディレクトリをインストールしません。あなたは、さまざまな開発プロジェクトをテストするよう、デフォルトで、ここでインストールされるNPMモジュールのインストールディレクトリ、より多くのインストールされたモジュールを変更しない場合は代わりに、ユーザー・グループにシステムフォルダのパスにファイルをインストール、その後、このフォルダのボリュームは、Cドライブを埋めるまでますます大きくなります。これは、NPMの設定を変更したい理由です。

因为博主电脑就一个盘了,只能安装到C盘,给大家演示下安装C盘自定义路径。(其他盘方法同)

我打算把这两个路径换到安装nodejs的目录,C:\nodejs

在C:\nodejs新建两个文件夹

  • node_global
  • node_cache
  • § 这两个文件夹是全局模块目录和缓存目录

最初VUEを作成するには、NPM基本設定&インストールプロジェクトをNode.jsの - ダイヤモンド・マウンテンのブログ

 

然后运行以下2条命令(后边的是路径,根据自己实际情况修改)

  • npm config set prefix "C:\nodejs\node_global"
  • npm config set cache "C:\nodejs\node_cache"
查看npm的本地仓库路径:

命令:  npm list -global

更改前:

最初VUEを作成するには、NPM基本設定&インストールプロジェクトをNode.jsの - ダイヤモンド・マウンテンのブログ

更改后:

最初VUEを作成するには、NPM基本設定&インストールプロジェクトをNode.jsの - ダイヤモンド・マウンテンのブログ

第三步、接下来配置镜像站

配置淘宝镜像站:

命令: npm config set registry=http://registry.npm.taobao.org

检查镜像站是否配置成功: npm config get registry

最初VUEを作成するには、NPM基本設定&インストールプロジェクトをNode.jsの - ダイヤモンド・マウンテンのブログ

  • 国内镜像站,速度更快,加速安装。

第四步、查看配置文件 (安装可忽略)

输入命令 npm config list 显示所有配置信息,会生成一个配置文件

生成的配置文件路径 C:\Users\Administrator\.npmrc

最初VUEを作成するには、NPM基本設定&インストールプロジェクトをNode.jsの - ダイヤモンド・マウンテンのブログ

使用文本编辑器编辑它,可以看到刚才的配置信息(只是让你看到修改,so安装可忽略这一步)

最初VUEを作成するには、NPM基本設定&インストールプロジェクトをNode.jsの - ダイヤモンド・マウンテンのブログ

 

第五步、安装npm

安装npm : npm install npm -g

最初VUEを作成するには、NPM基本設定&インストールプロジェクトをNode.jsの - ダイヤモンド・マウンテンのブログ

默认的模块C:\nodejs\node_modules 目录
将会改变为C:\nodejs\node_global\node_modules 目录,
如果直接运行npm install等命令会报错的。

我们需要修改系统变量

最初VUEを作成するには、NPM基本設定&インストールプロジェクトをNode.jsの - ダイヤモンド・マウンテンのブログ

增加环境变量NODE_PATH 内容是:C:\nodejs\node_global\node_modules

最初VUEを作成するには、NPM基本設定&インストールプロジェクトをNode.jsの - ダイヤモンド・マウンテンのブログ

(然后,需要重新打开CMD让上面的环境变量生效)

第六步、npm安装vue.js

命令:npm install vue -g

  • 这里的 -g 是指安装到global全局目录去

最初VUEを作成するには、NPM基本設定&インストールプロジェクトをNode.jsの - ダイヤモンド・マウンテンのブログ

最初VUEを作成するには、NPM基本設定&インストールプロジェクトをNode.jsの - ダイヤモンド・マウンテンのブログ

安装 vue-router

命令: npm install vue-router -g

  • vue-router 是专为 Vue.js 开发的便于实现单页应用的工具库,能够以声明式的方法编写页面的导航和跳转信息。
安装  vue脚手架

命令:  npm install vue-cli -g

⊗ 因为vue脚本在自定义的global目录下,不在path环境变量。我们需要去系统变量里添加。

  • 对path环境变量添加 C:\nodejs\node_global
  • ⊕注:以下、景観PATHのwin10バージョンは、セミコロンを持っていない、最後に追加さを指摘します[;]

最初VUEを作成するには、NPM基本設定&インストールプロジェクトをNode.jsの - ダイヤモンド・マウンテンのブログ

(CMD変数を再オープントップの変更は、変更パス後に有効にする必要がある場合)

テストは利用できVUEです

コマンド:vue -V

  • 正しく設定されているバージョン番号が表示されますのでご注意は-V  Vが大文字であります

最初VUEを作成するには、NPM基本設定&インストールプロジェクトをNode.jsの - ダイヤモンド・マウンテンのブログ

第七段階、VUE設定が完了した後、コンフィギュレーションの最初のプロジェクト

VUE-cliのツールが内蔵されたテンプレートが含まのWebPACKとのWebPACK-簡単です

ここで私は組み込みの作成を選択したwebpackCドライブnodejsフォルダにプロジェクト(自分のパスの選択に応じて)

プロジェクトWebPACKの作成

すなわち、まず、CDパスをインストールする(パスは、独自に応じて選択することができます)

コマンド: cd C:\nodejs

WebPACKのプロジェクトの作成:  vue init webpack vue01

最初VUEを作成するには、NPM基本設定&インストールプロジェクトをNode.jsの - ダイヤモンド・マウンテンのブログ

初期化され、依存関係をインストール
  • プロジェクトに: cd C:\nodejs\vue01
  • インストールが異なります。 npm install
  • プロジェクトを実行します。 npm run dev

最初VUEを作成するには、NPM基本設定&インストールプロジェクトをNode.jsの - ダイヤモンド・マウンテンのブログ

アドレスのhttpを開くように要求成功したインターフェース、:// localhostを:8080

最初VUEを作成するには、NPM基本設定&インストールプロジェクトをNode.jsの - ダイヤモンド・マウンテンのブログ
(すでにビルドファイルにコンパイル)パッケージの生成されたプロジェクト

コマンド: npm run build

最終結果は、distのフォルダに生成されます

最初VUEを作成するには、NPM基本設定&インストールプロジェクトをNode.jsの - ダイヤモンド・マウンテンのブログ

NMPディレクトリ説明の新vue01のアウト:
最初VUEを作成するには、NPM基本設定&インストールプロジェクトをNode.jsの - ダイヤモンド・マウンテンのブログ
 
オリジナルリンク:ドリルマンブログ

おすすめ

転載: www.cnblogs.com/zmki/p/12084480.html