Xianyun travel day01-preparación del proyecto

Inicializar el proyecto

Es un poco como el andamio anterior, pero hay más cosas que encapsular

Siga los pasos a continuación para inicializar un proyecto nuxtjs

instalación

Cambiar a la ruta donde se almacena el proyecto

Luego, use la herramienta de andamios create-nuxt-app proporcionada por el sitio web oficial para crear un nuxtjsproyecto.

npx create-nuxt-app xianyun

Nota: Se NPMinstala por defecto en la versión 5.2.0 npx, ingrese en la ventana de línea de comando npm --versionpara ver el número de versión actual

La siguiente es la opción final, y luego la instalación comienza automáticamente.

Necesita esperar un momento para instalar la descarga dependiente. Una vez completada la descarga, puede ver el siguiente cuadro de aviso, solicitando el nombre del proyecto y algunas otras preguntas

puesta en marcha

Cuando termine, el proyecto instalará todas las dependencias, por lo que el siguiente paso es iniciar el proyecto:

//运行
  cd xianyun
  npm run dev

El inicio aparecerá un mensaje para abrir

http: // localhost: 3000 /

Si aparece 404

Puedes reemplazarlo con 127

http://127.0.0.1:3000/

Nota: Si no se informa ningún error, no se preocupe por este paso. En este momento, la ejecución del proyecto puede encontrar el siguiente mensaje de error HTMLElement is not define nuxt.js. El motivo es Nuxtjsque el entorno del servidor se cargó y Element-uiencontró un error provocado por un problema de compatibilidad. ( Si no se informa ningún error, el error se ha solucionado.) La solución es la siguiente:

Descarga la versión especificadaelement-ui

 npm install --save [email protected]

La inicialización del proyecto está completa.

Ejemplo inicial de andamio

Si quieres usar,

1. Primera bifurcación a su cuenta
2. Clona los elementos de tu cuenta
3. Ingrese a la carpeta del proyecto y ejecute npm install
4. npm ejecutar dev

https://gitee.com/owahahah/xianyu.git

Lista de trabajo

Demostración del proyecto

Ejemplo:

http://157.122.54.189:9093/ + Dirección de solicitud

servicio de datos:

Pasos de operación del servicio de datos

1. abrir la cremallera

2. Ejecutar en el directorio

   npm install --node-sqlite3_binary_host_mirror=https://npm.taobao.org/mirrors/
   

3. npm run start

4. Si la base de datos falla

   Nuestro servidor backend ha incorporado la base de datos y, por lo general, se instalará automáticamente. Si ha encontrado algunas máquinas, faltará la instalación de la base de datos. Se le pedirá que la complete.

   Si el error se informa en la siguiente figura, se puede ejecutar
   

Base de datos en línea: (Para las entradas aprendidas más adelante, se recomienda utilizar las en línea directamente)
http://157.122.54.189:9095/

Estructura del archivo del proyecto

Estructura de archivo

Documento del sitio web oficial: https://zh.nuxtjs.org/guide/directory-structure

- xianyun 项目根目录
	- assets 		资源目录
	- components 	组件目录
	- layouts 		布局组件目录
	- middleware 	中间件目录
	- pages			页面目录
	- plugins		插件目录
	- static		静态文件目录
	- Store			Vuex 状态树 文件
	- nuxt.config.js	Nuxt.js 应用的个性化配置
	- package.json	依赖关系和对外暴露的脚本接口

Descripción de alias

Alias	Tabla de contenido
~ o @	directorio src
~~ o @@	Directorio raíz

Por defecto, src目录y 根目录lo mismo

Nota: ** En su vueplantilla, si necesita introducir assetso staticdirectorio, utilice ~/assets/your_image.pngy ~/static/your_image.pngforma.

Configuracion basica

Modificar / eliminar el archivo predeterminado

Nuxtjs nos proporcionó dos archivos de demostración en la inicialización del proyecto, que no tienen ningún efecto en nuestro próximo desarrollo del proyecto. Ellos son pages/index.vuey respectivamente components/logo.vue.

