Форум программистов, компьютерный форум, киберфорум
Vue.js
Форум программистов и сисадминов Киберфорум > Форум web-программистов > JavaScript > JavaScript: Фреймворки > Vue.js
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.89/75: Рейтинг темы: голосов - 75, средняя оценка - 4.89
38 / 27 / 12
Регистрация: 13.09.2019
Сообщений: 126

Подключить Vue Component к файлу HTML

23.10.2019, 12:38. Показов 15337. Ответов 13
Метки нет (Все метки)
Студворк — интернет-сервис помощи студентам
Есть файл TreeComponent.vue. Допустим в нем написан компонент.
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13

<template>
    <h1>привет</h1>
</template>
 
<script>
    export default {
        name: "TreeComponent"
    }
</script>
 
<style scoped>
 
</style>
Как мне подключить его к файлу index.html? Пробовал писать в index.js:
JavaScript
1
2

import  TreeComponent from './TreeComponent';
Vue.component('tree',TreeComponent);
но получил ошибку вида: Uncaught SyntaxError: Cannot use import statement outside a module
ниже прикрепляю код:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
</head>
<body>
<tree></tree>
<script src="index.js"></script>
</body>
</html>
index.js:
JavaScript
1
2

import  TreeComponent from './TreeComponent';
Vue.component('tree',TreeComponent);
TreeComponent.vue
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13

<template>
    <h1>привет</h1>
</template>
 
<script>
    export default {
        name: "TreeComponent"
    }
</script>
 
<style scoped>
 
</style>
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
 23.10.2019, 12:38
Ответы с готовыми решениями:

Как подключить часть html к другому html файлу?
Всем привет! В php есть удобная функция include которая позволяет подключить php файл к основному документу. Нужно что-то похожее в html. В...

Как подключить html файл к css файлу?
Доброго времени суток! Простой пример. html-файл. У меня не работает подключение к css файлу. Какие могут быть причины? &lt;!DOCTYPE...

[Vue warn]: Failed to mount component: template or render function not defined
После сборки йарном выводится в консоли: : Failed to mount component: template or render function not defined. found in ---&gt;...

13
the hardway first
Эксперт JS
 Аватар для j2FunOnly
2475 / 1847 / 910
Регистрация: 05.06.2015
Сообщений: 3,610
23.10.2019, 14:48
TreeComponent.vue - это однофайловый компонент VueJS. Без предварительного шага сборки вы не подключите его просто использовав
HTML5
1

<script src="index.js"></script>
Подробнее читайте в руководстве
1
38 / 27 / 12
Регистрация: 13.09.2019
Сообщений: 126
23.10.2019, 14:52  [ТС]
j2FunOnly, Т.е. таким образом я не смогу вынести часть Vue кода в отдельный компонент и подключить(внедрить) его без NPM run dev на хостинге? Я правильно понимаю?
Нужен ли для шага сборки сервер на Node Js?
Получается придется все Vue писать в html файле?

Не по теме:

Работал немного с GULP и npm, как делается сборка на хостинге не представляю, просветите?

0
the hardway first
Эксперт JS
 Аватар для j2FunOnly
2475 / 1847 / 910
Регистрация: 05.06.2015
Сообщений: 3,610
23.10.2019, 15:03
Цитата Сообщение от Cheeeasy2501 Посмотреть сообщение
NPM run dev на хостинге
Вы, конечно, можете свой VPS/VDS настроить на работу в таком режиме, но лучше изучите сборку и публикацию приложений.
1
431 / 302 / 90
Регистрация: 03.12.2015
Сообщений: 741
23.10.2019, 15:06
Цитата Сообщение от Cheeeasy2501 Посмотреть сообщение
Т.е. таким образом я не смогу вынести часть Vue кода в отдельный компонент и подключить(внедрить) его без NPM run dev на хостинге? Я правильно понимаю?
Нет, ты можешь сделать "NPM run dev" на рабочей машине, а сгенерированный в результате этого код выложить на хостинг
1
38 / 27 / 12
Регистрация: 13.09.2019
Сообщений: 126
25.10.2019, 19:30  [ТС]
Вопрос актуален) Как правильно подключать модули? Хоть убей не понял почему не получается. Было бы великолепно, если бы нашелся тот, кто от и до расписал бы как это делать? Подключаю к бэкэнд админке.
0
431 / 302 / 90
Регистрация: 03.12.2015
Сообщений: 741
27.10.2019, 14:45
Почитай про vue cli. С помощью него можно создать новый пустой проект. В нем будут настроен webpack и другие нужные вещи, а также будут работать команды npm run dev и npm run build, и т.п.

