Vue Multiple Pages
基於vue-cli3.0 + webpack@4.28.4的多頁腳手架
項目地址：點擊此處
線上demo：點擊此鏈接
編譯速度與熱跟新速度要優於webpack2.0、3.0，但相應的消耗內存變大，在node中出現內存溢出現象，如頁面過多，使用
npm run fix-memory-limit
再進行
npm run dev
Project setup
npm install
Compiles and hot-reloads for development
npm run dev
Compiles and minifies for production
npm run build:dev //打包開發環境 npm run build:devtest //打包開發測試環境 npm run build:test //打包測試環境 npm run build // 打包正式環境
在config里配置不同的打包環境使用不同的api地址等。
添加了移動端相關工具如 mint-ui、300s點擊延遲、rem、公共頭部和底部、less、store、pages/public_app.js，以及微信簽名和請求的封裝等
|-- dist // 打包目錄 |-- src // 源碼目錄 | |-- components // 全局組件 | |-- utils // 工具函數。 | |-- arrMethods.js // 數組函數 | |-- back.js // 返回事件 | |-- request.js // 請求封裝 | |-- changeUrl.js // 頁面跳轉 | |-- eleMethods.js // dom方法 | |-- time_slot_change.js // 時間方法 | |-- pages // 頁面視圖 | |-- home // 首頁模塊文件夾 | |-- index // 首頁文件夾 | |-- index.vue // 首頁模板文件 | |-- index.js // 首頁js文件 | |-- home1 // 首頁內頁文件夾 | |-- home1.vue // 首頁內頁模板文件 | |-- home1.js // 首頁內頁js文件 | |-- discover // 發現模塊文件夾 | |-- discover // 發現文件夾 | |-- discover.vue // 發現模板文件 | |-- discover.js // 發現js文件 | |-- public_app.js // 公共的js，可以引公共的css,vue ui庫等 |-- .gitignore // 忽略的文件 |-- page.config.js // 使用node讀取pages文件夾下的文件夾配置到vue cli3 |-- vue.config.js // vue cli 配置 |-- README.md // 說明 |-- package.json // 資源包
說明
- 在css/common.less里重置樣式。
- 添加了axios請求庫，並做了簡單的攔截。
- 添加了fastclick解決移動端300ms點擊延遲。
- 已添加mint-ui庫，想要添加自己 UI庫,在pages/public_app.js引用即可。
- 添加rem適配移動端，設置的設計稿寬度為750，1rem=30px，可在statics/js/public.js自行修改。
- 添加了vue-lazyload圖片懶加載，在pages/public_app.js中查看
- 添加頁面請在pages文件夾下新建目錄，在里面放置js和.vue（建議復制已有的文件夾修改名字進行開發）。
注意
由於cnpm與npm的版本有差異性，可能出現使用cnpm安裝依賴無法運行項目的情況，最好使用npm安裝