vueインストールチュートリアル

3635 ワード

1.nodeをインストールする.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)
2.nodeに基づく.js,淘宝npmミラーインストール依存
cmdに直接入力:npm install-g cnpm--registry=https://registry.npm.taobao.orgああ、車に戻って、取り付けを待って...
3.必要なテンプレートフレームの構築を支援するグローバルvue-cli足場のインストール
cmdで1)入力:cnpm install-g vue-cli、車に戻って、インストールを待つ...
            2).入力:vue、リターン、vue情報が表示されたら成功
4.プロジェクトの作成
cmdに入力:vue init webpack vue_test(プロジェクトフォルダ名)、車に戻って、しばらく待って、「git」の下の項目が順番に現れて、下図で操作できます
vue 安装教程_第1张图片
5.インストール依存
cmdの中で1).入力:cd vue_test(プロジェクト名)、車に戻って、具体的なプロジェクトフォルダに入ります
             2).入力:npm install、車に戻って、少し待ってください
プロジェクトフォルダに戻ると、プロジェクト構造にnodeが1つ増えていることがわかります.modulesフォルダ(このファイルの内容は前にインストールされた依存です)
足場に基づいて作成された既定のプロジェクト構造を下図に示します.
vue 安装教程_第2张图片
6.テスト環境が成功したか
方法1:cmdに入力:npm run dev
方法2:ブラウズに:localhost:8080(デフォルトポートは8080)と入力します.
実行後の効果は次の図のようになります.
vue 安装教程_第3张图片
質問:
インストール中にこの問題に遭遇する可能性があります.
プロジェクトを実行するとヒントが表示されます
> [email protected] dev C:\Users\ASUS\my-project
> node build/dev-server.js


To use this template, you must update following to modules:

  npm: 2.15.9 should be >= 3.0.0
> [email protected] dev C:\Users\ASUS\my-project
> node build/dev-server.js


To use this template, you must update following to modules:

  npm: 2.15.9 should be >= 3.0.0

これはnpmのアップグレードのみです
すなわち、npm-g installを用いる[email protected](バージョン番号2.9.1は、リリースされたバージョンに基づいて任意にアップグレードまたはダウングレードできます)し、最新バージョンのnpmファイルを取得します.
バージョンの表示:
vue 安装教程_第4张图片
このときプロジェクトでnpm run devを行うとヒントが表示されます
vue 安装教程_第5张图片
もう一つ重要なステップがあります
コピーC:Users{あなたのWindowsユーザー名}AppDataRoamingpmode_modulespmの下のファイルからあなたのNodeJSインストールディレクトリの下のode_modulespmでは、既存のすべてのファイルを上書きします.
最後にnpm run devを実行して正常に実行しました
vue 安装教程_第6张图片
記事の転載先:https://www.cnblogs.com/miller-star/p/6394760.html