vue3.0 admin
1.0.0
vue3-admin คือการแสดงส่วนหน้าของระบบการจัดการแบ็กเอนด์ ซึ่งสร้างและใช้งานโดย vue-cli4 และ elemnet-ui มีการใช้เฟรมเวิร์ก Vue ล่าสุด และนำโมเดลการพัฒนาตามคอมโพเนนต์มาใช้ภายใน เพื่อให้แต่ละคอมโพเนนต์เป็นไปตามหลักการฟังก์ชันเดียวให้มากที่สุดเท่าที่จะเป็นไปได้ แม้ว่าในตอนแรกอาจดูเหนื่อยเล็กน้อย (เนื่องจากส่วนประกอบย่อยมีฟังก์ชันเดียว จึงมีการสื่อสารภายในจำนวนมาก) แต่ก็มีประโยชน์อย่างมากสำหรับการบำรุงรักษาในภายหลัง โปรเจ็กต์ใช้เค้าโครงกล่องแบบยืดหยุ่น (ดิ้น) ดังนั้นจึงมีเอฟเฟกต์การแสดงผลที่ดีกว่าบนเทอร์มินัลมือถือ คุณสามารถเปิดการสาธิตบนเทอร์มินัลมือถือเพื่อดูได้
การสาธิตออนไลน์
คุณสามารถสแกนโค้ด QR บนเทอร์มินัลมือถือเพื่อดูได้
โครงการภาคปฏิบัติ 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 จะปรากฏขึ้นเมื่อทำบรรจุภัณฑ์ เพียงเปิดหน้า index.html ด้วยเบราว์เซอร์ Chrome
เบราว์เซอร์สมัยใหม่
ไฟร์ฟอกซ์ | โครเมียม | ซาฟารี |
|---|---|---|
| 2 เวอร์ชั่นล่าสุด | 2 เวอร์ชั่นล่าสุด | 2 เวอร์ชั่นล่าสุด |
// 建议首先查看路由文件(了解项目路由以及如何进行动态生成前端路由)
// 页面查看顺序(登录页（views/Login）-> 首页(views/Home/Dashboard))，其中views/Home为其他页面的公共引用部分
// 与后端交互接口（请查看service/index.ts，数据由mock.js产生；实际开发请查看util/request.ts）
// 后台系统包括了登录，异步生成路由，echarts数据可视化，table表增删改查等功能，希望该demo示例可以帮助到有需要的朋友快速上手
// 根据vue-cli示例，主页面index.vue中会采用vue2的写法，在子组件中则有较大的变化，请仔细查看区别
