嘮叨：最近接收一個用vue寫的專案，對我來說甚是頭大。不得不說這是對傳統前端的一次大過濾，之前仗著html，css,js混飯吃的前端兒們，壓力越來越大，我就是這樣的一個例子。壓力越大，只要不放棄，成長的也越快啊，所以，咬牙就咔咔開始幹。

需求：一個H5分享頁面，要分享的頁面上的東西是動態的，需要app在h5頁面的url後面拼接引數（為防止渲染時出現亂碼現象，最好對這些引數值進行編碼）傳遞給h5，h5利用js獲取app傳遞的引數進行解碼並一一對應渲染到這個頁面上。

看了上圖應該就很清楚了吧。

開工：首先利用vue-cli這個腳手架工具搭建模板，在src目錄下面的commponents目錄下建立一個元件,我給這個元件命的名是QuatationShare.vue，元件名首字母必須大寫這是規範，專案中必然需要寫很多單頁，每個頁面之間的切換必然要用到路由router,我們在配置環境，搭建腳手架的時候其實router已經自帶了，不必單獨安裝，可以直接使用，但是方便自己配置，我們就在router這個目錄下建立一個和index.js平級的routes.js，在routes.js中

import QuotationShare from '../components/QuotationShare';
export default [
{
path: '/quotation-share/:userid/:id/:test',
name: 'quotation-share',
component: QuotationShare,
}
]

（/:userid/:id/:test是動態id，練習的時候可以不用加這些，看自己需要，如果加了，開啟頁面進入index.html之後把這些路徑新增到url後面即可路由到你的元件。）
匯入這個元件，然後在index.js中,新增：

import routes form './routes';
 

Vue.use(Router);export default new Router({
    routes,
});

這些程式碼即可。
在cnpm run dev除錯的時候你可能會在後臺看到一片報紅，甚至程式都沒法進行，這個時候你只需要到build目錄下找到webpack.base.conf.js這個檔案，然後在rules部分找到

{
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
  formatter: require('eslint-friendly-formatter'
 
)
 }

這段程式碼，並註釋掉，就ok了，這段程式碼決定是否對程式碼進行嚴格檢查，多一個空格，少一個逗號，分號等根本注意不到的細節都會導致程式碼無法進行下去，報的錯還總是找不到原因。所以註釋掉之後，書寫程式碼就自在多了。如果註釋掉之後還是報錯，還是無法開啟頁面，你又確認自己的程式碼沒有錯誤的時候，你可以看看你是不是cnpm run dev了多次，打開了多個dos視窗，我就在這上面栽了不止一次。

然後就是元件部分的書寫了template script style是一個元件的三大模組，分別對應傳統web頁面中的html js css，我在這裡是用less寫的樣式，並且寫到了assets下面新建的less目錄下面，然後在main.js中新增

import './assets/less/main.less';

這樣就可以了。這樣就不用在元件裡面寫style啦。template裡面就照著之前寫html格式一樣開寫就行了。但是一定要注意最外層div只能有一個，而且動態的資料需要通過vue的雙向繫結來實現，不要寫死哦。下面這個是錯誤的示範：

這才是正確的示範：

然後就是js部分了，首先在script標籤裡面匯入自己需要用到的外掛

import axios from 'axios';
import 'url-search-params-polyfill';
import InfiniteLoading from 'vue-infinite-loading/src/components/InfiniteLoading';

然後，“匯出”部分的程式碼就是要執行的程式碼了。也就是說我們所要寫的程式碼都在
export default {}
這個花括號裡面了。程式碼如下：

beforeRouteEnter(to, from, next) {
   next(vm => {
        vm.contentId = to.params.id;
        if (to.params.userid === 0) {
            vm.userId = 0;
        } else {
            vm.userId = to.params.userid;
        }
        vm.testId = to.params.test;
    });
},
components: {
    InfiniteLoading,
},
data() {testObj:{},},
mounted() {self.onInfinite();},
methods: {
onInfinite() {
            const self=this;
            let url='';
            let str='';
            let strs='';
            //獲取本頁面的url
            url=window.location.href;
            console.log(url);
            if(url.indexOf("?")!=-1) { 
            //擷取url裡面？之後的字串（也就是傳遞的引數值）
                str = url.substr(url.indexOf("?")+1);
                strs = str.split("&"); 
                let result = "";
                for(let i=0;i<strs.length;i++) { 
                    let key = strs[i].split('=')[0];
                    let value =decodeURI(strs[i].split('=')[1]);
                    if(i%2!=0){
                    //對圖片連結之類的引數值的解碼
                        value =decodeURIComponent(strs[i].split('=')[1]);
                    }else{
                    //對中文以及其他奇怪符號的引數值的解碼
                        value =decodeURI(strs[i].split('=')[1]);
                    }
                    if (i == 0) {
                        result += "{"+key+":'"+value+"',";
                    } else if (i == strs.length-1) {
                        result +=key+":'"+value+"'}"
                    } else {
                        result += key+":'"+value+"',"
                    }

                } 
                //將json串轉變為物件
                self.testObj = eval('(' + result + ')');
                self.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
               }    
            },
        },
     watch: {
            testObj: { deep: true,}
            }

基本上就這些了。分享的程式碼我就不展示了。存在二次轉發簡介變連結的bug。
然後這些都完成之後，假設專案做完了，該如何部署到伺服器上，首先利用ftp上傳到測試伺服器，將專案cnpm run build之後生成的dist目錄下的所有檔案複製到ftp正確的目錄下，如果專案無法跑起來，這時候你可以找到build目錄下的webpack.prod.conf.js這個檔案，然後在output中新增publicPath:’./’，然後重新打包複製到ftp即可.新增之後的樣子是這樣的：

很多，都是自己踩過的坑。希望幫到和我一樣的新手吧。