Добейся запуска пустого проекта. Много вопросов отпадут, когда решишь эту задачу.

Далее исправляй этот пустой проект - добавляй свой код
0
38 / 27 / 12
Регистрация: 13.09.2019
Сообщений: 126
28.10.2019, 12:39  [ТС]
vrm2, Почитал, но не получается. Собственно импортирую этот плагин: https://github.com/xiaokaike/vue-color

Последовательность:
  1. консоль: npm i vue-color
  2. npm init
  3. В файле app.vue пишу
    JavaScript
    1

    import { Photoshop } from 'vue-color'
  4. Регистрирую компонент:
    JavaScript
    1
2
3
4

    components: {
    HelloWorld,
    'photoshop-picker': Photoshop
  }
  5. пишу template
    HTML5
    1

        <photoshop-picker></photoshop-picker>
  6. запускаю CLI: nmp run serve
Итог: получаю ошибки типа
Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in data(): "TypeError: Cannot read property 'h' of undefined"
 
found in
 
---> <Photoshop> at src/components/Photoshop.vue
       <App> at src/App.vue
         <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
getData @ vue.runtime.esm.js?2b0e:4744
initData @ vue.runtime.esm.js?2b0e:4699
initState @ vue.runtime.esm.js?2b0e:4636
Vue._init @ vue.runtime.esm.js?2b0e:5000
VueComponent @ vue.runtime.esm.js?2b0e:5148
createComponentInstanceForVnode @ vue.runtime.esm.js?2b0e:3283
init @ vue.runtime.esm.js?2b0e:3114
createComponent @ vue.runtime.esm.js?2b0e:5972
createElm @ vue.runtime.esm.js?2b0e:5919
createChildren @ vue.runtime.esm.js?2b0e:6047
createElm @ vue.runtime.esm.js?2b0e:5948
patch @ vue.runtime.esm.js?2b0e:6471
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
init @ vue.runtime.esm.js?2b0e:3118
createComponent @ vue.runtime.esm.js?2b0e:5972
createElm @ vue.runtime.esm.js?2b0e:5919
patch @ vue.runtime.esm.js?2b0e:6510
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
eval @ main.js?56d7:7
./src/main.js @ app.js:1085
__webpack_require__ @ app.js:786
fn @ app.js:151
1 @ app.js:1099
__webpack_require__ @ app.js:786
checkDeferredModules @ app.js:46
(anonymous) @ app.js:862
(anonymous) @ app.js:865
Show 11 more frames
vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'h' of undefined
    at r (vue-color.min.js?d99a:1)
    at VueComponent.data (vue-color.min.js?d99a:1)
    at VueComponent.mergedDataFn (vue.runtime.esm.js?2b0e:1220)
    at getData (vue.runtime.esm.js?2b0e:4742)
    at initData (vue.runtime.esm.js?2b0e:4699)
    at initState (vue.runtime.esm.js?2b0e:4636)
    at VueComponent.Vue._init (vue.runtime.esm.js?2b0e:5000)
    at new VueComponent (vue.runtime.esm.js?2b0e:5148)
    at createComponentInstanceForVnode (vue.runtime.esm.js?2b0e:3283)
    at init (vue.runtime.esm.js?2b0e:3114)
