Периодически забываю как это делать.
Создаем папку с проектом /moimuchitelniiproect
в папке с проектом делаем КУ
npm install -g parcel-bundler
устанавливаем парсел
потом мутим JSON должен появиться после следующей команды в папке с проектом
npm init -y
можно создать файл index.html к стати в VS code есть авто заполнение шаблона HTML для этого стоит нажать !+tab и все шаблон заполнен. Сделаем запись в боди любого содержания дабы проверить что все по плану
пишем
percel index.html
запускается сервер смотрим что это наша страница.
далее устанавливаем зависимости
$ npm install --save vue
$ npm install --save-dev parcel-bundler
далее добавим в index.html div и подключим скрипт в индексе должны быть записаны следующие строки
<div id="app"></div>
<script src="./src/main.js"></script>
скрипт должен добавляться в самом конце перед закрывающимся тегом боди.
далее создадим папку src а в ней скрипт main.js со следующим содержанием
// src/main.js
import Vue from 'vue'
import App from './App'
new Vue({
el: '#app',
render: h => h(App)
})
потом в папке src создадим vue компонент App.vue а в него запишем
// src/App.vue
<template>
<div class="container">
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
message: 'Using Parcel In A Vue.js App',
};
},
};
</script>
<style scoped>
.container {
width: 600px;
margin: 50px auto;
text-align: center;
}
</style>
потом перезапускам сервер ctrl + c, если видим надпись
Using Parcel In A Vue.js App
Радуемся танцуем .
