1. 程式人生 > >vue+element 專案

vue+element 專案

Vue

* 技術盞: vue+Element+axios+i18n+vuePicturePreview+js-cookie+vue-croppa+wangeditor

	`
	Element-UI  是餓了麼前端團隊推出的一款基於Vue.js 2.0 的桌面端UI框架 http://element.eleme.io/#/zh-CN
	Axios 是一個基於 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中 用於傳送網路請求 https://www.npmjs.com/package/axios
	i18n 是一款可以實現頁面國際化的外掛  https://www.npmjs.com/package/i18n
	vuePicturePreview 圖片預覽外掛  https://www.npmjs.com/package/vue-picture-preview
	js-cookie 儲存使用者資料  https://www.npmjs.com/package/js-cookie
	vue-croppa 圖片裁剪外掛  https://www.npmjs.com/package/vue-croppa
	wangeditor 富文字編輯器 每個後臺系統基本都會用到  https://www.npmjs.com/package/wangeditor
	`

介紹開始

1.登入頁(login)
在這裡插入圖片描述

2.註冊頁面(register)
在這裡插入圖片描述

3.登入成功首頁(map)
在這裡插入圖片描述

4.圖片裁剪 (cutting)
在這裡插入圖片描述

5.圖片展示 分頁(預覽、刪除)(picture)
在這裡插入圖片描述

6.富文字編輯 預覽(ueditor)
在這裡插入圖片描述

7.表格展示 (table)
在這裡插入圖片描述

8.表格新增資料(編輯 表格校驗)(tableEdit)
在這裡插入圖片描述

9.修改個人資訊(更改頭像)(personal)在這裡插入圖片描述

10.支援中英切換

  • 在這裡插入圖片描述
  • 查看了碼雲的中英切換 也是使用了cookie
  • 在這裡我也結合element實現了中英切換(可以配置 實現其他語言)在這裡插入圖片描述

11.接下來 介紹我的專案結構 不喜勿噴
在這裡插入圖片描述

  1. node專案程式碼結構 我是把程式碼和vue專案分離的
    在這裡插入圖片描述

檔案中都有備註,不懂可在評論區留言 謝謝