logError @ vue.runtime.esm.js?2b0e:1888
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
getData @ vue.runtime.esm.js?2b0e:4744
initData @ vue.runtime.esm.js?2b0e:4699
initState @ vue.runtime.esm.js?2b0e:4636
Vue._init @ vue.runtime.esm.js?2b0e:5000
VueComponent @ vue.runtime.esm.js?2b0e:5148
createComponentInstanceForVnode @ vue.runtime.esm.js?2b0e:3283
init @ vue.runtime.esm.js?2b0e:3114
createComponent @ vue.runtime.esm.js?2b0e:5972
createElm @ vue.runtime.esm.js?2b0e:5919
createChildren @ vue.runtime.esm.js?2b0e:6047
createElm @ vue.runtime.esm.js?2b0e:5948
patch @ vue.runtime.esm.js?2b0e:6471
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
init @ vue.runtime.esm.js?2b0e:3118
createComponent @ vue.runtime.esm.js?2b0e:5972
createElm @ vue.runtime.esm.js?2b0e:5919
patch @ vue.runtime.esm.js?2b0e:6510
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
eval @ main.js?56d7:7
./src/main.js @ app.js:1085
__webpack_require__ @ app.js:786
fn @ app.js:151
1 @ app.js:1099
__webpack_require__ @ app.js:786
checkDeferredModules @ app.js:46
(anonymous) @ app.js:862
(anonymous) @ app.js:865
Show 10 more frames
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in created hook: "TypeError: Cannot read property 'hex' of undefined"
 
found in
 
---> <Photoshop> at src/components/Photoshop.vue
       <App> at src/App.vue
         <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
callHook @ vue.runtime.esm.js?2b0e:4213
Vue._init @ vue.runtime.esm.js?2b0e:5002
VueComponent @ vue.runtime.esm.js?2b0e:5148
createComponentInstanceForVnode @ vue.runtime.esm.js?2b0e:3283
init @ vue.runtime.esm.js?2b0e:3114
createComponent @ vue.runtime.esm.js?2b0e:5972
createElm @ vue.runtime.esm.js?2b0e:5919
createChildren @ vue.runtime.esm.js?2b0e:6047
createElm @ vue.runtime.esm.js?2b0e:5948
patch @ vue.runtime.esm.js?2b0e:6471
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
init @ vue.runtime.esm.js?2b0e:3118
createComponent @ vue.runtime.esm.js?2b0e:5972
createElm @ vue.runtime.esm.js?2b0e:5919
patch @ vue.runtime.esm.js?2b0e:6510
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
eval @ main.js?56d7:7
./src/main.js @ app.js:1085
__webpack_require__ @ app.js:786
fn @ app.js:151
1 @ app.js:1099
__webpack_require__ @ app.js:786
checkDeferredModules @ app.js:46
(anonymous) @ app.js:862
(anonymous) @ app.js:865
Show 10 more frames
vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'hex' of undefined
    at VueComponent.created (vue-color.min.js?d99a:1)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4213)
    at VueComponent.Vue._init (vue.runtime.esm.js?2b0e:5002)
    at new VueComponent (vue.runtime.esm.js?2b0e:5148)
    at createComponentInstanceForVnode (vue.runtime.esm.js?2b0e:3283)
    at init (vue.runtime.esm.js?2b0e:3114)
    at createComponent (vue.runtime.esm.js?2b0e:5972)
    at createElm (vue.runtime.esm.js?2b0e:5919)
    at createChildren (vue.runtime.esm.js?2b0e:6047)
