Gran front-end relacionado: nodejs a vue

I. Introducción

  En la actualidad, a menudo se dice que los extremos delantero y trasero están separados, y el extremo frontal también tiene un montón de tecnologías mágicas.Algunas cosas que solo el extremo trasero puede hacer, el extremo frontal también puede hacer (como conectarse al base de datos). Frente a algunos sistemas pequeños, los ingenieros de front-end pueden manejar todo el sistema. El jsp que aprendí antes parece no tener ningún uso práctico. Aquí, Node.js se usa como punto de entrada para simplemente aprender sobre el gran frente.

Dos, instalación de vscode

1. Instalar

Vaya directamente al sitio web oficial para descargar vscode
Sitio web oficial de vscode
Baidu Encyclopedia:
  Visual Studio Code (denominado "VS Code") es el anuncio oficial de Microsoft en la Build Developers Conference el 30 de abril de 2015 que se ejecuta en Mac OS X, Windows y Linux Un editor de código fuente multiplataforma para escribir aplicaciones web y en la nube modernas que se ejecuta en el escritorio y está disponible para Windows, macOS y Linux. Tiene soporte incorporado para JavaScript, TypeScript y Node.js, y tiene un rico ecosistema de extensiones para otros lenguajes (como C++, C#, Java, Python, PHP, Go) y tiempos de ejecución (como .NET y Unidad).

2. Operación simple de vscode

CTRL+P		搜索(配置/...)
>Configure Display Language		切换语言配置		在搜索中输入(后面一样)
>font		字体大小等设置
或者：
文件-->首选项-->设置-->font	 大概中间有关font size 直接调整
文件-->首选项-->设置-->emment	打开TAB自动补齐(默认打开)
！				！自动生成基本html格式

3. Nodo.js

1. Instalar

  Instale su propia computadora necesita descargar desde el sitio web oficial: instalación de estilo tonto del sitio web oficial
, configure automáticamente las variables de entorno y ahora integre npm.

2. La instalación de prueba es exitosa

Ingrese directamente en la terminal cmd:

node -v		查看版本号---测试是否安装成功
npm -v		查看包管理器版本(npm包管理器，后面说)

Muchas instalaciones pueden usar -v o -version para ver la versión y verificar si la instalación se realizó correctamente.

3. Fácil de usar

Cree un nuevo archivo httpsserver.js con vscoe: respuesta de la página web

//导入模块是require就类似于import java.io
const http=require("http");

//1.创建一个httpserver服务
http.createServer(function(request,response){
    
    
    //浏览器怎么认识hello server!!
    //下面这行告诉浏览器将以text-plain(文本)去解析hello server这段数据
    response.writeHead(200,{
    
    'Content-type':'text/html'});//text/html是html格式(即<strong>会翻译成标签)
    //给浏览器输出内容
    //2.监听一端口8888
    response.end("<strong>hello server!</strong>");
}).listen(8888)
console.log("你启动的服务是:http://localhost:8888已启动成功");

//3.启动服务 终端输入node httpserver.js
//4.在浏览器访问http://localhost:8888

4. Base de datos de conexiones front-end

Entrada de terminal: nmp install mysql —— instale el módulo de operación mysql de nodejs
Después de la instalación, aparecerán tres archivos node_modules, package-lock.json y package.json

Crear un nuevo archivo db.js

//导入mysql依赖包，mysql属于第三方的模块就类似于java.sal
var mysql=require("mysql");

//1.创建一个mysql的Connection对象
//2.配置数据连接的信息
var connection=mysql.createConnection({
    
    
    host:"127.0.0.1",
    user:"root",
    port:3306,
    password:"root",
    database:"testdb"//连接testdb数据库
});
//3.开辟连接
connection.connect();
//4.执行curd
connection.query("select * from _user",function(error,results,fields){
    
    
    //如果查询出错，直接抛出
    if(error)throw error;
    //查询成功（网页打开console查看数据）
    console.log("results = ",results);
});
//5.关闭连接
connection.end();

//最后一步：运行node db.js查看效果

Cuatro, sintaxis ES6

1. ¿Qué es ES6?

 Antes de escribir html, jsp var, etc. son todos sintaxis de ECMAScript 5. Si ha escrito con idea, debe encontrar que idea siempre quiere que reemplace var con let o const. ECMAScript6 es imprescindible para los grandes front-end. Aquí hay una breve introducción al aprendizaje.
Enciclopedia de Baidu:
 ECMAScript 6 (ES6 para abreviar) es un estándar de lenguaje JavaScript lanzado oficialmente en junio de 2015, llamado oficialmente ECMAScript 2015 (ES2015). Su objetivo es hacer que el lenguaje JavaScript se pueda usar para escribir aplicaciones complejas a gran escala y convertirse en un lenguaje de desarrollo de nivel empresarial.
Además, en algunos casos, ES6 también hace referencia a las novedades de ES2015 y posteriores, aunque las versiones posteriores deberían llamarse ES7, ES8, etc.

2. let y const

El código solo tiene la parte <body>, use ! Plantilla generada automáticamente

    <script>
        //传统定义变量和常量的方式 统一使用var
        var name="张三";
        var link="https://www.baidu.com";
        var PI=Math.PI;
        console.log(name);
        console.log(link);
        console.log(PI);        
        //ES6定义方式
        let name2="李四";
        let link2="https://www.baidu.com";       
        //定义常量
        const PI2=Math.PI;
        console.log(name2);
        console.log(link2);
        console.log(PI2);
    </script>

    <script>
        //let 和const解决var的变量穿透问题，和常量修改的问题
        for(var i=0;i<5;i++){
    
    
            console.log(i);
        }
        //变量穿透,输出5，let会报错
        console.log(i);
        //var定义常量可以被修改，const定义的常量修改会报错
        var PI=Math.PI;
        PI=100;
        console.log(PI);
        //在实际开发和生产中，如果是小程序，unipp或者是一些脚手架中，可以大胆的去使用let和const
        //但是如果在web开发中，建议还是使用var，因为在一些低版本的浏览器还是不支持let和const        
    </script>

3. Cadenas de plantillas

    <script>
        //字符串会牵涉到动态部分
        var person={
    
    
            name:"张三",
            address:"天津码头",
            target:"福记商铺"
        }
        let address="传统的--我是"+person.name+"，在"+person.address+"抬货到"+person.target;
        console.log(address);

        //ES6的模板字符串语法
        let address2=`ES6--我是${
      
      person.name}，在${
      
      person.address}抬货到${
      
      person.target}`;
        console.log(address2);

    </script>

4. Parámetros predeterminados de la función

    <script>
        //函数默认参数
        function sum(a,b){
    
    
            return a+b;
        }
        var result=sum(100,200);    //300
        var result=sum(100);        //NaN  ---sum(100,undefined);
        console.log("result = "+result);

        //但是可以在定义函数给默认值解决这个问题
        function sum2(a=100,b=200){
    
    
            return a+b;
        }
        var result=sum2(400);        //600
        console.log("result = "+result);
    </script>

5. Funciones de flecha

    <script>
        //箭头函数 - 重点(在未来的项目开发中：比如小程序，unipp，一些常见的脚手架大量使用)
       
        //原来函数
        var sum=function(a,b){
    
    
            return a+b;
        }
        //箭头函数改进--1
        var sum2 = (a,b)=>{
    
    
            return a+b;
        }
        //箭头函数改进--2
        var sum3= (a,b)=>a+b;
        console.log(sum(100,200));
        console.log(sum2(100,200));
        console.log(sum3(100,200));
        //通过上面的列子找到的规律
        //1：去掉function 
        //2.在括号后面加箭头
        //3.如果逻辑代码中仅有return可以直接省去。(如果有逻辑体，就不能省略)
        //4.如果参数只有一个，括号也可以省去（自然多个参数必须加括号）
        var sum4 = (a,b) =>{
    
    
            var num=a+b;
            return num;//不能省略
        }
        //var sum5 = (a,b)=>a+b;
        
        //例子
        var arr=[1,2,3,4,5,6];
        var arrNew=arr.map(function(obj){
    
    
            return obj*2;
        });
        console.log(arrNew);
        //箭头函数简化
        var arrNew2=arr.map(obj=>obj*2);
        console.log("箭头函数简化数组乘二："+arrNew2);
    </script>

6. Taquigrafía de inicialización de objetos y análisis de casos

    <script>
        //原本
        var info={
    
    
            title:"天津狗不理",
            goods:"包子",
            go:function(){
    
    
                console.log("卖包子");
            }
        };
        console.log("原本对象"+info);

        //es6简写
        //对象是key:value
        //如果key和变量名一致，可以只定义一次
        //如果value是一个函数，可以把`:function`去掉，只剩下()即可
        var title="天津狗不理";
        var goods="包子";
        let info2={
    
    
            title,
            goods,
            go(){
    
    
                console.log("卖包子");
            }
        };
        console.log("ES6简写对象:"+info2);
        console.log("ES6简写对象:"+info2.title);
        console.log("ES6简写对象:"+info2.goods);
        console.log("ES6简写对象:"+info2.go());//这里会先执行info2.go()，下一行返回ES6简写对象:undefined
        
    </script>

ejemplo:

    <form action="">
        <p>账号：<input type="text" id="account"></p>
        <p>密码：<input type="text" id="password"></p>
        <p><input type="button" value="登录" id="loginbtn"></p>
    </form>

    <script>
        $("#loginbtn").onclick(function(){
    
    
            var account=$("#account").val();
            var password=$("#password").val();
            //执行异步请求
            // $.ajax({
    
    
            //     type:"post",
            //     url:"xxx",
            //     data:{account:account,password:password},
            //     success:function(){
    
    
                    
            //     }
            // });

            //简写
            var params={
    
    account,password};
             $.ajax({
    
    
                type:"post",
                url:"xxx",
                data:params,
                success(){
    
    
                    
                }
            });
        });
    </script>

7. Deconstrucción de objetos

    <script>
        //对象key:value存在,获取对象属性和方法的方式有两种
        //1.通过.
        //2.通过[]

        var title="天津狗不理";
        var goods="包子";
        let info2={
    
    
            title,
            goods,
            go(){
    
    
                console.log("卖包子");
            }
        };

        console.log("通过.方式--------------------");
        //通过.
        console.log(info2.title);
        console.log(info2.goods);
        info2.go();

        console.log("通过[]方式-----------------");
        //通过[]的方式
        console.log(info2["title"]);
        console.log(info2["goods"]);
        info2["go"]();

        console.log("ES6获取属性和方法的方式-----------------");
        //ES6获取属性和方法的方式(es6对象解构--其实就是快速获取属性和方法的一种形式)
        var {
    
    title,goods,go}=info2;
        //还原代码
        // var title=info2.title;
        // var goods=info2.goods;
        console.log(title,goods);
        go();
    </script>

8. Operador de dispersión de objetos

    <script>
        //对象传播操作符...
        var person={
    
    
            name:"张三",
            address:"天津码头",
            evetnt:"抬杠",
            nickname:"钢三",
            go(){
    
    
                console.log("抬杠抬到力能扛鼎");
            }
        };

        //解构
        var {
    
    name,address,...person2}=person;
        console.log(name);
        console.log(address);
        console.log(person2);
    </script>

    <script>
        //java----后台
        //数据格式: var userPage={pages:10,user:[{},{}],pageNo:1,pageSize:100,total:100};
        //异步请求
        //$.post("/user/search",funtion(res){
    
    
            var userPage={
    
    pages:10,user:[{
    
    },{
    
    }],pageNo:1,pageSize:100,total:100};
            var {
    
    users,...userPage2}=userPage;
            
        // })

    </script>

9. Mapa de matriz

    <script>
        //要对arr数组每个数组*2
        let arr=[1,2,3,4,5,6,7];
        //传统方式
        let newarr=[];
        for(let i=0;i<arr.length;i++){
    
    
            newarr.push(arr[i]*2);
        }
        console.log(newarr);  
        
        //map
        let newArr2=arr.map(ele=>ele*2);
        console.log("map实现数组*2:"+newArr2);

        //map处理对象的数据
        var user=[{
    
    age:10,name:"珂赛特"},{
    
    age:10,name:"洛丽塔"},{
    
    age:18,name:"吉普赛"}];
        let newUser=user.map(function(ele){
    
    
            ele.age +=1;
            return ele;
        });
        // let newUser=user.map(ele=>ele.age += 1);//这个只返回年龄
        console.log(newUser);

    </script>

10. Matriz de reducción

    <script>
        let arr=[1,2,3,4,5,6,7,8,9,10];
        let result=arr.reduce((a,b)=>a+b);
        console.log("result:"+result);
        //原理：a=1 b=2 result=3
        //a=3 b=3 result=6
        //....
        //a=45 b=10 result=55
    </script>

11. nodejs y <\script>

Cree un nuevo archivo 01.js, simplemente tome el código anterior y póngalo

//字符串会牵涉到动态部分
var person={
    
    
    name:"张三",
    address:"天津码头",
    target:"福记商铺"
}
let address="传统的--我是"+person.name+"，在"+person.address+"抬货到"+person.target;
console.log(address);

//ES6的模板字符串语法
let address2=`ES6--我是${
      
      person.name}，在${
      
      person.address}抬货到${
      
      person.target}`;
console.log(address2);

Ejecutar en la terminal:
node .\01.js
El resultado es que las mismas
funciones de sintaxis en <script> en html se pueden usar directamente en nodejs

5. npm

1. Introducción

Npm es equivalente a Maven NPM en el back-end
: Node Package Manager
, por lo que también hay un almacén correspondiente: simplemente busque directamente en el sitio web oficial
https://www.npmjs.com/

2. Función

1. Cree rápidamente proyectos de nodejs
2. Instale rápidamente y dependa de módulos de terceros. Por ejemplo: npm install mysql redis, etc.

3. Inicializar el proyecto

终端运行：>npm init 初始化
名称默认回车
版本：可以自己指定eg:1.0.1
描述：我是一个node工程
入口函数：默认index.js回车就行
测试命名---不需要回车就行
仓库地址(git repository)---如果不需要回车就行
关键词  自定义node
作者    自定义person
回车确认

Obtenga el archivo package.json, cuyo contenido es el siguiente:

{
  "name": "3npmpro",            //工程名
  "version": "1.0.1",           //版本
  "description": "我是一个node工程",   //描述
  "main": "index.js",           //入口js
  "scripts": {                  //运行脚本
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "node"
  ],
  "author": "person",           //开发者
  "license": "ISC"              //授权协议
}

Al igual que el archivo pom.xml, el rol de administración depende de
nosotros. Cuando hacemos la prueba, también podemos ingresar directamente npm init -y en la terminal para inicializar por defecto.

4. Introducción a la instalación y desinstalación de módulos

Instale rápidamente y dependa de módulos de terceros
Terminal:

npm init -y     全部默认参数完成初始化(生成package.json)
npm install mysql   (node_modules和package-lock.json)(mysql在node_modules下的mysql)
npm i redis         (redis也在在node_modules下)

¿La instalación rápida depende de módulos de terceros?

npm install xxx o npm i xxx nombre del módulo
El módulo de instalación se coloca en la carpeta node_moudules del proyecto

Módulos de uso:

- require
//导入模块redis
const redis = require("redis");
//导入mysql
const mysql=require("mysql");

archivo xx.js:

//导入模块redis
const redis = require("redis");
//导入mysql
const mysql=require("mysql");

const client =redis.createClient();
client.on("error",function(error){
    
    
    console.error(error);
});

client.set("key","value",redis.print);
client.get("key",redis.print);

Desinstalar el módulo:

npm uninstall vue jquery

5.archivo paquete.json

archivo paquete.json:

"dependencies": {
"mysql": "^2.18.1",
"redis": "^3.1.2"
}

Las dependencias descargadas a través de npm install xxx se registrarán en el archivo package.json, que es similar a
la función de los registros pom.xml en maven: reutilización
Si crea un nuevo proyecto, puede copiar el archivo package.json en un nuevo directorio , luego abra el cmd en el directorio actual e ingrese "npm install" para descargar todas las configuraciones registradas en package.json

6.cnpm

Al igual que Maven, el almacén está en el extranjero y la descarga nacional es lenta.
Puede utilizar el espejo doméstico Taobao cnpm:
para instalar:

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm -v Ver información de la versión de cnmp

6-2 Ocurrió un error al instalar cnpm

Si obtiene el siguiente error:
C:\Users\Lenovo\AppData\Roaming\npm\cnpm.ps1 porque la ejecución de scripts está prohibida en este sistema.
solución:

	1.在win10 系统中搜索框 输入 Windows PowerShell，选择 管理员身份运行
	2.使用，win+R打开了powershell命令行之后,输入set-ExecutionPolicy RemoteSigned，
然后更改权限为A，最后通过 get-ExecutionPolicy 查看当前的状态
总结:powershell打开后输入：set-ExecutionPolicy RemoteSigned 回车;A 回车;get-ExecutionPolicy 回车。

Seis, babel

1. Introducción y función

Función: se usa para cambiar la configuración de es (muchas configuraciones de navegador no son lo suficientemente altas, se puede usar para transcodificar es6 en es5)

2. Instalar

Entrada de terminal cmd:

cnpm install -g babel-cli       安装(-cli默认安装到c盘)
babel --version             查看版本

3. uso

Cree una nueva carpeta, entrada de terminal:
npm init -y initialization
Cree un nuevo archivo /src/example.js (archivo que se transcodificará)

//es6
let name = "张三";
const address = "西安";
let arr=[1,2,3,4,5];
let newArr=arr.map(a=>a*2);
console.log(name);
console.log(address);
console.log(newArr);

Cree un archivo .babelrc en el directorio raíz (configuración de babel, a qué versión convertir, aquí es es2015)

{
    
    
    "presets":["es2015"],
    "plugins": []
}

Terminal ejecuta:

babel src -d dist

Los errores generalmente ocurren aquí:

No se pudo encontrar el preajuste "es2015" relativo al directorio "E:\XXX\XXX\5babel"
porque es2015 no está instalado

Terminal ejecuta:

cnpm install babel-preset-es2015 --save-dev
aparece el archivo node_modules

Vuelva a realizar la conversión:
babel src -d dist
(aparece dist/example.js (versión es2015)) (transcodifique el archivo bajo src al archivo dist)
js después de la transcodificación:

"use strict";//使用严格模式，严格模式下你不能使用未声明的变量。

//es6
var name = "张三";
var address = "西安";
var arr = [1, 2, 3, 4, 5];
var newArr = arr.map(function (a) {
    
    
  return a * 2;
});
console.log(name);
console.log(address);
console.log(newArr);

pd: la instalación del nuevo proyecto también copia el archivo package.json en una nueva carpeta y ejecuta: npm install

4. Guión personalizado

Aquí hay una breve mención de las secuencias de comandos personalizadas: después de descargar proyectos de Internet, generalmente ingresamos npm run dev en la terminal para ejecutar el proyecto debido a las secuencias de comandos personalizadas.
Agregue el script en el archivo package.json:
archivo fuente:

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},

