推薦我的vue教程：VUE系列教程目錄
通過前兩個文章：
- vue最簡單的入門教程+實戰+Vue2+VueRouter2+webpack（一）
-
vue最簡單的入門教程+實戰+Vue2+VueRouter2+webpack（二）
搭建完項目及項目目錄及文件結構后，準備工作就到此結束了，下面，我們要來做頁面了
前言
我們利用https://cnodejs.org/api這里公開的api來做項目。這里，我們假設我們的項目是做倆頁面，一個列表頁面，一個內容頁面。列表頁面有分頁等，內容頁面展示。
因此，我們需要兩個模板文件。
我們在src/page目錄下面新建兩個文件，分別是index.vue和content.vue，代碼分別是：
//index.vue
<template>
<div>index</div>
</template>
//content.vue
<template>
<div>content</div>
</template>
這里，我們只要先把基礎的內容寫好就是了。我就用兩個單詞代表我們的頁面。
安裝VueRouter2
在基本的VUE開發環境中，我們在構建項目時，需要安裝VueRouter2到我們的項目。參考文檔見VueRouter2安裝文檔
在我們的項目中打開終端，然后執行npm install vue-router -D命令。
執行效果如圖：
另外附上官網的安裝教程截圖：
我們查閱文檔或者看官網的截圖，會知道，命令是npm install vue-router，那為什么要加一個-D的參數呢？這個是為了讓我們的安裝的vue-router這個插件寫入到package.json配置文件中。以便于下次再其他地方安裝的時候，可以一并安裝進去，否則，還得再安裝一遍。
配置 main.js
安裝好路由后，下面，我們需要在src/main.js文件中進行配置。
整理代碼如下：
// 1.引用 vue 沒什么要說的
import Vue from 'vue'
// 3.引用路由
import VueRouter from 'vue-router'
// 光引用不成，還得使用
Vue.use(VueRouter)
// 2.入口文件為 src/App.vue 文件 所以要引用
import App from './App.vue'
// 4.引用路由配置文件
import routes from './config/routes'
// 5.引用API文件
import api from './config/api'
// 6.將API方法綁定到全局
Vue.prototype.$api = api
// 使用配置文件規則
const router = new VueRouter({
routes
})
// 跑起來吧
new Vue({
router,
el: '#app',
render: (h) => h(App)
})
對比上面的配置文件和模板原來的配置，那個好不言而喻，你大可以那這個當作初始項目的默認配置。
配置 App.vue
入口文件肯定和默認的不一樣，我的配置文件如下：
<template>
<div>
<router-view
class="view"
keep-alive
transition
transition-mode="out-in">
</router-view>
</div>
</template>
<script>
export default {
components: {}
}
</script>
<style lang="scss">
@import "./style/style";
</style>
就只是一個單純的路由入口頁面。比較特殊的是，下面我 import了一個scss文件。我喜歡把css獨立出來，而不是寫在一起，所以我之前在src目錄下面建立了一個style的文件，里面放scss文件。
我建議你先跟著我走，回頭自己根據自己的習慣調整。
配置 routes.js
下面我們需要配置路由文件，在我構建的目錄中找到路由配置文件，如果想不起來可以回顧上一章節的知識。
// 引用模板
import index from '../page/index.vue'
import content from '../page/content.vue'
// 配置路由
export default [
{
path: '/',
component: index
},
{
path: '/content',
component: content
},
]
如上，我們引用模板，然后再配置路由，這里，我們沒有涉及自路由的內容，我們先這樣配置上。然后，我們就可以在終端里面輸入npm run dev來看我們做的效果了。
配置運行端口
如果沒有跑起來，提示下面的錯誤，就表明默認的端口8080被占用了。一般不會被占用，但是也有可能被占用。所以，我們這邊來學習一下如何配置運行端口。
#端口被占用的提示
Error: listen EADDRINUSE :::8080
at Object.exports._errnoException (util.js:953:11)
at exports._exceptionWithHostPort (util.js:976:20)
at Server._listen2 (net.js:1253:14)
......
打開項目根目錄下/config/index.js配置文件，找到
dev: {
env: require('./dev.env'),
port: 8080,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}
如上，把 port 后面的端口改成其他數字，如9000 即可。
關閉格式檢查插件eslint
如上，我們再次運行npm run dev跑起來，結果發現命令行里面錯誤一片。。。很多人在這里就都暈了。。。沒關系，其中大部分錯誤都是格式造成的，并不是很重要的錯誤，但是這樣的提示很不爽。因此，我們把檢查錯誤插件eslint給關閉掉。
打開根目錄下面的/build/webpack.base.conf.js文件，找到如下代碼：
preLoaders: [
{
test: /\.vue$/,
loader: 'eslint',
include: projectRoot,
exclude: /node_modules/
},
{
test: /\.js$/,
loader: 'eslint',
include: projectRoot,
exclude: /node_modules/
}
],
全部注釋掉，如下
// preLoaders: [
// {
// test: /\.vue$/,
// loader: 'eslint',
// include: projectRoot,
// exclude: /node_modules/
// },
// {
// test: /\.js$/,
// loader: 'eslint',
// include: projectRoot,
// exclude: /node_modules/
// }
// ],
回頭，調整格式的時候可以再打開。先關掉，解決核心錯誤，再來考慮這些格式錯誤。
安裝sass-loader以及node-sass插件
這時我們可以npm run dev運行代碼了，這回錯誤肯定少多了，但是還是有錯誤。如果你上面是嚴格按照我的代碼來的，由于我們使用了sass進行樣式開發，這里應該會提示缺少sass-loader組件錯誤。
沒關系，缺什么，就安裝什么，我們輸入npm install sass-loader -D進行安裝。
注意：（我踩的坑）
<style lang="scss">
@import "./style/style";
</style>
在新項目里會報錯，Module not found: Error: Cannot resolve module 'sass-loader' in 你文件的目錄，這是因為我們沒有安裝sass-loader文件模板，你可以使用npm install sass-loader，來進行安裝，如果你發現安裝失敗，如果你的系統是window，報的錯誤如下的話，那是因為你的npm在4.0以下，你需要對其進行升級。
npm升級到4.0以上成功后，npm install sass-loader，sass-loader就可以安裝啦！當然window環境下的小伙伴也不要太高興，因為你有可能還有錯，不然為何我師傅寫的很詳細我還要重寫呢？因為他懶得踩坑直接用了蘋果，（鄙視-買不起），然后Module not found: Error: Cannot resolve module 'node-sass' in 你文件的目錄，你會想那還不簡單npm install node-sass，之后你哭了，失敗了，因為被墻了，怎么辦呢？（人家也不知道啦！），在別的項目里拷貝node-sass，或者在網上找下載一個唄！這里附上github上node-sass的地址：node-sass,進去點那個下載的綠按鈕進行下載，然后把它放入node_modules文件中，就OK啦！要是還有疑問這里去看看：安裝不了node-sass。實在不行就全部使用npm淘寶鏡像，如圖：
在上面的搜索框里搜索你需要的內容，這里我們以node-sass為例，搜到很多條信息，我們找到我們需要的那一個，點進去，如圖：
我們可以看到這句話：cnpm install node-sass，它就是淘寶npm鏡像的安裝方式，在終端運行它，如下：
cnpm install node-sass -D
這樣就完美解決了
關于window下npm升級升級失敗，如果你成功了可以跳過，一般window下新手學都會出錯：
如果你在window下對npm升級輸入npm update npm命令，總是會報各種錯誤，如圖：
怎么解決呢？因為windows上的npm是我們下載下來的node自帶的，所以在升級的時候，你在你的node的安裝目錄下按住shift+右鍵，選擇在此處打開命令窗口，然后npm update npm，等一會兒就行了。如圖：
到此，我們運行npm run dev，如果不出意外的話，應該能夠順利的跑起來了。
我們在地址欄后面輸入http://localhost:你定義的數字/#/content應該就能訪問到我們配置的內容頁面的模板了，如下圖所示：
小結
好，通過本章的學習，我們已經順利的安裝好路由，并簡單的配置了兩個頁面，并且順利的跑起來了。解決了我們需要SASS的問題，為了更好的重現我曾經踩過的坑還刻意把所有的環境清掉，進行重現，在安裝東西的時候等待是一種折磨，折騰了2個小時才重現成功，希望大家也能理解我的辛苦，好好學習。還要說的是我的博文和官方文檔最大的差別就是，我是一步一步走，并不是簡單給你幾個命令就好了。在這過程中，我們要學會排查問題，解決問題，還要多看官方文檔。
提示：在最近幾天我會慢慢附上VUE系列教程的其他后續篇幅，后面還有精彩敬請期待，請大家關注我的專題：web前端。如有意見可以進行評論，每一條評論我都會認真對待。
