Tools

Published on Sep 10, 2021

CLI

The Vue.js Command Line Interface (CLI) is a utility that provides an out-of-the-box experience to building Vue.js apps.

Through a series of questions, it allows one to pick the libraries to use and configure a fully working app with the selected libraries configured and ready for use.

Install

$ npm install -g @vue/cli

or

$ yarn global add @vue/cli

Create a project

$ vue create project-name

Various options are available. To run

$ cd first-vue-project
 $ npm run serve

Vue UI

A graphical interface similar in functionality to the CLI. To start:

$ vue ui

Project structure

  • public/index.html - starting file
  • src/App.vue - Root component (all other components are nested into this)
  • src/main.js - initialiser (creates app, mounts in to the DOM, configures plugins)

public/index.html

<!DOCTYPE html>
<html lang="">
  ...
  <body>
    ...
    <div id="app"></div>
    ...
  </body>
</html>

src/App.vue

<template>
...
</template>

src/main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

createApp(App).use(store).use(router).mount("#app");