Después de la modificación:

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"babel src -d dist"
},

Ejecución de terminal:
npm run dev
se ejecuta automáticamente

7. Modularización

1. Introducción

El front-end se está volviendo cada vez más complejo, por lo que también se ha producido un mecanismo similar al paquete java (importación) y especificaciones de modularización. Aquí hay una mención de la especificación modular CommonJS y la especificación modular ES6

2. Especificación modular de CommonJS

Exportar archivo:

//工具类
const sum = ((a,b)=>a+b);
const sub = ((a,b)=>a-b);
const mul = ((a,b)=>a*b);
const di = ((a,b)=>a/b);
//如何导出给别人使用
module.exports={
    
    
    sum,
    sub,
    mul,
    di
}

Prueba de importación (similar a la clase de importación de Java, que se puede usar directamente después de la importación):

//require
const m=require('./四则运算.js');
console.log(m.sum(4,2));
console.log(m.sub(4,2));
console.log(m.mul(4,2));
console.log(m.di(4,2));

3. Especificación modular ES6 (de uso común)

Cree un nuevo archivo src/userApi.js (archivo de exportación):

export function getList(){
    
    
    //在真实业务中，异步获取数据
    console.log("获取数据列表");
}

export function save(){
    
    
    //在真实业务中，异步获取数据
    console.log("保存数据");
}

