第一回：官網(wǎng)起步式

以前的官網(wǎng)

image.png

現(xiàn)在的官網(wǎng)

image.png

地址沒(méi)變......
https://cn.vuejs.org/v2/guide/installation.html#%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7-CLI

靠，這怎么玩兒

我們隨便玩兒一下效五，跟著感覺(jué)走
原來(lái)的命令行都不見(jiàn)了地消，給了這么一句話：Vue 提供了一個(gè)[官方的 CLI]，地址我這里貼出來(lái)https://cli.vuejs.org/zh/guide/installation.html

image.png

image.png

image.png

image.png

看了vue serve說(shuō)明，快速原型開(kāi)發(fā)扶平？哦帆离！有點(diǎn)懂了，以前我們寫前端頁(yè)面不論是idea蜻直，webstorm盯质，還是vscode右上角有各種瀏覽器可以邊編輯邊預(yù)覽頁(yè)面效果袁串，那么vue文件中你如果點(diǎn)擊右上角的那些瀏覽器圖標(biāo)彈出的頁(yè)面是讓你下載當(dāng)前這個(gè)vue文件概而，它不會(huì)幫你解析成html解析

image.png

image.png

靠呼巷！那咋辦，我畫一個(gè)簡(jiǎn)單的vue原型頁(yè)面還要打開(kāi)笨重的腳手架項(xiàng)目嗎赎瑰？或者自己
創(chuàng)建一套腳手架項(xiàng)目王悍？好麻煩！幫我搞一個(gè)能解析vue的工具就可以了餐曼，但是上面說(shuō)的幾個(gè)ide工具都辦不到压储，必須依賴腳手架，但是又不想在笨重的腳手架項(xiàng)目里搞來(lái)搞去源譬，所以vue serve就有用了集惋。

首先，創(chuàng)建個(gè)空文件夾vue-serve踩娘，里面可以手動(dòng)創(chuàng)建一個(gè)txt文本文件刮刑，放入一些vue標(biāo)簽，然后保存把后綴改成.vue,總之就是手動(dòng)搞一個(gè)vue后綴的文件养渴，或者你copy一個(gè)隨便雷绢，或者直接用ide前端代碼工具打開(kāi)這個(gè)文件夾直接創(chuàng)建一個(gè)vue文件，然后在這個(gè)文件夾中啟動(dòng)cmd理卑，然后執(zhí)行命令
vue serve

image.png

image.png

image.png

image.png

如果我想看看app2的怎么辦帆疟？把a(bǔ)pp.vue刪掉？

image.png

看來(lái)兔羊兔深破宇立，人家提示不管你是誰(shuí)踪宠，但是要想啟動(dòng)就給我這幾樣?xùn)|西之一，就像文檔里說(shuō)的

你所需要的僅僅是一個(gè) App.vue

就是app.vue還是App.vue總得給我一個(gè)泄伪，我只認(rèn)這個(gè)殴蓬，所以想看別的頁(yè)面效果你就用組件嵌套到app里去跳轉(zhuǎn)切換的看吧。

第二回：開(kāi)始真正的vue-cli3.x版本以上的腳手架吧

vue create hello-world
不用看蟋滴，這就是創(chuàng)建項(xiàng)目的命令染厅，hello-world是你的項(xiàng)目名稱，不管那么多先執(zhí)行看看

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

好的再來(lái)一遍纫事，這回我們選擇2.x

image.png

image.png

image.png

image.png

image.png

image.png

第三回：回到真正的vue-cli2.x的腳手架吧

執(zhí)行創(chuàng)建項(xiàng)目
vue init webpack hello-world5
咦，熟悉的界面又回來(lái)了

image.png

image.png

image.png

image.png

好了沒(méi)什么大驚小怪的沪猴，再來(lái)一遍加上router康康

image.png

一樣的操作辐啄，但是有兩個(gè)yes采章，康康項(xiàng)目結(jié)構(gòu)

image.png

image.png

那么我想用回vue-cli2.x版本悯舟，當(dāng)前是vue-cli3.x版本以上，那就卸載唄士复。
npm uninstall -g @vue/cli
然后查看版本vue -V什么都沒(méi)有图谷，那就安裝vue-cli2.x
npm install -g vue-cli
默認(rèn)安裝好的版本vue -V 查看是 vue-cli2.9.6翩活，我們創(chuàng)建項(xiàng)目吧
vue create mypg
我去阱洪，失敗菠镇？告訴我你CLI2.x的版本竟敢使用我CLI3.x以上的命令冗荸，你要么把CLI2.x卸載，然后裝我CLI3.x吧

