Proceso detallado de construcción del proyecto Vue3.0 y configuración de enrutamiento

Proceso detallado de construcción del proyecto Vue3.0 y configuración de enrutamiento

Uno, instalación de vue3.0

El primero es instalar Vue3, de la siguiente manera:

• Instalar vue-cli: yarn add @vue/cli -g// Por supuesto, también puede elegir npm o cnpm para instalar
• Compruebe si la instalación se ha realizado correctamente:

  E: \minepro\ myweek > vue - V
  @vue / cli 4.5 .6

1. Crea un proyecto

• Crear proyecto: vue create vue5(项目名称)

• Seleccione el área roja y presione Entrar:

• Luego espere pacientemente la instalación:

2. Inicie el proyecto

• Una vez completada la instalación, inicie el proyecto de acuerdo con las instrucciones:

• Aquí, felicitaciones, el proyecto Vue3 se ejecutó con éxito:

2. Enrutamiento (preste especial atención, muchos amigos cometen errores aquí)

El enrutamiento de Vue3 no es el mismo que el de la instalación anterior de Vue, Me encontré con muchas trampas cuando comencé, y luego leí muchos artículos, extraje la esencia por separado y continué explorando. La razón por la que la ruta se extrae por separado es que personalmente siento que hay más caminos tortuosos que se pueden tomar. Escríbalo, aprenda con todos y progresemos juntos.

1. Versión de enrutamiento

Primero instale la versión de enrutamiento, aquí no está necesariamente arreglada, se puede usar recientemente, no hay problema.
yarn add [email protected] -S

2. Instrucciones de enrutamiento

Los parámetros aquí son muy importantes, después de leerlos detenidamente, son muy significativos para nosotros a la hora de utilizarlos.

nombre	Descripción	suplemento
createWebHashHistory (process.env. BASE_URL)	enrutamiento hash	Tiene un signo '#'
createWebHistory	enrutamiento histórico	No señal
createMemoryHistory	Ruta con historial en caché
parseQuery	Deserialización de parámetros de consulta
stringifyQuery	Serialización de parámetros de consulta
onBeforeRouteLeave	Ruta dejar gancho

3. Configuración de enrutamiento

Después de la instalación, utilícelo en el archivo principal.

• Importar serie de enrutamiento :
  import { createWebHistory, createRouter } from 'vue-router'
• Crea una ruta
  const history = createWebHistory()
• Configurar la lógica de la página El
  uso del enrutador en el archivo es similar al cuerpo principal de Vue2, pero los modos de creación y enrutamiento no son los mismos, por favor mire más de cerca.

const router = createRouter({
    
    
  history, // 路由模式
  routes: [
    {
    
    
      // 页面逻辑
      path: '/test',
      name: 'test',
      component: () => import('@/page/Test')
    }
  ]
})

4. Llamada de ruta

La siguiente aplicación se obtiene desde aquí:

import {
    
     createApp } from 'vue'
// 引入组件
import App from './App'
// 引入资源
import router from './route'
// 创建app
const app = createApp(App)

// 注入路由
app.use(router)

// 挂载实例
app.mount('#app')

• Introducir :import router from './route'

• Inyectar :app.use(router)

5. Uso de enrutamiento

• Interruptor de gatillo :<router-link to="/mine">mine</router-link>
• Pantalla :<router-view></router-view>

6. Imagen de efecto

Tres, componentes: crear y llamar

1. Crea componentes

• Crear un componente: (solo crear una nueva página)
• Introducir componentes:import ExportExcel from './components/ExportExcel'

2. Registrar los componentes

import {
    
     createApp } from 'vue'
import App from './App'
const app = createApp(App)
// 注册组件
app.component('ExportExcel', ExportExcel)

3. Utilice componentes

• Utilice componentes:<ExportExcel/>

4. Árbol de archivos de directorio Attachment-Vue3

V. Vue3.0 nuevo método de adquisición de código fuente del proyecto

1. Obtén el código fuente con git

Haga clic aquí: dirección de git del proyecto Vue3.0

2 npm 安装 ： npm i ng_vue || hilo add ng_vue --save

Instrucciones detalladas:

1. Una vez completada la instalación, ingrese node_modules-> ng_vue-> 单独提取文件夹->然后安装依赖，运行项目
2. aparecernode_modules
   
3. aparecer ng_vue
   
4. Extraiga la carpeta actual y cree una nueva carpeta para almacenar
   
5. Instalar dependencias, ejecutar el proyecto