Vue-cli單檔案元件和路由和專案的初始化

以。vue結尾的檔案是單檔案元件，

以前是這麼寫Vue.conponet('childe',{

}）

什麼叫做路由？就是根據網址的不同，返回不同的內容給使用者

展示給使用者的是APP.vue裡的內容

在app.vue裡

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>

</template>

router就是路由，顯示當前路由地址所對應的內容。

main.js裡router就是路由配置裡的內容

@符就是src目錄。

路由的配置都放在router資料夾下的index.js資料夾裡，APP.vue是整個應用的根元件。在APP.vue裡，router-view是路由地址顯示的路由內容，路由內容到index.js的配置項裡去找。

當顯示根路徑的時候，展示的是首頁，而不是Helloween world  單檔案元件，

1.刪除inde.js裡的引入helloWorld的根元件

2.刪除components目錄，在src檔案下新建一個資料夾叫pages，放網頁的集合，在pages裡新建一個資料夾叫home,就是首頁的資料夾，在在裡面新建一個home.vue檔案，以vue結尾的檔案是單檔案元件。編輯好home.vue 後，就回到 路由，開啟indexd.js檔案 引入Home元件。

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ]

})

這段程式碼的意思是當使用者訪問根路徑的時候，給路由項起一個名字叫Home，它顯示的元件是Home元件

當要訪問列表頁的時候，展示列表頁的內容    http://localhost:8080/#/list，應該怎麼辦呢

在路由配置裡（index.js）只需要增加一項就可以了，當你訪問根路徑下的list頁面的時候。顯示一個list元件

 {
      path: '/list',
      name: 'List',
      component: List

    }

然後引入List元件。在index.js裡

import List from '@/pages/list/List'

如何實現點選home跳轉到list頁面呢

在home.vue裡這麼寫

<template>
     <div>
      <div class="home">home</div>
            <!--2.用div包裹這兩個標籤-->
        <!-- 3.在頁面裡點選列表頁就會進入list頁面-->
     <router-link to="/list" class="home">列表頁</router-link>
     </div>

</template>

     為了適配不同的瀏覽器，需要在src/assets/styles裡引入reset.css檔案

檔案的入口檔案是main.js所以在這個檔案裡引入reset.css，同時還要引入border.css檔案，一畫素邊框的解決方案。

為了解決移動端的click事件延遲300毫秒，增強使用者體驗，需要引入fast click庫,開啟終端，進入當前檔案 輸入npm install fastclick  --save

重啟專案 npm run start,再在main.js檔案裡引入fastclick  import fastClick from 'fastclick' 

在引入fastClick.attach( documnet.body)移動端的click事件延遲300毫秒就被解決了。

在移動端開發會用到一些小圖示，對圖示進行管理，icon 點選圖示管理--》我的專案 新建一個專案。

然後刪除一些無用程式碼。

然後把程式碼上傳到git 在git終端裡輸入git add . 在輸入git commit -m 'project init' 意思是專案初始化。這只是傳送到本地倉庫，還要上傳到碼雲，再輸入命令git push ,再打卡git官網。

在dependces裡安裝stylus  輸入命令npm install stylus --save 把stylus包安裝到stylus目錄，會修改package.json ,將模組名和版本號新增到dependencies部分，還要再安裝一個內容，是stylus-loader 輸入命令npm install stylus-loader --save 安裝好之後重新啟動 npm run start

開啟專案製作吧