Ensayo de creación de simios | [Vue cinco minutos] Andamios Vue Cli para crear un proyecto

Tabla de contenido

prefacio

1. Pasos para crear un proyecto

seleccione el modo de enrutamiento

Seleccione el precompilador de CSS

Elija cómo almacenar la configuración

Descargar automáticamente los archivos del paquete requeridos por el proyecto 

2. Inicie el proyecto vue

1. Directorio de proyectos

 2. Iniciar el proyecto

 3. El navegador abre la interfaz de la página de inicio del proyecto

3. Directorio y archivos de configuración del proyecto

 1. directorio público

 2. directorio src

3. directorio del enrutador

4. Pantalla de efecto de ejemplo de proyecto

   1. Crear un nuevo archivo único

2. Configuración de enrutamiento

3. Configure la navegación de enrutamiento en App.vue


prefacio

    Descargo de responsabilidad: esta publicación de blog fue grabada por bloggers en la forma de aprender Vue. Hay muchas publicaciones de blog relacionadas con proyectos de construcción de andamios Vue Cli relacionados con bloggers en esta estación C. Todos tienen muchos pasos. Si hay similitudes, es es una coincidencia!

1. Pasos para crear un proyecto

 Paso 1: este bloguero usa principalmente la herramienta de desarrollo Visual Studio Code para el desarrollo experimental. Podemos usar esta herramienta de desarrollo para aprender juntos y usar el comando cd en la línea de comando del terminal para cambiar a la carpeta donde se guarda el archivo del proyecto.

Paso 2: Ingrese nuestro comando de creación "vue create qbtapp" en la terminal qbtapp es el nombre del proyecto que definí yo mismo, pero debemos prestar atención que el nombre debe estar todo en minúsculas, de lo contrario ocurrirá un error.

 Próximo paso:

 Si informó un error al crear un archivo de acuerdo con el segundo paso: VSCode informó un error: vue: el archivo E:\nodejs\node_global\vue.ps1 no se puede agregar, porque las secuencias de comandos están prohibidas en este sistema. Luego, puede resolverlo ejecutando el comando paso a paso de acuerdo con mi solución. Aquí hay una demostración de error para que todos la vean. Si no hay un socio incorrecto, entonces el número raíz es el número raíz. Si hay un error, Puedes seguir mi método. Terminado de editar:

 Cuando se completa la modificación, podemos ver los siguientes elementos de configuración:

 Las opciones de configuración que tenemos aquí son la configuración guardada por el proyecto que creamos anteriormente, podemos usar las teclas arriba y abajo para seleccionar la configuración existente, generalmente se usa la configuración automática manual, podemos configurarla de acuerdo a las necesidades del proyecto Yo uso el blogger aquí La configuración personalizada manual "Seleccionar funciones manualmente". Luego seleccionamos esto y podremos ver la siguiente pantalla:

 Le daremos una introducción detallada a cada función, también puede traducir Baidu, hay muchos métodos:

 Solo usamos las tres opciones funcionales aquí Después de seleccionar Enter, ingresaremos a la siguiente interfaz de solicitud.

 Luego de hacer clic, ingresamos a la siguiente interfaz:


seleccione el modo de enrutamiento

 Estamos en el modo "historial" aquí, presione Entrar o ingrese una Y mayúscula, y luego ingrese a la siguiente interfaz;


Seleccione el precompilador de CSS

Podemos hacer una variedad de correcciones, puede elegir la compilación previa de CSS que necesita usar, elegimos Menos aquí, seleccionamos y presionamos Enter para ir a la siguiente interfaz;


Elija cómo almacenar la configuración

 Lo que elegimos es almacenar estas configuraciones seleccionadas en el archivo en formato package.json, como se muestra en la figura anterior, hacemos clic en "In package.json", y luego podemos ingresar a la siguiente interfaz;

 La figura anterior significa: si guardar la configuración actual para su uso posterior, si se selecciona la configuración actual, entonces esta configuración puede ser utilizada por proyectos con la misma configuración creada más tarde, por supuesto, tampoco podemos guardarla. Si desea guardar, ingrese "Y" e ingrese un nombre de archivo cuando desee guardar. como sigue:

Luego esperamos la descarga aquí.


Descargar automáticamente los archivos del paquete requeridos por el proyecto 

Después de esperar a que el complemento vue se descargue e instale correctamente, podemos ver la siguiente interfaz, y el indicador "cd qit" significa que podemos ingresar a nuestro directorio raíz y luego podemos ejecutar nuestro comando "npm run serve". nuestro proyecto.

2. Inicie el proyecto vue

1. Directorio de proyectos

   De acuerdo con las operaciones anteriores, ya hemos descargado los archivos de configuración, vue ha descargado estos archivos a nuestra carpeta, podemos echar un vistazo;

 2. Iniciar el proyecto

Ejecute el comando "npm run serve" a través de la terminal y espere a que se complete el cambio de software, y luego se puede mostrar la URL de nuestro sitio web en ejecución. Como se muestra abajo:

 3. El navegador abre la interfaz de la página de inicio del proyecto

   Hacemos clic en nuestro sitio web a través de "Ctrl+clic": http://localhost:8080/, eso es todo, podemos mostrar la interfaz del proyecto de instancia predeterminado de vue, de la siguiente manera:

 En este punto, nuestro proyecto de instancia predeterminado se inicia y se completa.

