公司要求使用 framework7+vue+webpack 開發一個web app，關於framework7，vue，webpack的相關介紹就不再贅述，接下來都只是介紹我用framework7+vue+webpack開發這個web app遇到的問題（因為framework7+vue+webpack的坑還是有很多，希望我能稍微填一點土）。

一、專案初始： 1.直接拿示例模板來開發，省略了安裝步驟:     $ git clone https://github.com/nolimits4web/Framework7-Vue-Webpack-Template my-app 2.進入下載的專案資料夾（進入my-app資料夾）並安裝依賴項：     $ npm install 3.執行開發環境，讓專案在瀏覽器跑起來：     $ npm run dev 4.專案完成後，可以打包成web     $ npm run build 至此，相關依賴介紹完。

二、專案目錄相關介紹： 1.build 資料夾裡…… 2.config 資料夾裡是一些配置檔案，可按需調整配置 3.node_modules 資料夾裡是一些依賴包，如framework7（以下簡稱f7）的Dom7庫…… 4.src 資料夾裡主要是css，js，fonts，pages，static…… 5.瀏覽器主要渲染入口index.html在根目錄下 6.主component掛載檔案：app.vue 專案目錄介紹完。

三、接下來主要是介紹專案中主要技術實現方法： 1.想要在專案底部永遠出現同一個導航欄，我直接把toolbar放在app.vue裡： <f7-toolbar labels>     <f7-link href="/" icon-f7="home" text="Home"></f7-link>     <f7-link href="/category/" icon-f7="data" text="Category"></f7-link>     <f7-link href="/explore/" icon-f7="compass" text="Explore"></f7-link>     <f7-link href="/cart/" icon-f7="bag" text="Cart"></f7-link>     <f7-link href="/account/" icon-f7="person" text="Account"></f7-link> </f7-toolbar> 注意：toolbar要放在： <f7-view id="main-view" main > </f7-view> 裡

2.專案主要用ios主題，所以，在app.vue裡把主題換成iOS： f7params: {     id: 'io.framework7.testapp', // App bundle ID     name: 'Framework7', // App name     theme: 'ios', // Automatic theme detection auto ios     routes: routes,// App routes     },

3.沒有找到f7官方介紹可以在位址列修改地址進入某個頁面的方法，有個取巧的方法： （1）修改build/webpack.dev.conf.js 的devServer：     historyApiFallback: {         rewrites: [         // { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },         { from: /^.*?/, to: '/index.html' }//上面的規則註釋掉，要這個         ],     },     publicPath: '/',//config.dev.assetsPublicPath （2）在app.vue的鉤子函式mounted里加上:     var $$=this.Dom7;     this.$f7.router.navigate(window.location.pathname+'/');

至此,只要路由檔案配置好了路由,在位址列輸入相應地址,就可以跳轉到相應頁面,如: http://localhost:8080/about 就可以進入about頁面, 如果位址列需要攜帶引數,從而方便後端交流,則可以自行定義地址規則,如: http://localhost:8080/details?product=P00100&id=1 這樣依然能進入details頁面,(至於內容變化,則看後端根據前端傳送的請求引數的變化)

4.產品詳情頁傳送Ajax攜帶的引數來源問題 有兩種方法獲得引數: (1)如上,頁面從地址進來,則位址列要攜帶引數,方便後端交流,如:     http://localhost:8080/details?product=P00100&id=1 這樣進入details頁面     可以在mounted鉤子函式裡:console.log(window.location.search)//"?products=P001200&user=1" 得到引數 (2)如果頁面是通過在別的頁面點選f7-link的連結進來的(如:<f7-link href="/details/P001200/user/1" text="details"></f7-link>),那麼位址列是不會有引數的,而獲得引數的方法則需要從$f7route拿:     console.log(this.$f7route.params) 如此,為了完整專案,需要區分使用者是怎麼進入到details頁面,從而方便獲得引數:     if(this.isEmptyObject(this.$f7route.params)){       // 位址列有引數，頁面從分享連結進來 http://localhost:8080/details?products=P001200&user=1       console.log(window.location.search)//"?products=P001200&user=1"     }     else{       // 位址列沒有引數  資料從this.$f7route.params拿       console.log(this.$f7route.params)     } //isEmptyObject()是jq辨別物件是否為空的方法,我直接把它定義在methods裡了:     isEmptyObject:function (e) {       var t;       for (t in e)         return !1;       return !0     }

5.searchbar的keyup事件: 由於沒有找到searchbar的keyup事件,只能用平常的dom繫結js函式的方法: 給searchbar一個id home-searchbar,然後在mounted鉤子函式裡寫程式碼:     var $$=this.Dom7;     $$('#home-searchbar input[type=search]').on('keyup',function(event){     if (event.keyCode == 13) {                    event.preventDefault();                  console.log(111,event.target.value)      }     })

6.據專案要求,要做個多語言版本的專案,如阿拉伯版本,方法如下: (1)直接在main.js引入反轉的樣式,就可以把整個專案反轉過來:     import RTLStyles from 'framework7/css/framework7.rtl.ios.min.css'; (2)有些靜態的文字需要轉換,則可以使用i18n,方法可以直接參考https://www.jianshu.com/p/55190520ba85,如下把方法直接照搬出來給大家看: 1) 引入   npm i vue-i18n -S

2) 相關目錄結構: src/i18n/en.js src/i18n/zh.js src/tools/i18ns.js

為了使專案結構更清晰,我們單獨在tools資料夾中新建i18n.js檔案,檔案內容 import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n)

// 以下為語言包單獨設定的場景，單獨設定時語言包需單獨引入 const messages = {   'zh_CN': require('../assets/i18n/zh'),   // 中文語言包   'en_US': require('../assets/i18n/en')    // 英文語言包 }

// 最後 export default，這一步肯定要寫的。 export default new VueI18n({   locale : 'en', // set locale 預設顯示英文   messages : messages // set locale messages })

3) 然後在main.js裡面全域性引入並掛載 //...其他程式碼

//引入多語言支援 import i18n from './tools/i18n'

//...其他程式碼

new Vue({   el: '#app',   i18n,     //掛載i18n   router,   store,   components: { App },   template: '<App/>' })

4) 在assets/i18n裡面的zh.js和cn.js如下 zh.js: module.exports = {     login:{         'title' : '軟體系統',         'username' : '請輸入使用者名稱',         'password' : '請輸入密碼',         'login' : '登入',         'language' : '請選擇語言'     },      }

en.js module.exports = {     login:{         'title' : 'Software system',         'username' : 'Please enter the user name',         'password' : 'Please enter your password',         'login' : 'Login',         'language' : 'Please select language'     }, }

5) 這樣我再元件login.vue裡面就可以使用了 //template <h3>{{$t("login.title")}}</h3> <button @click='langToggle'>en/中</button>

//js methods:{   langToggle(){       if(this.$i18n.locale = 'zh_CN'){         this.$i18n.locale = 'en_US';       }else{         this.$i18n.locale = 'zh_CN';       }   } }

以上方法來源於連結：https://www.jianshu.com/p/55190520ba85

待續 ......