1. La figura explica brevemente para qué sirve cada directorio:
Marco general: la estructura del proyecto de un vue-cli es la siguiente, en la que se debe dominar la carpeta src, por lo que este artículo también se centra en los archivos que contiene. En cuanto a otros archivos relacionados, solo eche un vistazo.
En cuarto lugar, la subdivisión de la estructura de archivos
1, construir - [configuración del paquete web]
El archivo de compilación es principalmente la configuración de webpack. El archivo de inicio principal es dev-server.js. Cuando ingresamos a npm run dev, lo primero que debe iniciarse es dev-server.js. Verificará las versiones de nodo y npm, cargará el archivo de configuración e inicie el servicio.
2, config - [configuración del proyecto vue]
El archivo de configuración está relacionado principalmente con la configuración del proyecto. Lo que comúnmente usamos es configurar el puerto de escucha cuando el puerto entra en conflicto, empaquetar la ruta de salida y el nombre, etc.
3, node_modules - [paquete de dependencia]
Dentro de node_modules se encuentra el paquete de dependencias del proyecto, que incluye muchas dependencias básicas, y también puede instalar otras dependencias según sea necesario.
El método de instalación es abrir cmd, ingresar al directorio del proyecto, ingresar npm install [nombre del paquete de dependencia] y presionar Enter.
En dos casos instalaremos las dependencias nosotros mismos:
(1) La operación del proyecto carece del paquete de dependencia: por ejemplo, el css-loader utilizado por el proyecto para cargar css externo, el route jump vue-loader, etc. (ejemplo de método de instalación: npm install css-loader)
(2) Instale complementos: como vux (biblioteca de componentes móviles basada en WEUI), vue-swiper (complemento de carrusel)
Nota: A veces se instala la versión de dependencia especificada y se debe agregar la información del número de versión después del nombre del paquete de dependencia. Por ejemplo, para instalar vue-loader de la versión 11.1.4, ingrese npm install [email protected]. 4
4, src - [archivo principal del proyecto]
El archivo central del proyecto se ha explicado brevemente antes. A continuación, nos centraremos en main.js, App.vue e index.js del enrutador.
5. Explicación detallada del código de andamiaje
Echemos un vistazo a los archivos principales en el directorio del proyecto creado:
1. index.html——[página de inicio]
No hay nada que decir al respecto, es una página html simple, donde id='app' está relacionado con la configuración del alcance de vue más adelante.
index.html es igual que otros html, pero generalmente solo define un nodo raíz vacío. La instancia definida en main.js se montará debajo del nodo raíz y el contenido se llenará con componentes vue.
2. Archivo: Hola.vue
Nota: En el archivo *.vue, escriba el código html en la etiqueta de la plantilla y el elemento secundario directo de la plantilla solo puede tener una etiqueta. El estilo está escrito en la etiqueta de estilo y el código js está escrito en el script.
3. Archivo: App.vue - [componente raíz]
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/> //这里是用来展示路由页面内容的，如果想用跳转就用<router-link to='xxx'></router-link>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>Una página vue generalmente consta de tres partes: plantilla (plantilla), js (script) y estilo (estilo):
【plantilla】
La plantilla solo puede contener un nodo principal, lo que significa que el div de nivel superior solo puede tener uno (por ejemplo, el div cuyo nodo principal es #app no tiene nodos hermanos)
<router-view></router-view> es la vista del sub-router, y aquí se muestran las siguientes páginas de ruta. Para usar una analogía, <router-view> es similar a una ranura. Al saltar a una ruta, la página debajo de la ruta se insertará en esta ranura y se renderizará y mostrará.
【texto】
Vue generalmente se escribe en es6 y se exporta con el valor predeterminado de exportación. Lo siguiente puede contener datos, ciclo de vida (montado, etc.), métodos (métodos), etc. Para conocer la sintaxis específica, consulte el documento vue.js. I también usaré ejemplos para ilustrarlo más adelante.
【estilo】
El estilo está envuelto por la etiqueta de estilo <style></style>, que afecta al global de forma predeterminada. Si desea definir el alcance para que solo funcione con este componente, debe agregar un alcance a la etiqueta, <style scoped> </estilo>
Para importar archivos css externos, primero instale el paquete de dependencia css-loader para el proyecto, abra cmd, ingrese al directorio del proyecto, ingrese npm install css-loader y presione Entrar. Una vez completada la instalación, puede importar los archivos css necesarios bajo la etiqueta de estilo, por ejemplo:
<estilo>
importar './activos/css/público.css'
</estilo>
De esta manera, podemos encapsular los estilos debajo del estilo, escribirlos en la carpeta css y luego introducirlos en la página para usarlos, y toda la página de vue se verá más concisa.
4. Archivo: main.js——[archivo de entrada]
Este archivo js es la entrada principal para la configuración de la página principal. Principalmente usando la plantilla de introducción modular de ES6
main.js presenta principalmente el marco vue, los componentes raíz y la configuración de enrutamiento, y define la instancia vue.Los componentes: {App} en el siguiente código es el componente raíz introducido App.vue
También puede introducir complementos más tarde, por supuesto, primero debe instalar los complementos.
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' // 引入vue文件
import App from './App'// 引入同目录下的App.vue模块
import router from './router'// 引入vue的路由
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',//定义作用范围就是index.html里的id为app的范围内
router,//引入路由
components: { App },//注册引入的组件App.vue
template: '<App/>'//给Vue实例初始一个App组件作为template 相当于默认组件
})5. enrutador——[configuración de enrutamiento]
Debajo de la carpeta del enrutador, hay un index.js, que es el archivo de configuración de enrutamiento
import Vue from 'vue' //引用vue文件
import Router from 'vue-router' //引用vue路由模块，并赋值给变量Router
import HelloWorld from '@/components/HelloWorld' //英文HelloWorld.vue模版，并赋值给变量HelloWorld,这里是“@”相当于“../”
Vue.use(Router) //使用路由
export default new Router({
routes: [ //进行路由配置，规定“/”引入到HelloWorld组件
{
path: '/',
name: 'HelloWorld', //这个name暂时不知道用啥用，根据官方文档说的是方便排错的
component: HelloWorld //注册HelloWorld组件
}
]
})La ruta con la ruta '/' se define aquí, y la página correspondiente a esta ruta es el componente HelloWorld, por lo que cuando accedemos a http://localhost:8080/#/ en la URL del navegador, se representa el componente Hello.
Del mismo modo, podemos configurar múltiples rutas, como '/index', '/list', etc. Por supuesto, primero debemos importar el componente y luego configurar la ruta para el componente.
Nota: si necesita agregar componentes, defina el archivo xx.vue en el archivo de componentes y escriba el código; si necesita configurar el enrutamiento, debe configurar la "ruta" de enrutamiento en index.js; también debe haga clic en el salto para usar la etiqueta <router-link></router-link>.
Gracias al autor original por la explicación detallada, este artículo se reproduce de: Construcción de andamios Vue (vue-cli) y estructura de directorios explicación detallada -herramienta de compilación de andamios cli, abra la herramienta de línea de comando e ingrese: npm install vue-cli -g , una vez completada la instalación, ingrese vue -V ( 
https://www.cnblogs.com/goloving/p/8693189.html