第13天:vue

您所在的位置:网站首页 hezhongfengvue 第13天:vue

第13天:vue

2023-02-20 00:05| 来源: 网络整理| 查看: 265

vue-element-admin后台集成方案 vue-element-admin介绍安装与使用安装 注意事项源码解读

vue-element-admin介绍 vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现(后台管理系统,管理员操作界面)。内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件。可以快速搭建企业级中后台产品原型。地址:https://panjiachen.github.io/vue-element-admin-site/zh/guide/ 在这里插入图片描述 安装与使用

vue-element-admin:https://github.com/PanJiaChen/vue-element-admin vue-admin-template:https://github.com/PanJiaChen/vue-admin-template

下面以vue-admin-template为基础进行开发,vue-element-admin作为参考。 项目已经生成了一个完整的开发框架,提供了涵盖中后台开发的各类功能和坑位,下面是整个项目的目录结构:

├── build # 构建相关 ├── mock # 项目mock 模拟数据 ├── plop-templates # 基本模板 ├── public # 静态资源 │ │── favicon.ico # favicon图标 │ └── index.html # html模板 ├── src # 源代码 │ ├── api # 所有请求 │ ├── assets # 主题 字体等静态资源 │ ├── components # 全局公用组件 │ ├── directive # 全局指令 │ ├── filters # 全局 filter │ ├── icons # 项目所有 svg icons │ ├── lang # 国际化 language │ ├── layout # 全局 layout │ ├── router # 路由 │ ├── store # 全局 store管理 │ ├── styles # 全局样式 │ ├── utils # 全局公用方法 │ ├── vendor # 公用vendor │ ├── views # views 所有页面 │ ├── App.vue # 入口页面 │ ├── main.js # 入口文件 加载组件 初始化等 │ └── permission.js # 权限管理 ├── tests # 测试 ├── .env.xxx # 环境变量配置 ├── .eslintrc.js # eslint 配置项 ├── .babelrc # babel-loader 配置 ├── .travis.yml # 自动化CI配置 ├── vue.config.js # vue-cli 配置 ├── postcss.config.js # postcss 配置 └── package.json # package.json 安装 # 克隆项目 git clone https://github.com/PanJiaChen/vue-element-admin.git # 进入项目目录 cd vue-element-admin # 安装依赖 npm install # 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org # 本地开发 启动项目 npm run dev

运行结果 在这里插入图片描述

注意事项 若依赖安装不成功,很大概率是node-sass安装失败。node-sass因为其历史原因,安装时极易失败,同时node-sass依赖了Python环境,因此电脑上需要安装配置Python2。建议直接使用课程提供的包含有依赖包的项目,简化学习曲线。 源码解读

可以参考官方文档的配套教程文章: 在这里插入图片描述

后面再继续更新~~~



【本文地址】


今日新闻


推荐新闻


    CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3