Modifique de la siguiente manera:

1 primeropages/index.vue

<template>
    <div>
        首页
    </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

2. Eliminar components/logo.vuearchivos

Ahora, cuando visita la página de inicio http://localhost:3000/, solo puede ver 首页dos palabras.

Crear directorio de páginas

En el marco nuxt, no es necesario configurar el enrutamiento

Siempre que cree una carpeta o archivo en la carpeta de páginas, la ruta se puede generar automáticamente

A continuación, cree un directorio de estructura del proyecto para facilitar la expansión futura de los módulos del proyecto.

pagesCree una nueva carpeta en el directorio, las carpetas corresponden a los módulos de negocio que se desarrollarán a continuación.

- ... // 其他文件

- pages
	- index.vue 		// 已存在的首页文件
	- post				// 存放旅游攻略模块的文件夹
		- index.vue		// 旅游攻略模块首页文件
	- air				// 存放机票模块的文件夹
		- index.vue		// 机票模块首页文件
	- hotel				// 存放酒店模块的文件夹
		- index.vue		// 机票模块首页文件
	- user				// 存放用户模块的文件夹
		- login.vue 	// 用户登录注册页面
		
- ... // 其他文件

Si ha agregado el archivo anterior, podemos acceder directamente a pagesla página debajo de la ruta para verificar si la página se agregó correctamente. Por ejemplo, modificamos el post/index.vuecontenido de la siguiente manera:

<template>
    <div>
        旅游攻略首页
    </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

Visite la dirección en el navegador http://localhost:3000/post, la página se muestra de la siguiente manera:

[Error en la transferencia de la imagen del enlace externo. El sitio de origen puede tener un mecanismo de enlace anti-sanguijuela. Se recomienda guardar la imagen y subirla directamente (img-ivbVjeAN-1604683617127) (preparación del proyecto.assets / 1558687169347.png)]

1. Por cierto air/index.vue, hotel/index.vueagregue también el contenido anterior, pero necesita modificar el texto para facilitar la distinción entre páginas.

2. Las reglas de acceso a la página de SPANuxtjs son diferentes del mecanismo del navegador. No hay necesidad de configurar el enrutamiento en Nuxtjs, pagesy se puede acceder a las páginas que se encuentran debajo directamente a través de la ruta, que se busca por defecto.index.vue

Crear catálogo de componentes

Aunque el desarrollo de la página aún no ha comenzado, podemos predecir que habrá muchos componentes que se pueden empaquetar de forma independiente en las páginas futuras, por lo que podemos 未来的组件crear un nuevo directorio de almacenamiento ahora .

En componentsla nueva carpeta de archivos:

- ... 			// 其他文件

- components	// 存放公共组件的文件夹
	- post		// 存放旅游攻略模块组件的文件夹
	- air		// 存放机票模块组件的文件夹
	- hotel		// 存放酒店模块组件的文件夹
	- user		// 存放用户模块组件的文件夹
	
- ... 			// 其他文件

Modificar el archivo de configuración

Estilo de efecto de transición de página (opcional)

El salto de página aún no se ha involucrado, pero no nos impide preparar la configuración del proyecto con anticipación, esta configuración solo está diseñada para optimizar la experiencia del usuario cuando se cambia de página, y no es necesario.

assets/Cree este archivo en el directorio assets/main.cssy agregue los siguientes estilos:

/* 页面切换时候过渡样式 */
.page-enter-active, .page-leave-active {
    
    
    transition: opacity .5s;
}

/* 打开时候过渡样式 */
.page-enter, .page-leave-active {
    
    
    opacity: 0;
}

/* 页面顶部页面加载进度条 */
.nuxt-progress{
    
    
    background:#409eff;
    height: 1px;
}

Solo el archivo de estilo recién creado no puede producir efecto, debe nuxt.config.jscargarse en el archivo de configuración para que tenga efecto.

