vue3.0 admin

vue3-addmin

Brief introduction

Vue3-Admin is a front-end page display of a background management system, which is established by Vue-CLI4 and Elemnet-UI. The latest Vue framework is used, and the component development mode is used inside, so that each component is based on the principle of single function. Although it may feel slightly tired at first (because the sub -component function is single, there are more internal communication), it has very great benefits for the later maintenance. The project uses a flexic box (Flex) layout, so it also has a good display effect on the mobile terminal, which can be opened on DEMO to view on the mobile terminal.

The server has not renewed the timeout and it has been stopped. It is currently impossible to preview. Interested friends draw the code by themselves and run it. Sorry

Demonstration (because the author bought the low -end version of the Alibaba Cloud server by himself, it may lead to a long request time)

Online DEMO

Watch the code to scan the code to view

Develop your experience faster and better, please check the project below

Vue3 actual combat project

Develop

 # 克隆项目
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

Browser access http: // localhost: 8080

release

 # 构建生产环境
npm run build

The packing will appear to appear in the distal folder, just open the index.html page with the chrome browser

Browsers support

Modern Browsers

Firefox	Chrome	Safari
last 2 versions	last 2 versions	last 2 versions

Remark

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