Nuxtを使って簡単なサイトを作って公開します(その１)

　某所での活動を見ていたら、Twitterだけで告知すんなやわかりづれぇなって思ったので勝手にまとめたサイトを作ってみようかと思います。それに伴いまた新規技術のNuxtを導入して見ることとします。ちょっと前にVue3.xで作ってたりしたんですが、OGPがなんともし難いことがわかったので、Vue-metaがVue3.xに対応するまでは2.xで頑張りたいと思います。

前提, 環境設定
作業するよ
つづきはまた次の記事でやります
っていうかね…
1. これの対処
参考文献

前提, 環境設定

macOS Mojave 10.14.6
Homebrew 3.0.1
node v14.15.4
npm 7.5.4
@vue/cli 4.5.11
Nuxt@ v2.15.0

作業するよ

インストールする

　まずはprojectをつくっていく

SHELL:

$npm init nuxt-app appName
create-nuxt-app v3.5.2
✨  Generating Nuxt.js project in appName
? Project name: (appName) 

? Programming language: (Use arrow keys)
❯ JavaScript 
  TypeScript 

? Package manager: 
  Yarn 
❯ Npm 

? UI framework: 
  None 
  Ant Design Vue 
  BalmUI 
❯ Bootstrap Vue 
  Buefy 
  Chakra UI 
  Element 
  Framevuerk 
  iView 
  Tachyons 
  Tailwind CSS 
  Vuesax 
  Vuetify.js 
  Oruga 

? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert se
lection)
❯◯ Axios - Promise based HTTP client
 ◯ Progressive Web App (PWA)
 ◯ Content - Git-based headless CMS

? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert sele
ction)
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint
 ◯ Commitlint

? Testing framework: (Use arrow keys)
❯ None 
  Jest 
  AVA 
  WebdriverIO 
  Nightwatch 

? Rendering mode: 
❯ Universal (SSR / SSG) 
  Single Page App 

? Deployment target: (Use arrow keys)
❯ Server (Node.js hosting) 
  Static (Static/JAMStack hosting) 

? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert 
selection)
❯◯ jsconfig.json (Recommended for VS Code if you're not using typescript)
 ◯ Semantic Pull Requests
 ◯ Dependabot (For auto-updating dependencies, GitHub only)

? What is your GitHub username? (***) 

? Version control system: (Use arrow keys)
❯ Git 
  None 

//...>8.cut...

Warning: name can no longer contain capital letters

🎉  Successfully created project appName

  To get started:

	cd appName
	npm run dev

  To build & start for production:

	cd appName
	npm run build
	npm run start

　とりあえずできました。
　ディレクトリに入って npm run dev してみます。

SHELL:

NuxtJS collects completely anonymous data about usage.              00:59:02
  This will help us improve Nuxt developer experience over time.
  Read more on https://git.io/nuxt-telemetry

? Are you interested in participating? (Y/n) NO

なんかに参加しないか？って聞かれてますけどまた開発の情報を送信する系のやつだと思うのでNOです。

plugin.jsを作る？

plugin.jsを導入すれば直りそうなのでまずは検索

が、うまく検索に引っかからないのでとりあえずパッケージのアップデートするここ参照 https://qiita.com/amishiro/items/1c2a009cb0470cf3223a

SHELL:

npm i -D npm-check-updates

みつかったよ（上のが原因じゃない）

しょーもない原因

　ディレクトリ名に[]がはいってたから。Vueとかでは問題にならなかったのでいいかなと思ってたし、薄々気づいてたけど気づかないふりしてたやつ。

つづきはまた次の記事でやります

　あまりにダラダラっていうかぐだぐだになったので記事を分けます。よければご覧ください。

っていうかね…

SHELL:

$ npm install -g npm
// ...>8.cut...
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib/node_modules/npm/node_modules/ansi-regex
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules/npm/node_modules/ansi-regex'
npm ERR!  [Error: EACCES: permission denied, access '/usr/local/lib/node_modules/npm/node_modules/ansi-regex'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules/npm/node_modules/ansi-regex'
npm ERR! }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:

ﾝなんで（憤怒）

これの対処

ここに書いてあったのやった https://stackoverflow.com/questions/48910876/error-eacces-permission-denied-access-usr-local-lib-node-modules

SHELL:

$ ls -la /usr/local/lib/node_modules
$ whoami
$ sudo chown -R whoamiで出てきた名前: /usr/local/lib/node_modules

今度はERR -17が出たのでこっちを実行

404 Not Found - Qiita - Qiita

SHELL:

cd /usr/local/share/man/man1
rm npm*
rm npx*
cd /usr/local/share/man/man5
rm npmrc.5

そしたらさらにエラーが出たので

SHELL:

-bash: /usr/local/bin/npm: No such file or directory

こっちを実行します。 https://gist.github.com/hayakawatomoaki/d5ccb508cb897bf9c6f6

SHELL:

// もともとinstallされているnode,npm残骸が悪さをしているので削除
$ sudo rm -rf /usr/local/lib/node_modules

// 削除されたことを確認
$ npm -v
-bash: /usr/local/bin/npm: No such file or directory


// npmを再インスト
$ curl -0 -L http://npmjs.org/install.sh | sudo sh

// パスを通す ここはやらなくてもいい？下記本文参照
$ echo ‘export PATH=$PATH:~/.nodebrew/current/bin:~/.nodebrew/current/lib/node_modules/npm/bin’ >>  ~/.bashrc
$ source ~/.bashrc

$ npm -v
7.5.4

なんかパスを通すのに失敗したくさいのでこれやらずに調べたほうがいいかも…

Vue CLIインストール時のエラー（EEXIST: file already exists, symlink ~） - Qiita

エラー発生状況 nodeバージョン：v12.16.3 npmバージョン：6.14.4 Vue CLIをインストールするため npm install -g @vue/cli を実行したところ、 npm ERR! code EACCES npm...

SHELL:

$ npm install -g npm
$ npm install -g @vue/cli
$ vue --version
@vue/cli 4.5.11

戻ったかな…

参考文献

Nuxt.js 公式： https://ja.nuxtjs.org/