Tabla de contenido
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
3. El navegador abre la interfaz de la página de inicio del proyecto
3. Directorio y archivos de configuración del proyecto
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!