teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

4

2021/12/13 13:27

投稿

amefure
amefure

スコア5

title CHANGED
File without changes
body CHANGED
@@ -91,8 +91,8 @@
91
91
 
92
92
  CLIは初心者は導入するべきではないのは分かりましたが、参考書を進める過程で(またこの先いずれ解決すべきエラー)だと思うので質問させていただきました。
93
93
 
94
- 至らぬ点情報が足りない場合もあると思います必要な情報を再掲いたします。
94
+ 至らぬ点情報が足りない場合もあると思いますので必要な情報を再掲いたします。
95
95
 
96
96
  よろしくお願いします。
97
97
 
98
- ちなみに導入がうまく行くとトップページにel-buttunが出てくると思いますが、App.vueファイル内のコードはちゃんと追加されていました。
98
+ ちなみに導入がうまく行くとトップページにel-buttunが出てくると思いますが、App.vueファイル内のコードはちゃんと追加されていました。

3

新しく試したことの追記

2021/12/13 13:27

投稿

amefure
amefure

スコア5

title CHANGED
File without changes
body CHANGED
@@ -1,35 +1,58 @@
1
1
  Vue.jsの学習を始めたばかりの初心者です。
2
2
 
3
- 参考書【これからはじめるvue.js実践入門】を見ながら学習を進めている中で表題の通り、 Vue CLIでelementを導入しようとしてもエラーが出てしまいます。
3
+ 参考書【これからはじめるvue.js実践入門】を見ながら学習を進めている中で表題の通り、 Vue CLIでプラグインElementを導入しようとしてもエラーが出てしまいます。
4
4
 
5
+ Vue/CLIの導入は問題なく完了しプロジェクトの作成、サーバーの起動
5
- CLIの導入は問題なく完了し起動も正常にできました。(npm run server)
6
+ アクセスも正常にできました。(npm run server/yarn serve
6
7
 
7
- 他のプラグイン(jestなど)はエラーも起きずに導入できたのですが、elementのみエラーが起きてしまいます。
8
+ 他のプラグイン(jest,Router,Vuexなど)はエラーも起きずに導入できたのですが、elementのみエラーが起きてしまいます。
8
9
 
9
10
  ●環境
10
11
  Mac
12
+ npm:v8.1.0
11
- node: v16.13.0
13
+ nodev16.13.0
14
+ Vue/cli:v4.5.15
15
+ yarn:1.22.17
12
16
 
17
+
13
18
  ●導入の流れ
14
- 以下のコマンド叩き導入を開始、それぞれの質問は「Fully import」、「Yes」、「ja」打ち込み進みした
19
+ まずはデスクトップにVueのプロジェクトを作成しました。プリセットは以下の通りです。yarn使って生成ている思い
20
+ ```
21
+ Default (Vue 3) ([Vue 3] babel, eslint)
22
+ ```
23
+ この時点でサーバーを起動させるとちゃんとプロジェクトは動作します。
15
24
 
16
25
  ```
26
+ npm run server
27
+ yarn serve
28
+ // 両者とも
29
+ ```
30
+
31
+ 続いて以下のコマンドを叩きElementの導入を開始しました。
32
+
33
+ ```
17
34
  vue add element
35
+ ```
36
+ それぞれの質問は「Fully import」、「Yes」、「ja」と打ち込み進みました。
18
37
 
38
+ ```
39
+ Installing vue-cli-plugin-element...
19
40
 
41
+
20
- How do you want to import Element? Fully import
42
+ ? How do you want to import Element? Fully import
21
43
  ? Do you wish to overwrite Element's SCSS variables? Yes
22
44
  ? Choose the locale you want to load ja
23
45
 
24
46
  ```
25
47
 
26
- その際に以下のような警告も出ました。
48
+ ~~その際に以下のような警告も出ました。~~
27
49
  ```
28
-
50
+ // ここは問題ないと教えていただきました
29
51
  WARN There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
30
52
 
31
53
  ```
32
54
 
55
+
33
56
  以下のインストールまでは正常に完了しました。
34
57
  ```
35
58
 
@@ -37,10 +60,26 @@
37
60
 
38
61
  ```
39
62
 
40
- しかしここから以下のようなエラーしか出ません。
63
+ しかしここからyarnの場合は以下のようなエラーしか出ません。
41
64
 
42
65
  ```
66
+ ???? Invoking generator for vue-cli-plugin-element...
67
+ ???? Installing additional dependencies...
43
68
 
69
+ yarn install v1.22.17
70
+ [1/4] ???? Resolving packages...
71
+ [2/4] ???? Fetching packages...
72
+ [3/4] ???? Linking dependencies...
73
+ [4/4] ???? Building fresh packages...
74
+ info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
75
+ ERROR command failed: yarn
76
+
77
+ ```
78
+
79
+ npmでインストールしていた時はこっちが出ていました。
80
+
81
+ ```
82
+
44
83
  npm ERR! code 1
45
84
  npm ERR! path /Users/ユーザー名/Desktop/my-cli/node_modules/node-sass
46
85
  npm ERR! command failed
@@ -56,8 +95,4 @@
56
95
 
57
96
  よろしくお願いします。
58
97
 
59
- ちなみに導入がうまく行くとトップページにel-buttunが出てくると思いますが、App.vueファイル内ののコードはちゃんと追加されていました。
98
+ ちなみに導入がうまく行くとトップページにel-buttunが出てくると思いますが、App.vueファイル内ののコードはちゃんと追加されていました。
60
-
61
- 追記
62
-
63
- yarnはインストールしていない状況なのですがそれが関係しているのでしょうか??

2

2021/12/13 13:00

投稿

amefure
amefure

スコア5

title CHANGED
File without changes
body CHANGED
@@ -56,4 +56,8 @@
56
56
 
57
57
  よろしくお願いします。
58
58
 
59
- ちなみに導入がうまく行くとトップページにel-buttunが出てくると思いますが、App.vueファイル内ののコードはちゃんと追加されていました。
59
+ ちなみに導入がうまく行くとトップページにel-buttunが出てくると思いますが、App.vueファイル内ののコードはちゃんと追加されていました。
60
+
61
+ 追記
62
+
63
+ yarnはインストールしていない状況なのですがそれが関係しているのでしょうか??

1

2021/12/13 03:20

投稿

amefure
amefure

スコア5

title CHANGED
File without changes
body CHANGED
@@ -54,4 +54,6 @@
54
54
 
55
55
  至らぬ点は情報が足りない場合もあること思いますが必要な情報を再掲いたします。
56
56
 
57
- よろしくお願いします。
57
+ よろしくお願いします。
58
+
59
+ ちなみに導入がうまく行くとトップページにel-buttunが出てくると思いますが、App.vueファイル内ののコードはちゃんと追加されていました。