Cree un nuevo archivo src/userTest.js (archivo de prueba de importación):

import {
    
    getList,save} from './userApi.js'

getList();
save();
//默认不支持es6语法

Si ejecuta userTest y reporta un error

<!-- import {getList,save} from './userApi.js'
^^^^^^
SyntaxError: Cannot use import statement outside a module -->
//默认不支持es6语法

Solución:

npm init -y     先初始化
新建.babelrc文件      转码配置
cnpm install babel-preset-es2015 --save-dev    安装es2015依赖
在package.json文件新建脚本
"build":"babel src -d dist"
终端:npm run build
node .\dist\userTest.js 成功运行

4. La forma común de escribir es6 (versión mejorada de 3)

Cree un nuevo archivo src/userApi.js (archivo de exportación):

export default{
    
    
    getList(){
    
    
        //在真实业务中，异步获取数据
        console.log("获取数据列表");
    },

    save(){
    
    
        //在真实业务中，异步获取数据
        console.log("保存数据");
    }
}

Cree un nuevo archivo src/userTest.js (archivo de prueba de importación):

import user from './userApi.js'

user.getList();
user.save();

8. paquete web

1. Introducción

Webpack es un empaquetador de módulos que puede convertir varios recursos estáticos js, css y menos en un archivo estático para mostrar su contenido.

2. Instalar

cnpm install -g webpack webpack-cli
webpack -v      查看版本

3. Pasos de empaquetado de prueba js

Prueba: en la carpeta src/ - main.js importa archivos util.js y common.js
1 "Crear un proyecto nodejs npm init -y
2" Crear un directorio src
3" Almacenar dos util.js que deben fusionarse en src y archivos common.js
util.js:

//相加函数
exports.add=(a,b)=> a+b;
//动态增加的相减函数
exports.minus=(a,b)=> a-b;

Archivo común.js:

//输出例子
exports.info=function(str){
    
    
    console.log(str);
    document.write(str);
}

4》Prepare un archivo de entrada main.js, de hecho, el módulo se concentra para importar
el archivo main.js:

//导入util和common
const util =require("./util");
const common =require("./common");

common.info("Hello World ,"+util.add(100,100));
document.write("<br />")
common.info("Hello World ,"+util.minus(100,50));

5"Defina un archivo webpack.config.js en el directorio raíz para configurar las reglas de empaquetado

//导入path模块"path"是nodejs的内置模块
const {
    
     dirname } = require("path");
const path=require("path");

//定义JS打包的规则
module.exports={
    
    
    //入口函数：从哪里开始进行编译打包
    entry:"./src/main.js",
    //编译成功以后把内容输出到哪里去
    output:{
    
    
        //定义输出指定目录      __dirname当前目录根目录，产生一个dist文件
        path:path.resolve(__dirname,"./dist"),
        //定义合并的文件名
        filename:"bundle.js"
    }
}

6" Ejecute webpack para ver el efecto
Entrada de terminal:

webpack         打包开始
webpack -w      动态监视打包

4. Pruebe el empaque Css

La versión anterior de Webpack solo puede procesar módulos de JavaScript de forma predeterminada. Si desea procesar otros tipos de archivos, debe usar el cargador para convertirlos
.
Cree cualquier archivo style.css en el directorio

body{
    
    
    background: yellow;
}

1》Instale primero el complemento del cargador correspondiente

cnpm install --save-dev estilo-cargador css-loader

2》Configurar en webpack.config.js

//导入path模块"path"是nodejs的内置模块
const {
    
     dirname } = require("path");
const path=require("path");

//定义JS打包的规则
module.exports={
    
    
    //入口函数：从哪里开始进行编译打包
    entry:"./src/main.js",
    //编译成功以后把内容输出到哪里去
    output:{
    
    
        //定义输出指定目录      __dirname当前目录根目录，产生一个dist文件
        path:path.resolve(__dirname,"./dist"),
        //定义合并的文件名
        filename:"bundle.js"
    },
    module:{
    
    
        rules:[{
    
    
            test:/\.css$/,      //把项目中所有的.css结尾的文件打包
            use:["style-loader","css-loader"]
        }]
    }
}

3》Importar css en principal

requerir("./estilo.css");

Paquete web de ejecución de 4"

Ejemplo, View-element-admin

Introducción (oficial):
vue-element-admin es una solución de back-end front-end basada en vue y element-ui. Utiliza la pila de tecnología front-end más reciente, soluciones de internacionalización i18n integradas, enrutamiento dinámico, verificación de autoridad, refina los modelos comerciales típicos y proporciona componentes funcionales enriquecidos. Puede ayudarlo a crear rápidamente prototipos de productos intermedios de nivel empresarial. Creo que no importa cuáles sean tus necesidades, este proyecto puede ayudarte.
Descargar código fuente: vista previa de la dirección del código fuente
: vista previa de la dirección

Solo eche un vistazo y escribiré un artículo separado sobre vue más adelante.