接觸vue已經(jīng)有一段時間了户辫，從1.x到現(xiàn)在的2.x渔欢，進(jìn)入了很多坑奥额，也填過一些坑苫幢，基于自己的一些開發(fā)中遇到的問題，寫給小白們一篇我的開發(fā)經(jīng)驗(yàn)棒拂，畢竟我也是個小白伞梯；
首先，我使用的不是vue全家桶（vue+vue-router+vuex）帚屉，我的項(xiàng)目基本配置是vue-cli+vue-router+axios或vue-cli+vue-router+jquery谜诫，樣式控制由Less完成；
配置介紹：vue不用說了攻旦，vue-cli一個官方推薦的vue腳手架基于webpack我一直在使用喻旷，本文也是基于vue-cli的，vue-router路由牢屋，axios是一個類似于ajax的請求工具且预，jquery不必多說大部分前端工程師都在不厭其煩的使用著；
為什么不使用vuex：因?yàn)槲視簳r接觸的項(xiàng)目都是中偏小型的烙无，暫時用不上vuex的狀態(tài)管理涮拗；
配置開發(fā)環(huán)境：
1﹜ 安裝Vue-cli 在終端執(zhí)行npm install –g vue-cli 如果mac系統(tǒng)安裝失敗請使用 sudo? install –g vue-cli 就漾，nodejs和npm的安裝及配置本文不多陳述夷野，安裝過程如下圖舌仍；
2﹜ 使用vue-cli 新建項(xiàng)目，打開終端找一個你打算存放項(xiàng)目的目錄，隨便一個目錄都可以，在終端執(zhí)行 vue init webpack vuecli ,PS:vuecli 是項(xiàng)目名稱咙轩，實(shí)際開發(fā)中修改成你想用的項(xiàng)目名稱即可尤误；
Project name :項(xiàng)目名稱，同項(xiàng)目初始化時的名稱，如果不做修改直接enter；
Project description：項(xiàng)目描述沛慢，這個基本可以不用修改直接enter即可；
Author：作者，enter即可坡椒；
Runtime + Compiler: recommended for most users：enter即可哩罪；
Ininstall vue-router:是否安裝vue-router框弛，如果需要路由功能直接enter，如果不需要直接N 然后enter膝擂；
Use ESLint to lint your code?：是否使用ESLint绩蜻，是一個檢查javascript語法錯誤的工具办绝，這個前期可以直接N掉孕蝉；
Setup unit tests with Karma + Mocha?：這個前期也可以直接N掉；
Setup e2e tests with Nightwatch?：Nightwatch是一個測試工具穿挨，N掉即可幌墓，前期用不到；
到現(xiàn)在為止筷登，初始化項(xiàng)目的基本陪就結(jié)束了剃根，如下圖；
然后根據(jù)提示執(zhí)行前方，
cd vuecli：進(jìn)入項(xiàng)目目錄狈醉；
npm install ：安裝項(xiàng)目依賴，這可能會慢些惠险，因?yàn)橛行┦蔷惩赓Y源苗傅，有經(jīng)驗(yàn)的同學(xué)可以更換一下安裝源，百度即可班巩；
npm run dev : 運(yùn)行程序渣慕，此時你默認(rèn)的瀏覽器會打開一個新的頁面，表示你安裝成功并成功使用vue-cli初始化了一個項(xiàng)目抱慌；
項(xiàng)目目錄介紹：
我是用的開發(fā)工具有兩種摇庙，windows下使用webstorm，因?yàn)镻C機(jī)配置比較高遥缕，跑webstorm完全沒有問題卫袒；mac下使用vscode，macbook pro是個乞丐版跑vscode會更順暢些单匣，我還是比較推薦使用vscode夕凝，因?yàn)楸容^輕量而且插件也有很多，界面也非常友好户秤；
打開項(xiàng)目码秉，看到如下目錄結(jié)構(gòu)；
build—webpack打包配置
config—開發(fā)配置
node_modules – 環(huán)境依賴
src – 項(xiàng)目文件存放目錄鸡号，包括入口文件和路由转砖、vue、js鲸伴、樣式文件等（我比較喜歡把樣式文件放到src內(nèi)府蔗，也可以放在static文件中）
static—靜態(tài)文件（一些靜態(tài)圖片等的存儲目錄）
package.json 項(xiàng)目配置文件
index.html 打包后的html文件
文件目錄中主要使用的是 src和static文件夾
以上是基于Vue-cli初始化項(xiàng)目及文件目錄的簡單介紹，下面基于以上內(nèi)容寫一個小demo汞窗，有關(guān)于路由基本設(shè)置姓赤、路由傳參等
1﹜ 新建、修改模板
a) 修改默認(rèn)Hello.vue代碼如下仲吏，內(nèi)容比較簡單不铆，不做過多解釋蝌焚，一個輸入框、一個提示文字誓斥，和一個帶有提示的按鈕只洒，頁面需要引入router配置文件及router文件下的index.js，因?yàn)槲覀兪褂玫氖蔷幊淌椒绞剑?/p>
router.push({ name: 'search',params:{routertext:this.text} })劳坑，編程式路由的跳轉(zhuǎn)方法毕谴，并向路由命為search的路由傳遞routertext為data中的text及輸入框中輸入的值，到這里不要急于觀看頁面效果泡垃，因?yàn)楣δ苓€沒完成析珊，會報(bào)錯羡鸥，忍住全部寫完后再看效果蔑穴；
2﹜ 新增搜索結(jié)果展示頁面search.vue代碼如下，次頁面功能主要是展示首頁要搜索的內(nèi)容惧浴，我們知道這個可以使用組件傳參的形式實(shí)現(xiàn)存和，是的沒錯，但是我們要使用的是路由傳參的方式衷旅；
this.$route.params.routertext 這句的意思是獲得首頁向路由傳遞routertext參數(shù)的值
3﹜ 路由配置捐腿，代碼如下
主要說明下router下的router.js，這是配置路由的頁面柿顶，如果你不想麻煩可以把代碼直接放到router下的index.js文件中茄袖，個人習(xí)慣分開，path是路由的路徑及地址欄上顯示的嘁锯，name是這個路由的名稱宪祥，component是這個路由用的展示組件位置；
path: "/search/:routertext" 家乘， ：routertext為要傳遞的參數(shù)蝗羊，對應(yīng)之前的文件
4﹜ 樣式文件代碼如下，不做過多解釋
完成以上代碼后仁锯，基本的功能就實(shí)現(xiàn)了耀找，npm run dev 看下效果，GIF太特么大了傳不上來业崖，注意看地址欄的url野芒，寫的不好有問題請大家指正，互相交流双炕，謝謝复罐！
