Vue template web

Vue-template-web 使用vue element-ui的一個簡單主頁模板

簡介:

此專案為一個簡單的範本頁面, 基礎結構, 可方便改造成一些宣傳頁面,主題頁面,官網頁面等.

專案實現:

1. 雙向綁定滾動錨點頁面.
2. vue element-ui的i8n國際化支持.
3. 修改主題色theme.
4. vuex持久性快取使用者的選擇主題theme和語言language.
5. 使用了iconfont字體圖示庫.
6. 封裝了一次axios請求.

專案結構:

 src
 ├─assets                静态资源,图片,iconfont图标字体存放目录
 ├─components            公共组件目录
 ├─i18n                  vue element-ui的i8n国际化支持
 ├─router                路由模块
 ├─store                 vuex的模块,公共的state, mutations方法
 ├─utils                 工具类模块,包含http,本地缓存等.
 ├─views                 各个page页面的存放目录
 ├─App.vue               入口组件,挂载入口
 └─main.js               main入口js文件,引入全局使用的库、公共的样式和方法

效果圖:

如何運作:

-.將克隆項目下來( git clone https://github.com/pjqdyd/Vue-template-web.git ).

-.執行npm install下載依賴(如果下載慢: npm install --registry=https://registry.npm.taobao.org ).

-.執行npm run serve啟動專案, 造訪http://localhost:8080瀏覽頁面.

-.執行npm run build編譯打包專案.

注意:

1.新分支Vue-template-web-cdn使用了CDN來載入部分依賴, 防止了打包後js檔案過大,首屏載入過久的問題.

經測試:

 master分支运行npm run build后dist文件夹大小为_4M_左右;

Vue-template-web-cdn分支打包后的dist文件夹减少至_100kb_左右;

因此建議使用Vue-template-web-cdn分支;

2.優化使用window.scrollTo(options)錨點滾動後, 注意瀏覽器的兼容性:window.scrollTo兼容, 當然你可以選擇之前的提交版本的方式兼容其他瀏覽器;

提示:

1.專案實現了vue element-ui i8n國際化,中英文切換是定義了兩套語言,在i18n/langs/下定義了.

2.主題改變實現:

之前是參照官方換膚案例來實現的,可以連同ElementUI的組件一起改變顏色, 由於此種方式比較繁瑣可能出現未知bug, 因此目前採用直接保存一個顏色值來改變主題,在項目中通過this.$ store.state.theme可以取得主題色值.
(更建議的：可以採用css的var變數綁定在根元素來改變樣式).

3.頁面錨點滾動參照了這個開源專案.

4.專案封裝了axios請求,並綁定了全域屬性$globalRequest,在任意頁面透過await this.$globalRequest.test4(arg);可以呼叫異步請求方法test4(),參考代碼.

5.如果專案發現可改進的地方歡迎提issue改進.