Método de instalación de andamios Vue: versión del 28 de mayo de 2023

Método de instalación de andamios Vue: versión del 28 de mayo de 2023

Tabla de contenido

descarga de nodo

Configuración de variables de entorno de nodo

Configuración de la carpeta global y la carpeta de caché de npm

Modificar la imagen del espejo doméstico [Ali]

ver información de vue

Instalar VUE y enrutamiento

Instalar el cliente vue

Instalar vue init

Ver versión vue

Configurar nuevas variables de entorno

Crear un proyecto Vue

Inicie el proyecto Vue

Acceso a través de la ruta del servicio vue

Descripción del nivel de Vue

directorio fuente

instalación del complemento vetur

editar

ejemplo de demostración

enrutadorenrutamiento

Sintaxis de uso de ruta:

Práctica de enrutamiento:

Configurar enrutamiento:

Prueba transversal de tabla demo3

Introduzca la operación axios (equivalente a ajax):

Ejemplo de Axios:

Axios analiza el archivo json:

---

descarga de nodo

La versión del nodo utiliza la última versión:

Índice de /dist/latest-v20.x/

Descomprimir directamente después de la descarga

Configuración de variables de entorno de nodo

Ya que descargamos la versión descomprimida, podemos configurar el entorno directamente.

Abrir mi computadora, propiedades, configurar variables de entorno

Simplemente siga los pasos a continuación:

Comprobar la versión de npm

npm -v

Configuración de la carpeta global y la carpeta de caché de npm

Cree dos carpetas [ node_global ] y [ node_cache ] debajo de la carpeta actual

Haga clic derecho en [Nueva carpeta]

Abra [cmd] para modificar la ubicación de configuración:

Puede ejecutarlo después de cambiar la ruta de la carpeta usted mismo.

npm config set prefix "D:\save\exe\Servers\nodejs\node-v20.2.0-win-x64\node_global"
npm config set cache "D:\save\exe\Servers\nodejs\node-v20.2.0-win-x64\node_cache"

Efecto de ejecución:

Comprobar si la configuración es exitosa

npm config list

Modificar la imagen del espejo doméstico [Ali]

Si es una dirección espejo extranjera, se modificará a nacional, si es una dirección espejo nacional, no se cambiará.

npm config set registry=http://registry.npm.taobao.org
npm config list

A través de este comando, puede verificar directamente si es de Taobao 

npm config get registry

ver información de vue

npm info vue

Vamos a copiarlo, donde [-g] representa la carpeta instalada en el global, es decir, [D:\save\exe\Servers\nodejs\node-v20.2.0-win-x64\node_global] que configuramos.

npm install -g [email protected]

Actualice directamente a la versión correspondiente.

Instalar VUE y enrutamiento

npm install vue -g
npm install vue-router -g

Puede ver los enrutadores xue y vue que acabamos de instalar en [node_modules] en la carpeta global.

Instalar el cliente vue

npm install vue-cli -g

Aunque hay un aviso anormal, 230 archivos se instalaron correctamente. 

Instalar vue init

npm install -g @vue/cli-init

Ver versión vue

vue -V

Configurar nuevas variables de entorno

Solo sigue los pasos

Crear un proyecto Vue

Nota especial: los nombres de los proyectos no pueden comenzar con números y las letras mayúsculas no están permitidas en los hits de los proyectos.

Encuentre una carpeta vacía para crear el proyecto:

vue init webpack vue01

Crear efecto terminado:

proyecto

Inicie el proyecto Vue

cd vue01
npm run dev

Hay un indicador de red para permitirlo.

Página de cmd de servicio

Acceso a través de la ruta del servicio vue

Acceso exitoso: http://localhost:8080/

Descripción del nivel de Vue

directorio fuente

instalación del complemento vetur

Simplemente busque la primera instalación de vetur en la extensión.

ejemplo de demostración

    <hr/>
    <input type="text" v-model="msg" placeholder="与msg双向绑定"/>
    <hr/>

Resultados de la prueba:

enrutadorenrutamiento

