Tutorial detallado paso a paso para desarrollar proyectos Vue basados en vscode

1. Tutorial detallado de los pasos de descarga e instalación de Vue (pro-test efectivo) 1_Water w's Blog-CSDN Blog

2. Tutorial detallado de los pasos de descarga e instalación de Vue (pro-test efectivo) 2. Instalación y creación de proyectos predeterminados_水w的博客-CSDN博客

Tabla de contenido

Cinco, proyecto vue de desarrollo npm integrado vscode

1. Se requieren complementos para la instalación de vscode:

2. Cree una pequeña página de vue (comenzando con vue)

3. Una comprensión general de las ideas de diseño de Vue

4. Fácil de usar

【1】Si el componente se creó recientemente, ¿cómo utilizar el componente?

Resuelva el error: el nombre del componente "Hola" siempre debe ser de varias palabras

[2] ¿Cómo reutilizar componentes? ¿Y cómo los componentes pasan valores?

5. element-ui: proporciona componentes comunes

【1】Descargar elemento-ui

Resuelva el error: No se pudo resolver la dependencia: npm ERR! peer vue@"^2.5.17" from [email protected]

consejos: ¿Cómo ejecutar el código del proyecto descargado de Internet?

【2】Introducir elemento UI

Resuelva el informe de errores: Vue presenta el informe de errores de Element-ui

【3】Fácil de usar: formulario básico

---

Cinco, proyecto vue de desarrollo npm integrado vscode

1. Se requieren complementos para la instalación de vscode:

• Herramienta de desarrollo Vue Vetur: una instalación obligada para desarrollar con vue, función recomendada oficialmente: resaltar .vuearchivos, con función de formateo y cooperar con el complemento Eslint para formatear y verificar el código.
• Supervisión de especificación de código ESLint:
  •  Función: verifique sus códigos js, html, css para asegurarse de que cumplan con las especificaciones, y el estilo del código es consistente, reglas obligatorias, se le señalará estrictamente si escribe un espacio menos o presiona un retorno de carro más, obsesivo- Trastorno compulsivo Gospel, los estudiantes que lo usan por primera vez pueden estar locos, pero lo agradecerán después de familiarizarse con él.
  • Uso: Para que el complemento surta efecto, su proyecto tiene que hacer una configuración complicada. Afortunadamente, el proyecto generado por vue-cli puede ayudarnos a generar todas las configuraciones. No necesita modificar ninguna regla, solo utilícelo directamente Al usar vue: cuando el cli genera el proyecto del paquete web, le preguntará si desea habilitar eslint y qué conjunto de especificaciones usar, simplemente seleccione la especificación estándar.
•  Complemento de formato de código Prettier - Formateador de código

 

Los tres complementos anteriores pueden formatear automáticamente el código al guardar el archivo y pueden detectar irregularidades en el código al ejecutar el proyecto. Las configuraciones para los tres complementos anteriores se han incluido en el código fuente, y solo necesita código con tranquilidad.

2. Cree una pequeña página de vue (comenzando con vue)

(1) Inicie vscode, haga clic en "abrir carpeta" y seleccione el directorio D:\my\vue-code\hello-vue donde se empaquetó el proyecto vue generado por webpack en este momento,

Por supuesto, también puede controlar el inicio del proyecto vue ingresando comandos en la consola de Terminal.

Vue.config.jsSignifica que los archivos generados por el generador de código Vue.config.jsya están configurados y básicamente no necesitan ser ajustados.

  

(2) Coloque el cd de la terminal de vscode en hello-vue e ingrese los comandos en la consola de la terminal para controlar el inicio del proyecto vue.

Ingrese a la carpeta del directorio del proyecto [D:\my\vue-code\hello-vue], después de ejecutar el siguiente comando, inicie el proyecto con el comando de inicio,

npm run serve

Se iniciará un servidor web localmente. La ventaja de este servidor web es que puede actualizar automáticamente la página.

Ctrl+c: Cierra el servidor web

  

Copie cualquier ruta y ábrala con un navegador (es posible que el navegador no muestre automáticamente una página).

Abra http://localhost:8080/ en el navegador para acceder, el efecto es como se muestra en la siguiente figura: 

3. Una comprensión general de las ideas de diseño de Vue

Para Vue, debe comprender el modo de agregar y eliminar páginas en Vue, el modo de salto de componentes y rutas (es decir, URL de enlace de página web).

• En primer lugar, comprenda el concepto de diseño de vue. La creación de componentes es uno de los aspectos más exitosos de vue. La función de creación de componentes divide un sitio web completo en partes pequeñas, una tras otra.
  • Por ejemplo: hay tres archivos en el directorio del proyecto actual:
    • index.html en todo el directorio del proyecto;
    • App.vue en el directorio src;
    • HelloWorld.vue en la carpeta de componentes;
