[Vue] Instale y use vue-cli para crear un proyecto SPA

Tabla de contenido

1. Instalación de Vue-cli

1.1 ¿Qué es Vue-cli?

1.2 Instalar Vue-cli

1.3 Construya el proyecto usando Vue-cli

2. Proyecto SPA

2.1 Importar y ejecutar proyecto SPA

2.2 Descripción de la estructura del proyecto Vue

2.3 ¿Qué es el archivo *.vue?

2.4 Ruta completa basada en el proyecto SPA

2.5 Enrutamiento anidado completo basado en el proyecto SPA

1. Instalación de Vue-cli

1.1 ¿Qué es Vue-cli?

Vue CLI es una herramienta de andamiaje oficial basada en Vue.js, que se utiliza para generar automáticamente plantillas de proyectos vue.js + webpack y crear rápidamente un entorno de desarrollo para proyectos Vue.js. Proporciona una interfaz de línea de comandos interactiva que puede ayudar a los desarrolladores a inicializar proyectos, configurar herramientas de compilación, administrar dependencias, etc. Vue CLI integra algunas herramientas de desarrollo y mejores prácticas de uso común, lo que permite a los desarrolladores desarrollar aplicaciones Vue.js de manera más eficiente.

Crear comando: vue init webpack xxx

xxx crea un nombre para el proyecto usted mismo

Primero debes instalar algunos entornos necesarios como vue, vue-cli, webpack, node, etc.

1.2 Instalar Vue-cli

Comando: npm install -g vue-cli

Ingrese el siguiente comando en la ventana cmd para verificar si la instalación de vue se realizó correctamente. Nota: la V aquí está en mayúscula. Si tiene éxito, se imprimirá el número de versión.

vue -V

1.3 Construya el proyecto usando Vue-cli

Abra la ventana de comando cmd en la ruta del archivo que desea guardar, cree el directorio de almacenamiento del proyecto y ejecute el siguiente comando:

vue init webpack 项目名

A continuación, el instalador ingresará al modo de instalación de preguntas y respuestas:
1) Nombre del proyecto: Nombre del proyecto, el nombre predeterminado es ycxw_spa cuando se ingresa, solo presione Enter
2) Descripción del proyecto: Descripción del proyecto , solo presione Enter
3) Autor: Autor, complételo casualmente o presione Entrar
4) Vue build: pregunta de opción múltiple, generalmente elija la primera
Runtime + Compiler: recommended for most users //运行加编译，官方推荐
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere//仅运行时
5) Instale vue-router: si necesita vue-router, elija usarlo, de modo que el proyecto generado tenga archivos de configuración de enrutamiento relevantes.
6) Use ESLint para eliminar su código: si debe usar ESLint para limitar los errores de su código y estilo. norte

7) Configurar pruebas unitarias : si instalar pruebas unitarias N
8) ¿Configurar pruebas e2e con Nightwatch?: si instalar pruebas e2e N
9) ¿Deberíamos ejecutar npm install por usted después de que se haya creado el proyecto? (recomendado) (Use la flecha teclas)
> Sí, usar NPM (seleccione esta opción)
Sí, usar Yarn
No, lo manejaré yo mismo

Seleccione todo y presione Enter para generar el proyecto:

Finalmente, aparece Inicialización del proyecto finalizada y la descarga se completa:

2. Proyecto SPA

2.1 Importar y ejecutar proyecto SPA

Encuentre la ruta del archivo del proyecto de spa creado previamente e impórtelo en el software de programación:

1. Regrese a nuestra ventana de comando cmd e ingrese este comando

nombre del proyecto del cd (ycxw_spa)

2. Ingrese el comando npm run dev para ejecutar

Abra esta página para ejecutar:

2.2 Descripción de la estructura del proyecto Vue

Carpeta: construir

Función: esta carpeta se utiliza principalmente para algunas configuraciones de webpack.

Archivo:
webpack.base.conf.js La configuración básica, el entorno de desarrollo y el entorno de producción de Webpack dependen de
webpack.dev.conf.js Configuración del entorno de desarrollo de Webpack
webpack.prod.conf.js Configuración del entorno de producción de Webpack
build.js Creación del entorno de producción script
vue -loader.conf.js Este archivo es el archivo de configuración para procesar archivos .vue

Carpeta: configuración

Función: archivo de configuración

Archivos:
dev.env.js Configurar el entorno de desarrollo
prod.env.js Configurar el entorno de producción
index.js Este archivo configura el servidor proxy, por ejemplo: modifica el número de puerto
node_modules almacena el paquete de instalación npm generado según el package.json configuración durante la carpeta de instalación de npm

Carpeta: src

Función: directorio de código fuente (la carpeta más utilizada en desarrollo)

Archivos:
activos, estilos compartidos y
componentes de imagen, donde se almacena el código comercial. Se divide en componentes para su almacenamiento. Una página es un componente y una página también contendrá muchos componentes. Enrutamiento de conjuntos de enrutadores (define la relación entre enrutamiento
y componentes)
App.vue interfaz de entrada de archivos vue
main.js corresponde a App.vue para crear una instancia de vue, que también es un archivo de entrada y corresponde a la configuración de entrada en webpack.base.config.js

carpeta estática:

Los archivos almacenados no serán procesados por webpack y se puede hacer referencia a ellos directamente. Por ejemplo, si desea hacer referencia a un archivo swf, puede configurarlo en webpack. Para el cargador que procesa archivos con el sufijo swf, también puede colocar directamente el archivo swf en esta carpeta como referencia.

paquete.json:

