SPA with Vue.js and Node.js

Post by: syed hussain in All

Summary

Rapidly create a new Vue.js project with Node.js.

Vue 3.+ Setup

npm init vue@3

Vue 2.+ Installation & Setup

Install the Vue CLI

npm update
npm i -g @vue/cli-init

Install the Vue SPA

vue init webpack-simple myproject
cd myproject
npm install
npm run dev

Folder Structure

.
├── README.md
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── src
└── webpack.config.js

Index.html

Primary index file that Vue.js uses to output to the browser. This file doesn’t always need to be edited unless you need to include libraries not available as an NPM package.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>mpp-app</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

src Directory

The src directory has files that will need to be modified. The only file that I often modify is the App.vue file to include other necessary files.

.
├── App.vue
├── assets
│   └── logo.png
└── main.js

Tags:
30 Oct 2021
0

Leave a comment