在上一篇《vue+vue-router+axios+element-ui構建vue實戰項目之三(解讀項目文件)》中,咱們認識了項目中各文件夾和文件的做用,而且從新整理了一下,若是忘記了的朋友,不妨再去看一下。css
那麼這篇文章,咱們就來修改下項目中的App.vue和router文件的內容,讓項目可以從新運行起來。html
先把默認的代碼刪掉部分,改爲這樣:vue
1 <template> 2 <div id="app"> 3 <router-view></router-view> 4 </div> 5 </template> 6 7 <script> 8 export default { 9 name: 'App' 10 } 11 </script> 12 13 <style lang="scss"> 14 @import "./style/style"; 15 </style>
樣式引用src/style/style.scss文件,所以在App.vue文件中,按照這樣@import "./style/style"引用。node
<style lang="scss">表示能夠編寫或導入scss、sass、css文件。ios
引用scss文件時,能夠省略.scss後綴。vue-router
更多關於sass的內容,能夠學習阮一峯的《SASS用法指南》。npm
既然,咱們引入了scss文件,就須要可以編譯的工具,接下來咱們須要下載兩個包工具,在終端輸入:element-ui
1 npm install -D node-sass sass-loader
因爲網絡緣由,我使用了cnpm下載:axios
目前,修改工做只進行了一部分,如今npm run dev是運行不了項目的,還須要咱們修改router/index.js路由文件瀏覽器
這是修改以前的代碼:
1 import Vue from 'vue' 2 import Router from 'vue-router' 3 import HelloWorld from '@/components/HelloWorld' 4 5 Vue.use(Router) 6 7 export default new Router({ 8 routes: [ 9 { 10 path: '/', 11 name: 'HelloWorld', 12 component: HelloWorld 13 } 14 ] 15 })
根據咱們目前的目錄,代碼修改以下:
1 import Vue from 'vue' 2 import Router from 'vue-router' 3 import index from '@/page/index' 4 import content from '@/page/content' 5 6 Vue.use(Router) 7 8 export default new Router({ 9 routes: [ 10 { 11 path: '/', 12 name: '首頁', //path別名,可刪除 13 meta:{ 14 title: '首頁' //設置頁面title 15 }, 16 component: index 17 }, 18 { 19 path: '/content/:id', 20 name: '詳情', 21 meta:{ 22 title: '詳情' 23 }, 24 component: content 25 } 26 ] 27 })
path:‘/’ 就是默認首頁,也就是index頁面。
這裏'/content/:id',咱們這裏使用了動態路由匹配, :id 就是各內容頁面的ID, 例如‘/content/10’、‘/content/20’這種。
更多關於動態路由的知識,能夠參閱官方文檔《動態路由匹配》。
好了,路由配置也完成了,接下來只剩最後一步,給頁面添加內容了。
index.vue文件:
1 <template> 2 <div>index page</div> 3 </template> 4 <script> 5 export default { 6 7 } 8 </script> 9 <style lang='scss'> 10 @import '..style/style' 11 </style>
content.vue文件:
1 <template> 2 <div>content page</div> 3 </template> 4 <script> 5 export default { 6 7 } 8 </script> 9 <style lang='scss'> 10 @import '..style/style' 11 </style>
好了,簡單的頁面內容有了,具體的內容後續再添加。
如今咱們在終端輸入:
npm run dev
短暫的編譯成功後,終端顯示:
在瀏覽器輸入 http://localhost:8080,咱們看到的內容:
接着咱們輸入 http://localhost:8080/#/content/10,以下:
OK,基本的配置完成,下一節咱們將學習如何在項目中配置Axios。
若是文章中存在錯誤的地方,麻煩請你們在評論中指正,以避免誤人子弟,謝謝!