vue3.0 admin

vue3-admin

簡介

vue3-admin是一個後台管理系統的前端頁面展示，是由vue-cli4和elemnet-ui建構實現的。使用了最新的vue框架，內部採用了組件化開發模式，盡可能使得每個組件都遵循單一功能原則。雖然剛開始看起來可能略感疲憊（由於子組件功能單一，所以內部通訊較多），但是對後期的維護有著非常大的好處。本項目採用彈性盒（flex）佈局，故而在行動端也有著較好的顯示效果，可在行動端進行開啟demo檢視。

伺服器超時未續費，已停機，目前無法預覽，有興趣的朋友自己拉取程式碼運行吧，抱歉

示範(由於作者自己買的低配版阿里雲端伺服器，所以可能導致請求時間略長)

線上demo

行動端可掃碼查看

更快更好的開發體驗，請查看下面的項目

vue3實戰項目

開發

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

瀏覽器造訪http://localhost:8080

發布

 # 构建生产环境
npm run build

打包會出現dist資料夾，用Chrome瀏覽器開啟index.html頁面即可

Browsers support

Modern browsers

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

備註

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