3. Directorio y archivos de configuración del proyecto

    Después de ejecutar la línea de comando "vue create qbt", nuestro disco E creó un nuevo directorio "qbt" para nuestro directorio. Hay muchos directorios y archivos de configuración en este proyecto. Podemos explicar qué significan estos archivos y cuáles son sus funciones, como se muestra en la siguiente figura:

 Si escribe la descripción a continuación, será molesto para todos leer, y también es molesto para mí escribir, así que puedo escribirla directamente en la captura de pantalla, es conveniente que todos la lean y también lo entiendo. .

 1. directorio público

    Hay dos archivos más en nuestro directorio público:

Uno es el archivo favicon.ico, que es el archivo de iconos del proyecto;

El otro es, index.html, que es un archivo de plantilla, que puede generar el archivo de entrada del proyecto, y el js y css empaquetados por webpack también estarán en este archivo. Cuando el navegador acceda al proyecto, se abrirá por defecto el archivo index.hrtml generado, cuyo contenido puede ser el siguiente:

 2. directorio src

También damos una pequeña descripción del directorio bajo el directorio src, o simplemente lo marcamos en la captura de pantalla.Puede ver la escena claramente, de la siguiente manera:

  •  activos: almacene los archivos de recursos que el directorio necesita usar, como css, imágenes, etc.
  • componentes: almacene algunos componentes públicos en el desarrollo de vue
  • enrutador: almacenar archivos de configuración de enrutamiento
  • Vistas: almacena componentes a nivel de página, como login.vue (interfaz de inicio de sesión) en nuestro proceso de desarrollo, y dos componentes de nuestra instancia, que hemos visto antes, about.vue y home.vue.

Cuando creamos en main y js, también necesitamos configurarlo.El efecto después de que se complete la configuración debería ser el siguiente:

import { createApp } from 'vue'  //引入你生成的文件
import App from './App.vue'   //引入生成的顶级组件
import router from './router'   //引入路由
import Vue from 'vue'     //引入vue

createApp(App).use(router).mount('#app')  
new Vue({    //创vue实例
    router,   //传入路由
    render:h=>h(App)  //传入顶级组件
}).$mount('#app')  //挂载DOM

3. directorio del enrutador

   Podemos ver un archivo index.js haciendo clic en el directorio del enrutador. Este es el archivo para nuestra configuración de enrutamiento. Haga clic para configurar el código. El código de ejemplo configurado es el siguiente (los comentarios ya están en el código):

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue' //引入组件
import VueRouter from 'vue-router'   //引入路由
Vue.use(VueRouter)  //注册路由
import Vue from 'vue'   //引入vue文件

//进行我们路由的配置
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

//创建路由实例
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),//模式
  routes
})

export default router  //导出路由

4. Pantalla de efecto de ejemplo de proyecto

    Hemos completado la construcción del entorno de apertura aquí, y hemos completado completamente el trabajo preliminar, luego comenzaremos la envidia de pequeños experimentos de desarrollo. Podemos experimentar con una instancia, como hacer clic en una función en una barra de navegación para conectarse a la interfaz de contenido de la función correspondiente.

     En primer lugar, queremos experimentar con esta interfaz. Primero debemos eliminar todos los componentes en el código de instancia predeterminado de vue, incluida la carpeta de vista completa y el archivo .vue en la carpeta de componentes, y luego seguir los pasos a continuación para completar el nuevo proyecto desarrollo.

   1. Crear un nuevo archivo único

En la carpeta de vista eliminada, cree tres nuevos componentes .vue con las funciones correspondientes. Estos tres componentes se usan para experimentos. Estos tres nombres son los nombres de los módulos cuando el editor completó el diseño, ¡así que use esto como una conmemoración! Luego escriba nuestro código para estos tres nuevos componentes de archivo respectivamente, el código es el siguiente:

 El código de la plantilla de los tres módulos se puede ver a través de la pantalla dividida.

2. Configuración de enrutamiento

Configure el enrutamiento de nuestro proyecto en el archivo index.js en el directorio del enrutador, que es el mismo que el anterior. Primero, elimine la configuración de enrutamiento predeterminada de nuestra instancia original y luego escribamos nuestro propio código. El código es el siguiente :

//import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/Home.vue' //引入组件
import VueRouter from 'vue-router'   //引入路由
Vue.use(VueRouter)  //注册路由
import Vue from 'vue'   //引入vue文件

//进行我们路由的配置
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/News',
    name: 'News',
    component: () => import('../views/News.vue')
    //这个方式根据自己的需要进行加载的
  },
  {
    path: '/Remote',
    name: 'Remote',
    component: () => import('../views/Remote.vue')
    //这个方式根据自己的需要进行加载的
  }
]

//创建路由实例
const router = new VueRouter({
  mode: 'history',
  base:process.env.BASE_URL,
  routes
})

export default router//导出路由

3. Configure la navegación de enrutamiento en App.vue

    Después de configurar el enrutamiento, también debemos configurar nuestra entrada de navegación y enrutamiento en nuestro componente App.vue, de lo contrario, ¡no podremos saltar con éxito! Nuestro código modificado es el siguiente:

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">首页</router-link>|
      <router-link to="/News">信息</router-link>|
      <router-link to="/Remote">远程</router-link>

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

<style lang="less">

#nav {
  padding: 30px;

a {
  font-size: 20px;
}
}
h1 {
  font-size: 40px;
}
</style>

¡Finalizar!

Supongo que te gusta

Origin blog.csdn.net/Lushengshi/article/details/126554646
Recomendado
Clasificación