1: Installing Vue3 using Vite
> npm init vue@latest
- This command will install and execute create-vue, the official Vue project scaffolding tool.
- You will be presented with prompts for a number of optional features such as TypeScript and testing support:
- Browser url: http://localhost:3000/
2: File cleanup & Display simple Hello World!
> rm -r src/assets/
> rm -r src/components/
<!-- src/App.vue -->
<template>
<h1>Hello World!</h1>
</template>
3: Install Boostrap 5 & Setup
> npm install bootstrap
// src/main.js
import { createApp } from "vue";
import App from "./App.vue";
import "bootstrap/dist/css/bootstrap.css";
createApp(App).mount("#app");
import "bootstrap/dist/js/bootstrap.js";
4: Sass Setup
- Vite does provide built-in support for .scss, .sass, .less, .styl and .stylus files. There is no need to install Vite-specific plugins for them, but the corresponding pre-processor itself must be installed: ```sh
npm install -D sass
<!-- src/App.vue -->
<template>
<h1>Hello World!</h1>
</template>
<style lang="scss">
h1 {
color: green;
&:hover {
color: greenyellow;
}
}
</style>
</code></pre></div><h3>
<a name="done" href="#done">
</a>
Done!!!
</h3>
Top comments (4)
Where do I set global variables?
Where do I set global variables?
Thank you
Thanks for share with us. Great job.