Consulte las notas de la siguiente sección para conocer el método de configuración.

Documento de referencia: animación de transición

Modificar el archivo de configuración

Anteriormente, la configuración del paquete web estaba en webpack.config.js

vue-cli en vue.config.js

nuxt Su configuración está toda en nuxt.config.js

El archivo de configuración configura nuxt.config.jsel proyecto globalmente y tiene efecto en todas las páginas.

Copie el nuxt.config.jsarchivo del proyecto de reemplazo de configuración a continuación , si desea modificarlo manualmente, puede verlo中文注释行(#10 #18 #32 #56)

import pkg from './package'

export default {
    
    
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    
    
    title: "闲云旅游网", // 修改title
    meta: [
      {
    
     charset: 'utf-8' },
      {
    
     name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
    
     hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      {
    
     rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      {
    
     rel: 'stylesheet', type: 'text/css', href: '//at.alicdn.com/t/font_1168872_ehvuah8v57g.css'} // 新增全局字体样式
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: {
    
     color: '#fff' },

  /*
  ** Global CSS
  */
  css: [
    'element-ui/lib/theme-chalk/index.css',
    'assets/main.css' // 新增自定义的页面过渡样式（文件来自3.4.1）
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '@/plugins/element-ui'
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // https://axios.nuxtjs.org/setup
    '@nuxtjs/axios'
  ],

  /*
  ** Axios module configuration
  */
  axios: {
    
    
    // See https://github.com/nuxt-community/axios-module#options
    // baseURL: "http://157.122.54.189:9095" // 新增备用地址
    baseURL: "http://127.0.0.1:1337" // 新增axios默认请求路径 		  
  },

  /*
  ** Build configuration
  */
  build: {
    
    
    transpile: [/^element-ui/],

    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    
    
    }
  },
}

Nota: nuxt.config.jsRecuerda reiniciar el proyecto si lo modificas (más seguro)

Si se omite axios al crear el directorio, no hay otra opción

Puede instalar npm i @ nuxtjs / axios usted mismo

npm install @nuxtjs/axios

Agregar menos

Elegimos el estilo precompilado lessy nos nuxtjsha sido configurada la webpackconfiguración correspondiente, el archivo de configuración que no necesita ser cambiado , solo necesita instalar el paquete de dependencia.

npm install --save less less-loader 

para resumir

1. Inicialice el comando del proyecto:

   // 安装，注意选项选择
   npx create-nuxt-app xianyun
   
   // 启动
   $ cd xianyun
   $ npm run dev
   

2. Nueva estructura de archivos de proyecto

3. (Opcional) Cree un CSS con efecto de rotación de salto de página

4. Modifique el archivo de configuración predeterminado nuxt.config.js, preste atención a la modificación del archivo de configuración para reiniciar el proyecto (lo más seguro)

Nuxt y Vue ordinario

1. NuxtEl programa de isomorfismo aquí se refiere a un conjunto homogéneo de código que se puede ejecutar en un navegador, el servidor puede estar Nodejsoperativo ( ), es decir, mientras se usa un navegador APIy Nodejsel API.

2. Las Vuepáginas ordinarias solo pueden usar el navegador API, incluso en Nodejsel entorno de desarrollo, solo se usa Webpackpara compilar y empaquetar.

3. NuxtEs una colección de frameworks front-end Vuey back-end , adoptados por los frameworks front-end y back-end opcionales Express、koa2, egg, api, por lo que puede entenderse como Vuela existencia de una plantilla de página, similar a art-templateejs

4. NuxtAdmite aplicaciones de una y varias páginas.

Nota: Aunque de Nuxthecho es muy poderoso, no hay muchas aplicaciones en el mercado en la actualidad, porque nodejshay relativamente pocos lenguajes del lado del servidor en la actualidad, y todavía hay más java，phpesperando, por lo que en este proyecto, no habrá ssr Representación del lado del servidor Expansión, nos centraremos principalmente en el desarrollo empresarial funcional y algunos Vueusos intactos.