<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	
	xmlns:georss="http://www.georss.org/georss"
	xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"
	>

<channel>
	<title>Vue | にんじんみるく</title>
	<atom:link href="https://ninjinmilk.com/category/web/vue/feed" rel="self" type="application/rss+xml" />
	<link>https://ninjinmilk.com</link>
	<description>イラストやwebのこと・商品レビューなど様々な情報を発信する個人ブログ。同人サークル「にんじんみるく」としても活動しています。お役立ち情報からしょうもない情報までざっくばらんにお届けします。</description>
	<lastBuildDate>Tue, 13 Aug 2024 15:28:45 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.7.1</generator>

<image>
	<url>https://ninjinmilk.com/wp-content/uploads/2019/10/cropped-ae46b1f460ee46f789c27b264a6cb421-32x32.png</url>
	<title>Vue | にんじんみるく</title>
	<link>https://ninjinmilk.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<atom:link rel='hub' href='https://ninjinmilk.com/?pushpress=hub'/>
<site xmlns="com-wordpress:feed-additions:1">168294425</site>	<item>
		<title>Vue3で「Vue CLI」のインストールでエラー発生！解決までのメモ【Mac】</title>
		<link>https://ninjinmilk.com/web/vue/902</link>
					<comments>https://ninjinmilk.com/web/vue/902#respond</comments>
		
		<dc:creator><![CDATA[シラツキ]]></dc:creator>
		<pubDate>Sun, 06 Feb 2022 16:50:46 +0000</pubDate>
				<category><![CDATA[Vue]]></category>
		<guid isPermaLink="false">https://ninjinmilk.com/?p=902</guid>

					<description><![CDATA[<p>最近Vue.jsを勉強し始めたのだけど、まさか開発環境構築で躓くとは・・・！ ということで、同じことになる人もいると思うので解決までの流れをメモしておこうと思います。 勉強自体は「Vue.js 3 超入門」という書籍で勉</p>
The post <a href="https://ninjinmilk.com/web/vue/902">Vue3で「Vue CLI」のインストールでエラー発生！解決までのメモ【Mac】</a> first appeared on <a href="https://ninjinmilk.com">にんじんみるく</a>.]]></description>
										<content:encoded><![CDATA[<p>最近Vue.jsを勉強し始めたのだけど、まさか開発環境構築で躓くとは・・・！<br />
ということで、同じことになる人もいると思うので解決までの流れをメモしておこうと思います。</p>
<p>勉強自体は「Vue.js 3 超入門」という書籍で勉強しています。<br />
<iframe style="width: 120px; height: 240px;" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&amp;bc1=000000&amp;IS2=1&amp;bg1=FFFFFF&amp;fc1=000000&amp;lc1=0000FF&amp;t=dojinoyakudat-22&amp;language=ja_JP&amp;o=9&amp;p=8&amp;l=as4&amp;m=amazon&amp;f=ifr&amp;ref=as_ss_li_til&amp;asins=B08WYKVPF5&amp;linkId=1217bbdef7337e4c2919768a2e31ebbd" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>
<p>node.js等のインストールの流れは、本の通りに進めています。</p>
<p>&nbsp;</p>
<h2>Vue3で「Vue CLI」のインストールでエラー発生！解決まで</h2>
<h3>開発環境</h3>
<p>・M1 iMac, 2021<br />
・OS：macOS Monterey バージョン12.2<br />
・node.js v16.13.2<br />
・npm v8.1.2</p>
<h3>Vue CLIのインストール</h3>
<p>まずターミナルでこちらのコマンドを実行</p>
<pre class="language-php"><code>$ npm install -g @vue/cli</code></pre>
<p>すると下記のエラーが発生</p>
<pre class="language-php"><code>npm ERR! code EACCES
npm ERR! syscall symlink
npm ERR! path ../lib/node_modules/@vue/cli/bin/vue.js
npm ERR! dest /usr/local/bin/vue
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, symlink '../lib/node_modules/@vue/cli/bin/vue.js' -&gt; '/usr/local/bin/vue'
npm ERR!  [Error: EACCES: permission denied, symlink '../lib/node_modules/@vue/cli/bin/vue.js' -&gt; '/usr/local/bin/vue'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'symlink',
npm ERR!   path: '../lib/node_modules/@vue/cli/bin/vue.js',
npm ERR!   dest: '/usr/local/bin/vue'
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:
npm ERR!     /Users/◯◯◯/.npm/_logs/2022-02-06T13_36_56_607Z-debug.log
</code></pre>
<p>どうも権限がないようなので、権限を与えて上げる必要があるっぽい。</p>
<p>検索してみたら<a href="https://qiita.com/cube_3110/items/6e759e9a293d7daf0fcc" target="_blank" rel="noopener nofollow">「Vue.js 環境構築時エラーの対処法　　　(npm install -g vue-cli)」</a>が出てきたので実行してみると、インストールはできるようになって問題なく動作しました。</p>
<p>&nbsp;</p>
<p><span style="color: #ff0000; font-size: 24px;"><strong>ただ・・・問題発生！！</strong></span></p>
<p>&nbsp;</p>
<p>僕の環境下では、Macを再起動したらMacの動作が不安定になり、全アプリが使い物にならなくなる問題が発生！！<br />
どうしようもなかったので、OSを入れ直すハメになりました・・・<br />
OSの問題なのか、M1だけで出る問題なのか、はたまた僕の操作にミスが有ったのかは不明です・・・</p>
<p>&nbsp;</p>
<p>上記の方法ではうまくいかなかったので、違う方法を探りました。</p>
<p>今回は、エラーが出ているディレクトリに移動して下記コマンドを実行<br />
（◯◯◯はユーザー名）</p>
<pre class="language-php"><code>$ sudo chown ◯◯◯ node_modules</code></pre>
<p>&nbsp;</p>
<p>その後に再度</p>
<pre class="language-php"><code>$ npm install -g @vue/cli</code></pre>
<p>を実行。<br />
ここでもまたエラーが発生したので、</p>
<pre class="language-php"><code>$ sudo npm install -g @vue/cli</code></pre>
<p>「sudo」をつけて実行。<br />
そうすると、何事もなかったようにすんなりとインストールできました・・・。<br />
Mac再起動後も動作に問題ないのでよかった・・・！</p>
<p>といった感じで、今回のVue3　CLIがインストールできない問題を解決しました。</p>
<p>&nbsp;</p>
<h3>Vue.js 環境構築時のエラーの対処法まとめ</h3>
<p>①Vue3　CLIインストールコマンドを実行。</p>
<pre class="language-php"><code>$ npm install -g @vue/cli</code></pre>
<p>②エラー箇所に移動し、下記コマンドを実行</p>
<pre class="language-php"><code>$ sudo chown ◯◯◯ node_modules</code></pre>
<p>③「sudo」をつけて再度Vue3　CLIインストールコマンドを実行。</p>
<pre class="language-php"><code>$ sudo npm install -g @vue/cli</code></pre>
<p>もし同じ事態になった方は参考に実行してみてください。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><iframe style="width: 120px; height: 240px;" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&amp;bc1=000000&amp;IS2=1&amp;bg1=FFFFFF&amp;fc1=000000&amp;lc1=0000FF&amp;t=dojinoyakudat-22&amp;language=ja_JP&amp;o=9&amp;p=8&amp;l=as4&amp;m=amazon&amp;f=ifr&amp;ref=as_ss_li_til&amp;asins=B08WYKVPF5&amp;linkId=1217bbdef7337e4c2919768a2e31ebbd" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>The post <a href="https://ninjinmilk.com/web/vue/902">Vue3で「Vue CLI」のインストールでエラー発生！解決までのメモ【Mac】</a> first appeared on <a href="https://ninjinmilk.com">にんじんみるく</a>.]]></content:encoded>
					
					<wfw:commentRss>https://ninjinmilk.com/web/vue/902/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">902</post-id>	</item>
	</channel>
</rss>