Sintaxis de uso de ruta:

<!-- 字符串 -->
<router-link to="/home">Home</router-link>
 
<!-- 渲染结果 -->
<a href="/home">Home</a>
 
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link :to="'/home'">Home</router-link>
 
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link :to="{ path: '/home' }">Home</router-link>
 
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: '9527' }}">User</router-link>
 
<!-- 有查询参数，下面的结果为 `/register?plan=private` -->
<router-link :to="{ path: '/register', query: { plan: 'private' }}">
  Register
</router-link>

Práctica de enrutamiento:

Agregue 3 componentes debajo de los componentes: [demo1.vue], [demo2.vue], [demo3.vue]

Configurar enrutamiento:

Operamos enrutamiento en index.js bajo [router]

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
 
import demo1 from '@/components/demo1'
import demo2 from '@/components/demo2'
import demo3 from '@/components/demo3'
Vue.use(Router)
 
export default new Router({
    routes: [{
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        },
        { path: '/demo1', name: 'demo1', component: demo1 },
        { path: '/demo2', name: 'demo2', component: demo2 },
        { path: '/demo3', name: 'demo3', component: demo3 }
    ]
})

Agregamos rutas a las tres demostraciones.

Agregar un hipervínculo a la página de inicio

<hr/>
<router-link to="/demo1">我是demo1</router-link>
<router-link to="/demo2">我是demo2</router-link>
<router-link to="/demo3">我是demo3</router-link>
<hr/>

El archivo agregado es [App.vue], simplemente interpárelo directamente en el medio y use hr para dividirlo.

Efecto de página:

Efecto de salto: la ruta coincide con el contenido y la prueba es exitosa.

Prueba transversal de tabla demo3

Copie el siguiente código en el archivo demo3.vue.

<template>
    <div>
        <h1>组件路径Demo1</h1>
         <table border="1">
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>简介</td>
            </tr>
            <tr v-for="(item,key) in list" :key="key">
                <td>{
   
   {item.id}}</td>
                <td>{
   
   {item.name}}</td>
                <td>{
   
   {item.introduce}}</td>
            </tr>
        </table>
    </div>
</template>
<script>
export default {
     data(){
          return {
                  list:[
         {id:1,name:"学习强国",introduce:"人民有信仰"},
         {id:2,name:"强国强己",introduce:"国强民必强"}
       ]
          }
      }
}
</script>
<style>
    table{
         width:100%;text-align:center;
    }
</style>

Cópielo directamente en el archivo demo3.vue:

Introduzca la operación axios (equivalente a ajax):

import axios from 'axios'

Mensaje de error.

Ctrl+c detiene el servicio y ejecuta el comando cuando se le solicita.

Reanudar:

npm run dev

Ejemplo de Axios:

preparación de datos.

[
    { "id": 1, "name": "学习强国", "introduce": "人民有信仰" },
    { "id": 2, "name": "强国强己", "introduce": "国强民必强" }
]

prueba de acceso de ruta estática estática:

http://localhost:8080/static/data.json

Axios analiza el archivo json:

Reemplace todo el código de demo2.vue a continuación

<template>
    <div>
        <h1>组件路径demo2</h1>
         <table border="1">
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>简介</td>
            </tr>
            <tr v-for="(item,key) in list" :key="key">
                <td>{
   
   {item.id}}</td>
                <td>{
   
   {item.name}}</td>
                <td>{
   
   {item.introduce}}</td>
            </tr>
        </table>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data(){
        return{
            list:""
        }
    },created:function(){
        var _this = this;
        var url = "./static/data.json";
        axios.get(url).then(
                function(res) {
                _this.list = res.data;
            });
    }
}
</script>
<style>
    table{
        width:100%;
        border-collapse: collapse;
    }
</style>

Efecto:

Significa que el json ha sido analizado sin excepción.

El funcionamiento básico de vue se ha explicado aquí. Creo que después de este punto, siempre que sepa algo sobre el front-end, casi puede decir que puede comenzar. Le deseo todo lo mejor en su trabajo.