圖片.png

第三回：踩坑對(duì)比腳手架

用vue-cli2.9.6創(chuàng)建一個(gè)項(xiàng)目利耍，創(chuàng)建時(shí)勾選路由蚌本，然后就有了一個(gè)帶路由的項(xiàng)目，我們做個(gè)小實(shí)驗(yàn)隘梨，將elementui的菜單放入app.vue中看效果

image.png

main.js中引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

啟動(dòng)項(xiàng)目npm run dev，查看效果

image.png

點(diǎn)擊選項(xiàng)一捻脖，發(fā)生了跳轉(zhuǎn)

image.png

image.png

那么锐峭，為什么發(fā)生跳轉(zhuǎn)，頁(yè)面怎么沒(méi)跳可婶？第一沿癞，首先得確認(rèn)有沒(méi)有這個(gè)路由路徑，你點(diǎn)擊了它會(huì)去全局的路由里面去找矛渴，那么全局路由是哪一個(gè)噻椎扬？沒(méi)猜錯(cuò)的話是這一個(gè)

image.png

image.png

image.png

image.png

image.png

好的，啟動(dòng)看效果冒签，我們來(lái)跳轉(zhuǎn)一下在抛，我們通過(guò)路由找到了這個(gè)組件頁(yè)面，就是當(dāng)初的helloworld.vue組件

image.png

同樣的操作我們?cè)賮?lái)一遍

這時(shí)我們創(chuàng)建一個(gè)不帶路由的vue-cli2.x票唆，引入elementui的menu

image.png

image.png

import VueRouter from 'vue-router'
Vue.use(VueRouter)

首先項(xiàng)目啟動(dòng)成功和橙，但是控制臺(tái)報(bào)錯(cuò)Error in render: "TypeError: route is undefined"仔燕，頁(yè)面顯示白板造垛，什么都顯示不出

image.png

注釋掉<router-view/>可以正常顯示

image.png

點(diǎn)擊“選項(xiàng)1”跳轉(zhuǎn)Chrome報(bào)錯(cuò)
element-ui.common.js?ccbf:3383 TypeError: Cannot read property 'push' of undefined

表示沒(méi)有所謂的router可用，手動(dòng)引入router后晰搀，其它明明兩個(gè)項(xiàng)目都一樣為毛報(bào)錯(cuò)五辽，以為是框架版本問(wèn)題，還是多從自身找問(wèn)題吧外恕，兩個(gè)項(xiàng)目真的一樣嗎杆逗？至少一個(gè)有router文件夾index.js路由文件，而另一個(gè)則沒(méi)有鳞疲。我們不一樣罪郊。。建丧。不一樣排龄。。翎朱。歌聲響起來(lái)

image.png

結(jié)果顯示一切正常涉枫，當(dāng)然剛剛注釋掉的<router-view/>可以放開(kāi)了喘漏，去掉或者保留vue-router這個(gè)引用好像并不影響結(jié)果。那么自己挖的坑自己填上士修，main.js里引入router就此一種凛忿，就是以下這種澈灼，引入的是我們配置的“路由規(guī)則js文件”

import router from './router'   //找到項(xiàng)目中的路由js文件
new Vue({
  el: '#app',
  router, //引入Vue中
  components: { App },
  template: '<App/>'
})

而以下這種引入方式，引入的是全局安裝的路由Router這個(gè)插件店溢，

import Router from 'vue-router'
Vue.use(Router)
//這里會(huì)用到
export default new Router({
  routes: [
    {
      path: '/home',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

總結(jié)：基礎(chǔ)操作不扎實(shí)叁熔，學(xué)會(huì)這個(gè)就忘了那個(gè)，記得不牢容易遺漏床牧，而且對(duì)網(wǎng)上資源理解太片面容易踩坑荣回。

不管vue-cli3.x還是vue-cli2.x關(guān)于路由引入，一種是創(chuàng)建項(xiàng)目是勾選自動(dòng)安裝一切幫你搭建好了戈咳，另一種手動(dòng)引入心软，首先執(zhí)行安裝命令，然后手動(dòng)創(chuàng)建配置路由的index.js文件著蛙，在index.js文件里引入vue-router删铃，然后把這個(gè)index.js文件引入main.js,那么就大功告成了。