コロナ禍で、在宅で、与えられたリモート環境には管理者権限がなくて、でも開発はやらないと。。
なんて状態でも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/cli@4.2.3
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 動作確認用サンプル
そのまま実行してもつまらない？ので
動作確認用のサンプルをば
<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
ステップ実行できるとデバッグも楽になりますね
これで開発はかどります