Este archivo tiene dos partes que son útiles: configurar comandos en scripts y dependencias y devDependencies, que corresponden a los paquetes de dependencia descargados globalmente y localmente, respectivamente.

2.3 ¿Qué es el archivo *.vue?

El archivo *.vue es un tipo de archivo personalizado que utiliza una sintaxis similar a HTML para describir un componente de Vue. Cada archivo .vue contiene tres tipos de bloques de idioma de nivel superior : <template>, <script> y <style> . Estas tres partes representan html, js y css respectivamente.

Nota:
El código HTML no se puede empaquetar directamente en <template></template>. En su lugar, se debe colocar una etiqueta html dentro para empaquetar todo el código. Generalmente, las etiquetas <div></div> también se utilizan para incluir otros códigos. Se pueden utilizar otras etiquetas, siempre que haya un elemento raíz.

<template>
    <div>
        ...
    </div>
</template>

El código js se escribe en la etiqueta <script> y se exporta mediante exportación.

<script>
    export default {
        name: 'App'
    }
</script>

2.4 Ruta completa basada en el proyecto SPA

Al construir el proyecto de spa, ya se creó una interfaz de bienvenida predeterminada, a continuación, solo necesitamos crear un componente personalizado según su formato.

1. Cree un componente personalizado en componentes en src.

Perfeccionar.vue

<template>
  <div>
    <h1>{
   
   { msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      msg: 'Welcome to 网站首页'
    }
  }
}
</script>

<style>
</style>

Acerca de.vue

<template>
  <div>
    <h1>{
   
   { msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'About',
  data () {
    return {
      msg: 'Welcome to 云村小威 个人网站'
    }
  }
}
</script>

<style>
</style>

2. Definir enrutamiento y configurar rutas de enrutamiento

Agregue enrutamiento y configure la ruta de enrutamiento en index.js en la carpeta del enrutador :

1. Primero, importamos los módulos Vue y Vue Router:
import Vue from 'vue'
import Router from 'vue-router'
De esta forma podemos utilizar la funcionalidad de Vue y Vue Router en nuestro código.

2. A continuación, importamos algunos componentes:
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'
Estos componentes se definen en otros archivos especificando sus rutas usando el símbolo @.

3. Luego, usamos el complemento Vue Router:
Vue.use(Router)
De esta forma, Vue puede utilizar las funciones de Vue Router.

4. Finalmente, exportamos una nueva instancia de enrutador, que contiene información de configuración de enrutamiento:
export default new Router({
  routes: [{
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }, {
    path: '/Home',
    name: 'Home',
    component: Home
  }, {
    path: '/About',
    name: 'About',
    component: About,
  }]
})
        En esta configuración, definimos varias reglas de enrutamiento. Cada regla de enrutamiento contiene una ruta, un nombre y un componente. Cuando los usuarios acceden a diferentes rutas, Vue Router cargará los componentes correspondientes de acuerdo con las reglas configuradas.

Por ejemplo:

        Cuando el usuario accede a la ruta raíz ('/'), se cargará el componente denominado 'HelloWorld'; cuando el usuario accede a la ruta '/Home', se cargará el componente denominado 'Home'; cuando el usuario accede a ' Ruta /About' Cuando, se cargará el componente denominado 'About' y también se definen dos subrutas, a saber, '/AboutMe' y '/AboutWebsite', que corresponden a los componentes denominados 'AboutMe' y 'AboutWebsite' respectivamente.

        De esta manera, hemos completado la configuración de Vue Router y podemos usar estas reglas de enrutamiento para implementar la navegación de páginas y la carga de componentes en las aplicaciones Vue.

Ejemplo completo:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  routes: [{
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }, {
    path: '/Home',
    name: 'Home',
    component: Home
  }, {
    path: '/About',
    name: 'About',
    component: About
  }]
})

3. Defina el botón que activa la ruta.

Busque el botón activado por la ruta definida en Aue.js:

<template>
  <div id="app">
    <img src="./assets/vue.png" style="width: 350px;height: 250px;"><br>
    <router-link to="/Home">首页</router-link>
    <router-link to="/About">关于本站</router-link>
    <router-view/>
  </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>

4. Ejecute la prueba

2.5 Enrutamiento anidado completo basado en el proyecto SPA

1. Ejemplo: Prepárese para anidar otros componentes en el componente About.vue

<template>
  <div>
    <h1>{
   
   { msg }}</h1><br />
    <router-link to="/AboutMe">关于我</router-link>
    <router-link to="/AboutWebsite">关于本站</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'About',
  data () {
    return {
      msg: 'Welcome to 云村小威 个人网站'
    }
  }
}
</script>

<style>
</style>

Nota: asegúrese de agregar <router-view></router-view>

Es una etiqueta de marcador de posición en Vue Router. Su función es mostrar el contenido del componente correspondiente a la ruta actual.

Cuando utiliza Vue Router en una aplicación Vue y configura reglas de enrutamiento, la etiqueta <router-view></router-view> representará dinámicamente el contenido del componente correspondiente según la ruta de enrutamiento actual.

2. Personalice los componentes que deben anidarse

Acerca de mí.vue

<template>
  <div>
    <img src="../assets/自拍照.png" style="width: 200px;height: 200px;"/>
  </div>
</template>

<script>
  export default {
    name: 'AboutMe'
  }
</script>

<style>
</style>

Acerca del sitio web.vue

<template>
  <div>
    {
   
   {msg}}
  </div>
</template>

<script>
  export default {
    name: 'AboutWebsite',
    data() {
      return {
        msg: '关于本站无需多言，帅说明了一切...'
      }
    }

  }
</script>

<style>
</style>

3. Demostración de efectos