logError @ vue.runtime.esm.js?2b0e:1888
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
callHook @ vue.runtime.esm.js?2b0e:4213
Vue._init @ vue.runtime.esm.js?2b0e:5002
VueComponent @ vue.runtime.esm.js?2b0e:5148
createComponentInstanceForVnode @ vue.runtime.esm.js?2b0e:3283
init @ vue.runtime.esm.js?2b0e:3114
createComponent @ vue.runtime.esm.js?2b0e:5972
createElm @ vue.runtime.esm.js?2b0e:5919
createChildren @ vue.runtime.esm.js?2b0e:6047
createElm @ vue.runtime.esm.js?2b0e:5948
patch @ vue.runtime.esm.js?2b0e:6471
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
init @ vue.runtime.esm.js?2b0e:3118
createComponent @ vue.runtime.esm.js?2b0e:5972
createElm @ vue.runtime.esm.js?2b0e:5919
patch @ vue.runtime.esm.js?2b0e:6510
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
eval @ main.js?56d7:7
./src/main.js @ app.js:1085
__webpack_require__ @ app.js:786
fn @ app.js:151
1 @ app.js:1099
__webpack_require__ @ app.js:786
checkDeferredModules @ app.js:46
(anonymous) @ app.js:862
(anonymous) @ app.js:865
Show 9 more frames
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'hex' of undefined"
 
found in
 
---> <Photoshop> at src/components/Photoshop.vue
       <App> at src/App.vue
         <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
Vue._render @ vue.runtime.esm.js?2b0e:3544
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
init @ vue.runtime.esm.js?2b0e:3118
createComponent @ vue.runtime.esm.js?2b0e:5972
createElm @ vue.runtime.esm.js?2b0e:5919
createChildren @ vue.runtime.esm.js?2b0e:6047
createElm @ vue.runtime.esm.js?2b0e:5948
patch @ vue.runtime.esm.js?2b0e:6471
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
init @ vue.runtime.esm.js?2b0e:3118
createComponent @ vue.runtime.esm.js?2b0e:5972
createElm @ vue.runtime.esm.js?2b0e:5919
patch @ vue.runtime.esm.js?2b0e:6510
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
eval @ main.js?56d7:7
./src/main.js @ app.js:1085
__webpack_require__ @ app.js:786
fn @ app.js:151
1 @ app.js:1099
__webpack_require__ @ app.js:786
checkDeferredModules @ app.js:46
(anonymous) @ app.js:862
(anonymous) @ app.js:865
Show 11 more frames
vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'hex' of undefined
    at Proxy.r (vue-color.min.js?d99a:1)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3542)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4060)
    at Watcher.get (vue.runtime.esm.js?2b0e:4473)
    at new Watcher (vue.runtime.esm.js?2b0e:4462)
    at mountComponent (vue.runtime.esm.js?2b0e:4067)
    at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8409)
    at init (vue.runtime.esm.js?2b0e:3118)
    at createComponent (vue.runtime.esm.js?2b0e:5972)
    at createElm (vue.runtime.esm.js?2b0e:5919)
logError @ vue.runtime.esm.js?2b0e:1888
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
Vue._render @ vue.runtime.esm.js?2b0e:3544
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
init @ vue.runtime.esm.js?2b0e:3118
createComponent @ vue.runtime.esm.js?2b0e:5972
createElm @ vue.runtime.esm.js?2b0e:5919
createChildren @ vue.runtime.esm.js?2b0e:6047
createElm @ vue.runtime.esm.js?2b0e:5948
patch @ vue.runtime.esm.js?2b0e:6471
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
init @ vue.runtime.esm.js?2b0e:3118
createComponent @ vue.runtime.esm.js?2b0e:5972
createElm @ vue.runtime.esm.js?2b0e:5919
patch @ vue.runtime.esm.js?2b0e:6510
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
eval @ main.js?56d7:7
./src/main.js @ app.js:1085
__webpack_require__ @ app.js:786
fn @ app.js:151
1 @ app.js:1099
__webpack_require__ @ app.js:786
checkDeferredModules @ app.js:46
(anonymous) @ app.js:862
(anonymous) @ app.js:865
Show 10 more frames
Вопрос: Что я упустил? Уже просто не первый день пытаюсь найти проблему, но увы не получается
0
431 / 302 / 90
Регистрация: 03.12.2015
Сообщений: 741
28.10.2019, 13:25
Может надо в photoshop-picker передать v-model?
1
38 / 27 / 12
Регистрация: 13.09.2019
Сообщений: 126
28.10.2019, 13:39  [ТС]
vrm2, Вообщем сделал заново проект:
Установил vue color и провел инициализацию через npm, запустил сервер

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div id="app">
  <template>
    <photoshop-picker v-model="colors"></photoshop-picker>
 
  </template>
 
