剛接觸vue.js 对扶。對于js的框架來說，vue是比較友好的惭缰，算是容易上手浪南，但是對于一個菜鳥來說，也走了很多的彎路漱受。
首先络凿，安裝vue。
這個過程就有坑昂羡，我之前安裝過一次vue2絮记，現(xiàn)在拿過來安裝，怎么安裝都不成功虐先，npm run dev的時候總是報錯
我在網(wǎng)上看了很多例子怨愤，但是都沒有解決我的問題，這個時候蛹批，我突發(fā)奇想撰洗，卸載我之前所有的vue相關(guān)篮愉，和node.js。再重新安裝差导。OK了试躏！
哈哈，大概是node.js版本過低的原因柿汛。不過總算是安裝成功了
這個是具體過程：
# 安裝vue
$npm install vue
# 全局安裝 vue-cli
$npm install --global vue-cli
# 創(chuàng)建一個基于 webpack 模板的新項目my-project
$vue init webpack my-project
# 進入項目目錄
$cd my-project
# 安裝依賴冗酿，走你
$npm install
l# 運行項目
$npm run dev
在安裝是提示是否加入vue-router時埠对，選擇Yes络断。
這里建議使用npm安裝，有人使用cnpm速度更快项玛，但是有可能集成包不全貌笨，出現(xiàn)問題
文件目錄如下：
流程說明：
1襟沮、首先會打開首頁 也就是我們看到的index.html文件
2锥惋、使用webpack打包之后默認加載main.js文件并將其引入到index.html文件中
三、開發(fā)
我們在main.js文件中引入相關(guān)模塊以及組件
import Vue from 'vue'
import App from './App'
import Router from './router'? ? //這里引入的是router目錄开伏，會默認識別里面的index.js文件（不能是其他名字）
實例化vue對象配置選項路由及渲染App組件
newVue({
el:'#app',//這里綁定的是index.html中的id為app的div元素router,
render: h=>h(App)//這里的render: h => h(App)是es6的寫法//轉(zhuǎn)換過來就是：
? ? ? ? ? ? ? ? ? ? ? ? ? ?暫且可理解為是渲染App組件//render:(function(h){//return h(App);//});
})
App.vue文件是我們的組件入口膀跌，之后所有的開發(fā)在這里面進行
要使用路由我們首先要在router/index.js文件中創(chuàng)建路由并配置路由映射 ，并通過export輸出router到main.js文件中
上面配置了2個組件映射 分別Detail.vue組件和Index組件固灵，配置好之后我們就可以開始使用路由了
//使用router-link組件來導航
//通過傳入‘to’屬性指定鏈接
//默認會被渲染成一個<a>標簽
<ul>
? ? ? ? ?<li><router-link to="/Detail">Detail</router-link></li>
? ? ? ? ?<li><router-link to="/Index">Index</router-link></>
</ul>
//路由匹配到組件渲染在這里
<router-view></router-view>
點擊Detail和Index導航會映射到對應的組件捅伤，然后將組件渲染在這里面
剛學到這里，感覺只是學到了一點點巫玻，還有繼續(xù)努力４砸洹！Ｈ猿印熄诡！
