Crear el proyecto vue de vite

crear proyecto

Usando NPM: npm init vite@latest
Usando hilo:yarn create vite

crear nombre de proyecto
seleccionar plantilla
- vainilla: js nativo, sin ninguna integración de marco
- vue: marco vue3, solo es compatible con vue3
- reaccionar: marco de reacción
- preact: marco de reacción ligero
- lit-element: componentes web ligeros
- esbelto: marco esbelto
Elija js o ts

Introducir dependencias

Introduce el proyecto primero.
```
cd vite-test
```
instalar dependencias
```
npm install
```

Proyecto de inicio

npm run dev

Usar vue-router

Instalar
```
npm install vue-router@4 -S
```

Cree un nuevo enrutador/index.ts en el directorio src y escriba algo de código

import {
      
       createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
    {
      
      
        path: '/',
        component: () => import('../components/HelloWorld.vue')
    }
]

const router = createRouter({
      
      
// createWebHashHistory hash 路由
// createWebHistory history 路由
// createMemoryHistory 带缓存 history 路由
    history: createWebHistory(),
    routes
})

export default router

Modificar app.vue

<template>
  <router-view />
</template>

<style scoped>
</style>

Luego modifique el archivo main.ts para:

import {
      
       createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

usar vuex

Instalar
```
npm install vuex@next -S
```

Cree un nuevo store/index.ts en el directorio src y escriba algo de código

import {
      
       createStore } from 'vuex'
const store = createStore({
      
      
    state: {
      
      
        userInfo: {
      
      
            name:'myName'
        }
    },
    mutations: {
      
      
        getUserInfo (state:any, name:string|number) {
      
      
            state.userInfo.name = name
        }
    },
    actions: {
      
      
        asyncGetUserInfo (context:any) {
      
      
            setTimeout(() => {
      
      
                context.commit("getUserInfo", +new Date() + 'action')
            },2000)
        }
    },
    getters: {
      
      
        userInfoGetter (state:any) {
      
      
            return state.userInfo.name
        }
    }
})

export default store;

Luego modifique el archivo main.ts para:

import {
      
       createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from "./store";
createApp(App).use(router).use(store).mount('#app')

usar descaro

Instalar
```
npm run sass --save-dev
```

Uso (puede usarlo directamente después de la instalación)

<style lang="scss" scoped>
div {
        
        
  color: red;
  span {
        
        
    font-size: 60px;
  }
}
</style>

Vite crea el proyecto vue+vue-router+vuex