适用于vue的移动端table插件_vue-mobile
地信圈H5,相關說明
地信圈H5,項目基本框架基于vuejs + element-ui + vuex + vue-router + boostrap源碼構成,H5作為地信圈客戶端一個輔助功能,結合微信公眾平臺完成,包含活動,活動報名,會員企業,動態資訊三塊,每個模塊都是獨立存在,不與其他兩功能有任和交互,入口為公眾號底部菜單
構建流程
本項目使用的是vue-cli構建,對于環境需要安裝node,由于vuejs要求,node版本不得低于6.0.0,建議用8.0.0以上版本(為了方便對node版本切換,可以使用nvm控制node版本,nvm地址)
從svn或git倉庫中將項目檢出
在cmd或terminal切換到項目目錄下,使用npm install項目所依賴的模塊,由于項目依賴較多,可能安裝較慢(安裝一次即可)。
模塊安裝完成后,npm run dev運行即可,默認端口是8080,如果端口被占用,將自動使用其他端口,具體在啟動完成后就可看到
打包,npm run build在根目錄下回多出一個dist文件夾,為打包后的文件
npm run build --report打包后文件分析表圖,優化使用
注意:由于npm倉庫默認為國外的服務器,所以部分模塊下載可能受阻導致安裝失敗,在下載之前可將npm倉庫設置為國內倉庫,npm config set registry http://registry.npm.taobao.org/,完成后,根據需要可將倉庫切換回國外倉庫,命令:npm config set registry https://registry.npmjs.org/,另外如果有模塊一直安裝失敗,建議先將npm uninstall name卸載模塊后再使用npm install name安裝,例如'node-sass'模塊容易安裝失敗,第一次安裝失敗后,先使用卸載命令,徹底卸載模塊,后再重新單獨安裝
模塊列表
異步請求框架:axios
表單驗證框架:vee-validate,其中自定義規則src/validate.js
cookie操作模塊:js-cookie
等,還有一下項目使用不頻繁模塊,例如: 'jquery','html2canvas','jspdf'就不一一列舉額,具體可查看根目錄中package.json文件,也可在node_modules中查看相關源碼
目錄說明
build目錄:
webpack打包配置文件,一般不用修改,如有特殊需求,根據需要修改
config目錄:
webpack打包配置參數,一般不用修改,如有特殊需求,根據需要修改,一般修改index.js
dist目錄:
打包后生成的目錄,里面是已經打包好的文件,一般剛下載項目是沒有這個目錄的
src目錄:
開發的主要目錄
static目錄:
存放一些靜態文件,打包時路徑相對不變
src目錄說明
assets目錄:
程序所需的資源文件,會作為程序的一部分被打包
bootstrap-scss:
bootstrap4的css源文件目錄,本項目并未全部使用bootstrap,只是將其中的css源碼引入,方便定制修改
components:
組件庫,查看組件庫目錄
libs目錄:
功能插件,當前包含PagedList.js(查詢插件)
plugins目錄:
通用插件集合,包含errorPage.js(請求錯誤處理),eventbus.js(事件中央總線),htmlTopdf.js(html轉dpf),paramsConvert.js(參數處理插件),Util.js(通用小工具插件),說明,本插件庫和libs有本質區別1. 本插件庫,功能相對單一,全部為函數,不具備對象的使用原則,而libs則完全以對象的使用方式使用2. 本插件庫的所有插件將全部掛載到Vue原型鏈上,可以通過Vue.XXX,或通過vm.$XXX都可訪問,但libs不可以3. libs下的插件可以提供相對較多的參數供調用者使用,如:loading,調用者可通過vm.XXX.loading獲取請求的狀態,但本目錄庫不提供任何可中間調用參數,只提供返回結果
router:
路由配置目錄,所有的路由配置都在這個目錄完成
store:
vuex狀態管理配置目錄,其中modules為height:整體布局參數,user: 登錄用戶信息,具體數據,可在Chrome瀏覽器安裝vuetool,啟動程序后打開控制臺的vue選項,可以看到相關的數據信息,相關操作請自行搜尋
App.vue:
組件入口
element-variables.scss:
自定義的樣式,為sass格式
main.js:
總的配置文件,打包的入口文件
self.css:
自定義的樣式,為css格式(本樣式文件為遺留文件,不做任何修改,擴充樣式全部寫在element-variables.scss),后期優化可能會將本文件清除
validate.js:
自定義驗證規則的配置文件,需要額外擴充驗證規則統一在本文件下配置
components目錄說明
abort: 關于我們,這個當前位移動端提供的頁面
advisory: 資訊目錄
common: 公共目錄,暫未使用
ec: 企業主頁
errorPage: 錯誤處理頁面
event: 活動目錄
scroll: 滾動容器組件
公共服務目錄
topic: 話題目錄
其余大部分內容同地信圈web端相同,可參考地信圈README.md
總結
以上是生活随笔為你收集整理的适用于vue的移动端table插件_vue-mobile的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: windows优化大师怎么用_曾经辉煌的
- 下一篇: 天堂2单机版服务器时间修改,如何制作最新