Vite builds vue3+ts project (including sass, vue-router)

1. Relevant information website

Vue3.0 official website : https://cn.vuejs.org/
vite official website : https://vitejs.cn/

2. Steps to create via vite

npm init @vitejs/app

1. Create the name of the project
   

2. choose vue
   

3. Choose vue+ts
   

At this time, the project has been created successfully, and this project folder is added to the workspace in vscode

3. vue-router installation

1. execute code

yarn add vue-router -D
yarn add vue-router@next -D

2. Create a router folder in the src directory
3. Create a router.ts file under the router folder

import {
    
     RouteRecordRaw } from 'vue-router';
const routers: RouteRecordRaw[] = [
  {
    
    
    path: '/',
    name: 'index',
    component: () => import('../view/index.vue'),
  },
];
export default routers;

4. Create the index.ts file under the router folder

import {
    
     createRouter, createWebHistory } from 'vue-router';
import routes from './router';

const router = createRouter({
    
    
  history: createWebHistory(),
  routes,
});

router.beforeEach((to, from, next) => {
    
    
  next();
});

export default router;

4. Sass installation

npm add sass -D

You can use sass in one step

<style lang="scss" scoped>
header {
    
    
  width: 1601px;
  height: 102px;
  margin: 0 auto;
  background-color: red;
  div {
    
    
    width: 100px;
    height: 100px;
    background-color: #fff;
  }
}

Finish!