</div>
 
<script>
  // var colors = '#194d33'
import { Photoshop } from 'vue-color' // импорт 
export default {
  name: 'app',
  components: {
    'photoshop-picker': Photoshop //регистрация
  }
}
</script>
Получил ошибку:
Code
1
2
3
4
5
6

webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:620 [Vue warn]: Failed to mount component: template or render function not defined.
 
found in
 
---> <App> at src/App.vue
       <Root>
0
431 / 302 / 90
Регистрация: 03.12.2015
Сообщений: 741
28.10.2019, 14:37
Ну так template и не определен. У тебя вместо template - div. Должен быть файл .vue:
HTML5
1
2
3
4
5
6
7

<template>
...
</template>
 
<script>
...
</script>
Еще раз. Сделай новый проект на vue cli. Запусти, убедись, что все работает.

Затем добавь в уже имеющийся главный компонент строчки, связанные с vue-color (импорт, использование компонента). Проверь, что все работает.

А уж затем будешь создавать свои компоненты
0
38 / 27 / 12
Регистрация: 13.09.2019
Сообщений: 126
29.10.2019, 23:10  [ТС]
vrm2, как не определен, ,у App есть template, и в компоненте photoshop-picker уже есть template. Id app это уже и есть мой App.vue
0
431 / 302 / 90
Регистрация: 03.12.2015
Сообщений: 741
29.10.2019, 23:45
Цитата Сообщение от Cheeeasy2501 Посмотреть сообщение
как не определен, ,у App есть template, и в компоненте photoshop-picker уже есть template. Id app это уже и есть мой App.vue
В файлах vue тег template должен находиться на верхнем уровне, а у тебя он вложен в div. Должно быть так:

HTML5
1
2
3
4
5
6
7

<template>
  <photoshop-picker v-model="colors"></photoshop-picker>
</template>
 
<script>
...
</script>
0
11 / 11 / 8
Регистрация: 18.09.2012
Сообщений: 514
16.02.2020, 21:03
У меня небольшой так сказать проект, посмотри как я сделал, может поможет.
HTML5
1
2
3
4
5
6
7
8
9

<div id="slider"class="slidered">  
               <nav class="navigatorArrow">                   
                        <ion-icon name="arrow-back-circle-sharp" v-on:click="prevSlide" class="back btn"></ion-icon>              
                        <ion-icon name="arrow-forward-circle-sharp"v-on:click="nextSlide"class="go btn"></ion-icon>                  
                </nav>
                <nav class="navigatorRadio">
                    <radio-com></radio-com>
                  
                </nav>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13

Vue.component("radio-com",{
   data(){return{
       
   }},
    template: `
    <div>
    <input checked type='radio' id='1'>
    <input type='radio' id='2'>
    <input type='radio' id='3'>
    <input type='radio' id='4'>
    </div>
  `
})
Вложения
Тип файла: rar vue.rar (164.9 Кб, 11 просмотров)
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
 16.02.2020, 21:03
Помогаю со студенческими работами здесь

Как подключить файл html к файлу index.php?
не могу объединить файлы((

Vue.js как подключить дочернего компонента?
Добрый день. Есть такой код: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt;

Как правильно подключить Vue.js без конфликта с app.js ?
И для чего вообще нужен app.js ? Делаю простой blade, подключаю в нем же Vue.js...Событие v-on:click не отрабатывает, кликаю по кнопке...

не подключается vue.js в html
Всем привет, не подключается vue.js в html Не видит переменную message сделал вот так &lt;head&gt; &lt;meta...

Пропадают скрипты из .component.html
При загрузке в браузер остается только html &lt;div&gt; &lt;label&gt;Enter email&lt;/label&gt;&lt;br /&gt; &lt;input type=&quot;email&quot;...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
14
Ответ Создать тему
Новые блоги и статьи
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Access
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
 Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru