使用する前に、これらの事をやってするために使用されていることを理解してみましょう。
- Node.jsの:オペレーティング環境のjavascriptの1種類、ブラウザから実行するにはJavaScriptを有効にします。
外観のNode.js、同じ言語を夢の前端と後端を利用して、統一されたモデルを実現することができます。 - NPM:Nodejs下のパッケージマネージャ。
- WebPACKの:その主な目的は、このような合併やパッケージ資源として適切な準備を行うために静的リソースを公開する文法CommonJSのブラウザの必要性を介してすべてを置くことです。
- VUE -cli:ユーザー生成Vueのプロジェクトテンプレート。(助けるために、あなたはすぐにのみ、NPMインストールベースの依存ライブラリは、インストールすることができ備え、あなたVUE構造を与えるために、あるプロジェクトVUEを、開始します)
最初のステップは、インストールがnodejs
中国のネットワークをnodejs:http://nodejs.cn/
ダウンロードした後は、ルートディレクトリにパスを変更することをお勧めします。
(ここに私の他のディスクパーティションは、他のOS、唯一のCドライブをインストールしているため、あなたが他のトレイに他のディスクを推奨している場合)
デフォルトでは、自動的にパス環境変数に追加されます
最後に、インストールを完了します。
使用コマンドCMD(Windowsキー+ R)
- 環境変数を表示します。
echo %PATH%
- ノードのバージョンを表示します。
node -v
- NPMバージョンを表示します。
npm -v
第二段階は、デフォルトモジュールとキャッシュディレクトリを変更します
インストール直後、NMP NodeJSとNPMがここにインストール言うことではないユーザーディレクトリに生成されたローカルリポジトリフォルダは、直接使用することができ、これは多くの場合、作られた、初心者の間違いの一つです。デフォルトでは、NPMがインストールされているので、モジュールはNodeJSのプログラムディレクトリをインストールしません。あなたは、さまざまな開発プロジェクトをテストするよう、デフォルトで、ここでインストールされるNPMモジュールのインストールディレクトリ、より多くのインストールされたモジュールを変更しない場合は代わりに、ユーザー・グループにシステムフォルダのパスにファイルをインストール、その後、このフォルダのボリュームは、Cドライブを埋めるまでますます大きくなります。これは、NPMの設定を変更したい理由です。。
因为博主电脑就一个盘了,只能安装到C盘,给大家演示下安装C盘自定义路径。(其他盘方法同)
我打算把这两个路径换到安装nodejs的目录,C:\nodejs
在C:\nodejs新建两个文件夹
- node_global
- node_cache
- § 这两个文件夹是全局模块目录和缓存目录
然后运行以下2条命令(后边的是路径,根据自己实际情况修改)
npm config set prefix "C:\nodejs\node_global"
npm config set cache "C:\nodejs\node_cache"
命令: npm list -global
更改前:
更改后:
第三步、接下来配置镜像站
配置淘宝镜像站:
命令: npm config set registry=http://registry.npm.taobao.org
检查镜像站是否配置成功: npm config get registry
- 国内镜像站,速度更快,加速安装。
第四步、查看配置文件 (安装可忽略)
输入命令 npm config list
显示所有配置信息,会生成一个配置文件
生成的配置文件路径 C:\Users\Administrator\.npmrc
使用文本编辑器编辑它,可以看到刚才的配置信息(只是让你看到修改,so安装可忽略这一步)
第五步、安装npm
安装npm : npm install npm -g
默认的模块C:\nodejs\node_modules 目录
将会改变为C:\nodejs\node_global\node_modules 目录,
如果直接运行npm install等命令会报错的。
增加环境变量NODE_PATH 内容是:C:\nodejs\node_global\node_modules
(然后,需要重新打开CMD让上面的环境变量生效)
第六步、npm安装vue.js
命令:npm install vue -g
- 这里的 -g 是指安装到global全局目录去
命令: npm install vue-router -g
- vue-router 是专为 Vue.js 开发的便于实现单页应用的工具库,能够以声明式的方法编写页面的导航和跳转信息。
命令: npm install vue-cli -g
⊗ 因为vue脚本在自定义的global目录下,不在path环境变量。我们需要去系统变量里添加。
- 对path环境变量添加
C:\nodejs\node_global
- ⊕注:以下、景観PATHのwin10バージョンは、セミコロンを持っていない、最後に追加さを指摘します[;]
(CMD変数を再オープントップの変更は、変更パス後に有効にする必要がある場合)
コマンド:vue -V
- 正しく設定されているバージョン番号が表示されますのでご注意は
-V
Vが大文字であります
第七段階、VUE設定が完了した後、コンフィギュレーションの最初のプロジェクト
VUE-cliのツールが内蔵されたテンプレートが含まのWebPACKとのWebPACK-簡単です
ここで私は組み込みの作成を選択したwebpack
Cドライブnodejsフォルダにプロジェクト(自分のパスの選択に応じて)
すなわち、まず、CDパスをインストールする(パスは、独自に応じて選択することができます)
コマンド: cd C:\nodejs
WebPACKのプロジェクトの作成: vue init webpack vue01
- プロジェクトに:
cd C:\nodejs\vue01
- インストールが異なります。
npm install
- プロジェクトを実行します。
npm run dev
アドレスのhttpを開くように要求成功したインターフェース、:// localhostを:8080
コマンド: npm run build
最終結果は、distのフォルダに生成されます