Жопа кота

1 заметка с тегом

запускам

Parcel и vue.js

Периодически забываю как это делать.
Создаем папку с проектом /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

Радуемся танцуем .

 Нет комментариев    76   2019   parcel   vue js   запускам