唠叨：最近接收一個用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 === ) {
vm.userId = ;
} 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("?")!=-) {
//截取url裡面？之後的字元串（也就是傳遞的參數值）
str = url.substr(url.indexOf("?")+);
strs = str.split("&");
let result = "";
for(let i=;i<strs.length;i++) {
let key = strs[i].split('=')[];
let value =decodeURI(strs[i].split('=')[]);
if(i%!=){
//對圖檔連結之類的參數值的解碼
value =decodeURIComponent(strs[i].split('=')[]);
}else{
//對中文以及其他奇怪符号的參數值的解碼
value =decodeURI(strs[i].split('=')[]);
}
if (i == ) {
result += "{"+key+":'"+value+"',";
} else if (i == strs.length-) {
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即可.添加之後的樣子是這樣的：
很多，都是自己踩過的坑。希望幫到和我一樣的新手吧。