Windows10でVisual Studio Code + vue-cliの開発環境構築メモ

タイトル通り。

Visual Studio Code	1.47.3	MS製のIDE
node.js	12.18.3	vue-cliを動かすために必要
npm	6.14.6	nodeのパッケージマネージャ vue-cliはnodeのパッケージです
vue(@vue/cli)	4.4.6

Node.js
DLしてインストール。
npmも同時にインストールされます。

> npm install -g @vue/cli
> npm install -g @vue/cli-init

> vue --version
@vue/cli 4.4.6

ディレクトリが自動的に生成されるため、その上位フォルダで実行します。

> vue init webpack プロジェクト名

SPAで無い場合は、vue-routerを無効にすること。
ここから先は、VSCode上のPowerShellターミナルで行っても良いです。
PowerShell 開発のための Visual Studio Code の使用 - PowerShell | Microsoft Docs

必要に応じてモジュール追加

npm install bulma node-sass@4.14.1 sass-loader@7.3.1
npm install axios vue-axios
npm install vuex

必要に応じてlintの設定変更 (.eslintrc.js)

extends: [
  'eslint:recommended',
  'plugin:vue/recommended'
],
rules: {
  "no-tabs": 0,
  'vue/max-attributes-per-line': 'off',
  "no-console": 0
}

> cd プロジェクト名
> npm run dev

HTML中で読み込むリソースのpathは以下で変更する。
プロジェクト名\config\index.js

build: {
  assetsPublicPath: './',

二箇所あるので注意。

cmdから実行

> cd プロジェクト名
> npm run build

自分用めも