• Es importante entender la relación entre los tres,
  • Índice: es el marco de trabajo más externo del sitio web. Algunos CSS se pueden definir en su cabeza. Su parte del cuerpo está completamente vacía y solo carga un módulo vue llamado aplicación.
  •  App.vue : está anidado en index.html,

    • El componente HelloWorld.vue se usa y se muestra debajo del logotipo, y el enrutador controla la pantalla en lugar de insertar directamente el componente.

    • Los archivos Vue están todos en este modo y constan de tres partes:
      • <plantilla> arriba: la estructura del componente;
        • <img alt="Vue logo" src="./assets/logo.png">: Se inserta una imagen,
        • <HelloWorld msg="Bienvenido a su aplicación Vue.js"/>: componente HelloWorld.
      • <script> en el medio: coloque el código de comportamiento del componente y defina los datos y funciones utilizados por este componente;
      • <estilo> detrás: poner el estilo css del componente;

4. Fácil de usar

【1】Si el componente se creó recientemente, ¿cómo utilizar el componente?

(1) Análisis:

(2) Comience: cree un nuevo componente y modifique App.vue para la configuración,

Resuelva el error: el nombre del componente "Hola" siempre debe ser de varias palabras

Reproducción de escenarios : use vue-cli para crear un proyecto Vue e informe un error al crear un componente.

Motivo : la versión eslint -plugin-vue se actualizó a @ 8. En comparación con la versión anterior, se agregaron muchas reglas en la versión @ 8, que requiere que los nombres de los componentes se nombren en mayúsculas y minúsculas.

Solución :

• Método 1: siga las reglas y cambie el nombre del componente a mayúsculas y minúsculas, como hola a holaHola
• Método 2: desactivar las reglas y editar elvue.config.js

(1) Aquí usamos primero el segundo método,

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,    // 新增代码
})

(2) Use el primer método para cambiar el nombre,

Luego, reinicie vscode, encontrará que el componente ya no informa un error.

bien, el problema está resuelto.

Luego ejecute el proyecto, la terminal muestra lo siguiente,

Copie cualquier ruta y ábrala con un navegador (es posible que el navegador no muestre automáticamente una página).

Abra http://localhost:8080/ en el navegador para acceder, el efecto es como se muestra en la siguiente figura:

[2] ¿Cómo reutilizar componentes? ¿Y cómo los componentes pasan valores?

(1) Análisis:

Abra http://localhost:8080/ en el navegador para acceder, el efecto es como se muestra en la siguiente figura: 

(2) Si desea mostrar varias películas en la parte frontal, entonces

Abra http://localhost:8080/ en el navegador para acceder, el efecto es como se muestra en la siguiente figura: 

 

5. element-ui: proporciona componentes comunes

Element: un conjunto de bibliotecas de componentes de escritorio basadas en Vue 2.0 para desarrolladores, diseñadores y gerentes de productos. Es un conjunto de marco de front-end de código abierto proporcionado por la empresa nacional Ele.me.Es simple y elegante, y ofrece múltiples versiones como Vue, React y Angular.

Dirección del sitio web oficial: Element: el marco de interfaz de usuario de Vue más popular del mundo

【1】Descargar elemento-ui

Se recomienda usar npm para instalar, se puede usar mejor con la herramienta de empaquetado webpack .

npm i element-ui -S

Después de que la instalación sea exitosa, el paquete.json en el proyecto front-end se registrará automáticamente,

 

Resuelva el error: No se pudo resolver la dependencia:
npm ERR! peer vue@"^2.5.17" from [email protected]

 Reproducción del escenario : en la terminal de vscode, ingrese el comando npm i element-ui -S para informar un error,

Motivo : vue3.0 no es compatible con element-ui, por lo que se lanzó element-plus

Solución : descargar element-plus

(1) En la terminal de vscode, ingrese el comando para descargar element-plus,

npm install element-plus --save

Parece, parece, no funciona. . .

 (2) Después de eso, revisé de nuevo, vi otros blogs, instalé elementUI,

npm install --legacy-peer-deps element-ui --save

(3) Ver pachage.json, se puede ver,

 bien, el problema está resuelto.

consejos: ¿Cómo ejecutar el código del proyecto descargado de Internet?

(1) Simplemente ingrese el proyecto y luego ingrese el terminal csvode

npm install

Este comando encontrará automáticamente pachage.json en la carpeta y descargará automáticamente las bibliotecas requeridas.

(2) Una vez completada la descarga y la instalación, simplemente ejecute el proyecto directamente,

npm run serve

【2】Introducir elemento UI

Introduzca el elemento en main.js de acuerdo con el tutorial del sitio web oficial de vue,

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

El código anterior completa la introducción de Element. Cabe señalar que los archivos de estilo deben importarse por separado.

Resuelva el informe de errores: Vue presenta el informe de errores de Element-ui

Reproducción de escenarios : Vue presenta Element-ui para informar errores

Razón : Al mirar los documentos oficiales, descubrí que vue3 ya no es compatible con la interfaz de usuario original de Ele.me y necesita usar Element-plus adaptado a vue3

Solución: introducir en main.js,

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
 
const app = createApp(App)
 
app.use(ElementPlus)
app.mount('#app')

【3】Fácil de usar: formulario básico

Dirección: Elemento: el marco de interfaz de usuario de Vue más popular del mundo

De acuerdo con el tutorial del sitio web oficial de vue, cree un nuevo componente testTable.vue, modifique la configuración de App.vue,  

<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>
  
  <script>
  export default {
    data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>
  
  <style>
  
  </style>

Abra http://localhost:8080/ en el navegador para acceder, el efecto es como se muestra en la siguiente figura: