vue3.0 admin

vue3-admin

Introdução

vue3-admin é uma exibição de página front-end de um sistema de gerenciamento de back-end, que é construído e implementado por vue-cli4 e elemnet-ui. A estrutura Vue mais recente é usada e um modelo de desenvolvimento baseado em componentes é adotado internamente, para que cada componente siga o princípio de função única tanto quanto possível. Embora possa parecer um pouco cansativo no início (porque o subcomponente tem uma única função, então há muita comunicação interna), ele traz grandes benefícios para manutenções posteriores. O projeto utiliza um layout de caixa flexível (flex), por isso também tem um melhor efeito de exibição no terminal móvel. Você pode abrir a demonstração no terminal móvel para visualização.

O servidor expirou e não foi renovado. Ele foi encerrado e não pode ser visualizado no momento. Se você estiver interessado, extraia o código e execute-o você mesmo.

Demo (devido à versão de baixa configuração do servidor Alibaba Cloud adquirida pelo próprio autor, o tempo de solicitação pode ser um pouco maior)

Demonstração on-line

Você pode digitalizar o código QR no terminal móvel para visualizar

Para uma experiência de desenvolvimento melhor e mais rápida, confira os projetos abaixo

projeto prático vue3

desenvolver

 # 克隆项目
git clone [email protected]:guodonglw/vue3.0-admin.git

# 进入项目目录
cd vue3.0-admin

# 安装依赖
npm install

# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run serve

# 如遇到node-sass的问题，可尝试
npm rebuild node-sass

Acesso pelo navegador http://localhost:8080

liberar

 # 构建生产环境
npm run build

A pasta dist aparecerá durante o empacotamento, basta abrir a página index.html com o navegador Chrome

Suporte a navegadores

Navegadores modernos

Firefox	Cromo	Safári
últimas 2 versões	últimas 2 versões	últimas 2 versões

Observação

 // 建议首先查看路由文件(了解项目路由以及如何进行动态生成前端路由)
// 页面查看顺序(登录页（views/Login）-> 首页(views/Home/Dashboard))，其中views/Home为其他页面的公共引用部分
// 与后端交互接口（请查看service/index.ts，数据由mock.js产生；实际开发请查看util/request.ts）
// 后台系统包括了登录，异步生成路由，echarts数据可视化，table表增删改查等功能，希望该demo示例可以帮助到有需要的朋友快速上手
// 根据vue-cli示例，主页面index.vue中会采用vue2的写法，在子组件中则有较大的变化，请仔细查看区别