管理者権限のないWindowsでvue開発（サンプル付き）

10460 ワード
Windows10 Vue.js vue-cli Node.js Node.js テキストリンク

コロナ禍で、在宅で、与えられたリモート環境には管理者権限がなくて、でも開発はやらないと。。
なんて状態でもvue開発するための環境構築手順です

ついでに vue の動作確認サンプルも載せときます

手順

１．node環境の構築
２．vue-cli のインストール
３．vue プロジェクトの作成
４．vue 動作確認用サンプル

１．node環境の構築

公式サイトから ZIP版をダウンロードしてきて、展開
環境変数を設定します
ファイルを展開して置くだけなので管理者権限は不要です

1.1. nodeをダウンロード

https://nodejs.org/ja/download/
Windows Binary の ZIPファイルをダウンロードです

1.2. nodeをインストールするフォルダの準備

ユーザ（自分）のフォルダにインストール用フォルダを準備

コマンドプロンプトを開いてフォルダを作成しときます

c:\Users\ユーザ名> mkdir App

1.3. nodeをインストール（ファイル置くだけ）

まず落としてきたZIPを展開
　node-v12.16.1-win-x64.zip
　※ Windows標準の「すべて展開」を使った前提で記述してます

展開してできたフォルダを準備したAppフォルダに移動

C:\Users\ユーザ名 > move  Downloads\node-v12.16.1-win-x64\node-v12.16.1-win-x64  App\
        1 個のディレクトリを移動しました。

移動したフォルダ名を今後のためにリネームしときます
「node-v12.16.1-win-x64」->「node」

C:\Users\ユーザ名> cd App

C:\Users\ユーザ名\App> rename node-v12.16.1-win-x64 node

1.4. PATHの設定

管理者権限がないのでコントロールパネルから環境変数PATHを設定します

1.4.1. コントロールパネル ->　ユーザー アカウント を開き

1.4.2. ユーザー アカウント を開き

1.4.3. 環境変数の変更 を開く

1.4.4. 環境変数 PATH に nodeを追加する

開いた「環境変数」ウィンドウで上部のユーザの環境変数から Path を選択
（下部のシステム環境変数は権限がなくて変更できないと思います）
「編集」ボタンを押して、開いた「環境変数名の編集」ウィンドウで「新規」でnodeをインストールしたフォルダを追加します
［ C:\Users\ユーザ名\App\node ］

1.5. nodeのインストール確認

新たにコマンドプロンプトを開いてバージョンを確認してみます

C:\Users\ユーザ名> node --version
v12.16.1

C:\Users\ユーザ名> npm --version
6.13.4

どうでしょう
ちゃんとバージョン出たら、インストール成功です
※ 上記バージョンは 2020/3/16 時点の最新だと思います

２．vue-cli のインストール

npm でサクッとインストール

コマンドプロンプトで以下を実行

C:\Users\ユーザ名> npm install @vue/cli
・・・・
+ @vue/[email protected]
added 1115 packages from 654 contributors and audited 16661 packages in 590.218s

23 packages are looking for funding
  run `npm fund` for details

4.2.3 がインストールされました

３．vue プロジェクトの作成

コマンドプロンプトで以下を実行

> vue create test
・・・
 $ cd test
 $ npm run serve

無事にインストールされた模様

インストールパッケージを確認

> cd test

test> type package.json
{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.2.0",
    "@vue/cli-plugin-eslint": "~4.2.0",
    "@vue/cli-service": "~4.2.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.1.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

vue 2.6.11 がインストールされました

４．vue 動作確認用サンプル

そのまま実行してもつまらない？ので
動作確認用のサンプルをば

src/App.vue
<template>
  <div>
    {{ messages }}
    <div>
      <ol>
        <li v-for="(it, idx) in items" :key="it.id">
          {{ it }}
          <button v-on:click="del_item( idx )"> x </button>
        </li>
      </ol>
      <input v-model="item" />
      <button v-on:click="add_item()">Add Item</button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      messages: 'Hello World!',
      items: [ 'aaa', 'bbb', 'ccc', ],
      item: 'Hello Vue.js!',
    }
  },
  methods: {
    add_item: function () { this.items.push( this.item ); this.item = ''; },
    del_item: function ( _idx ) { this.items.splice( _idx, 1 ) }
  }
}
</script>

こちらを参考とさせていただきました。よいサンプルをありがとうございます。
　https://qiita.com/yamazaki3104/items/c793d77a19f104c2a63e
ちょこっと Vue-cli 用？ に変更してます

コマンドプロンプトで以下を実行することで動作確認できます
管理者権限なくてもポート開けるのね

> npm run serve
・・・・
 DONE  Compiled successfully in 11754ms 

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://10.20.30.40:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

以上
管理者権限のない Windows で Vue 開発する手順でした

ちなみに Visual Studio Code も管理者権限なくインストール可能です
こちら https://code.visualstudio.com/download の 「User Installer」をダウンロードして実行するだけです
管理者権限なくても普通にインストールできちゃいました
VS Codeで Vueデバッグする手順はこちら
　https://jp.vuejs.org/v2/cookbook/debugging-in-vscode.html
ステップ実行できるとデバッグも楽になりますね

これで開発はかどります