如果你按照我的結構框架去調整了之後，那麼，現在你的專案應該是出錯，並且跑不起來了。所以，我們需要進行一些調整，讓專案重新跑起來。
我們先把預設專案裡面沒用的東西先刪除掉，把**調整為下面的樣子。
router-view>
div>
template>
export default
script>
lang="scss">
@import
"./style/style"
;style>
我們在專案終端內輸入下面的兩句命令來進行安裝：
npm install sass-loader
-dnpm install node-sass
-d
因宿舍翻牆效果不好，這裡用昨天，我們在cnpm替代了npm進行安裝的。效果是一樣一樣的。
page資料夾下面建立了兩個空文字檔案index.vue和content.vue檔案，是我們準備用來放列表和內容的。
這裡，我們先去填寫一點基礎內容在裡面。
index.vue
index pagediv>
template>
content pagediv>
template>
現在，這個專案還跑不起來呢，如果你執行npm run dev還是會出錯的。因為我們還沒有配置路由。
import vue from 'vue'
import router from 'vue-router'
import hello from '@/components/hello'
vue.use(router)
export default
new router(
]})
hello的元件，這個元件被我們昨天的博文中整理檔案結構的時候刪除掉了。所以，這裡就報錯啦。
我們根據我們的需要，來調整這個路由檔案，如下：
import vue from 'vue'
import router from 'vue-router'
import index from '@/page/index'
import content from '@/page/content'
vue.use(router)
export default
new router(,
]})
index元件，這裡，你可能要問:id是什麼意思？
因為我們的內容頁面是要展示n條內容的，我們如何來區分這些內容呢，就是根據id來進行區分。所以，這裡使用了動態路由匹配。
好，我們現在，專案應該是沒有任何錯誤，可以跑起來了。忘記跑起來的命令了？如下：
npm run dev但很可能你的英文不是很好，看不懂那些提示。沒有關係，借助搜尋引擎和翻譯引擎，應該能夠很快的排查出來，到底是**出錯了。
另外，我是使用atom編輯器來編寫**的。關於如何在atom編輯器裡面開啟**檢查，請參看我另外一篇博文 《atom 編輯器安裝 linter-eslint 外掛程式，並配置使其支援 vue 檔案中的 js 格式校驗》
即便你可能遇到一些問題。但是我希望你還是能夠順利的跑起來，得到如下的結果：
原文連線
04 Vue 專案準備《餓了嗎》
商品頁spa 單頁面開發 快 區域性重新整理 減少請求大小 體驗有明顯變化 實現原理 在頁面中，如果只是錨點發生變化時，是不會有任何的請求操作的，只是在當前頁面找對應的錨點位置 另外錨點值發生變化時是可以監聽到的，所以可以利用js當錨點值的改變時，向伺服器發起資料請求，獲取到資料之後，只需要區域性重...
vue專案學習
1 什麼是.vue檔案？vue檔案，是乙個自定義的檔案型別，用類似於html的語法描述乙個vue元件。每個.vue檔案包含三種型別的頂級語言模組,這三個部分分別代表了html,js,css。其中和是支援用預編譯語言來寫的。我們的專案用了 less 預編譯，是這樣寫的 3 vue 解析 這裡就是乙個 ...
Vue專案實戰04 Vue 輪詢介面的實現
專案中我們經常需要實現輪詢 每隔幾秒請求一次介面重新整理資料 一般都會使用setinterval，但要注意單純使用它會導致頁面卡死，所以一定要清除定時器 setinterval不會清除定時器佇列，每重複執行1次都會導致定時器疊加，最終卡死你的網頁。但是settimeout是自帶清除定時器的 moun...