在桌面新建一個空資料夾,拖動資料夾到編輯器開啟,  開啟命令視窗

1)安裝之前檢查是否已經安裝node環境，如果有我們就進行接下來的vue-cli的安裝，若果沒有我們則先安裝node環境。

2)安裝vue-cli腳手架，安裝程式碼為：npm install -g vue-cli，我們在這裡選擇的是全域性安裝，安裝完之後建立專案。

注意下你的網路,一些企業網都有自己的防火牆,會阻止你訪問國外的網站,導致你的腳手架安裝失敗,這個時候有兩種處理方法,一種是更換成自己的網路,一種是更換安裝程式碼npm換成cnpm訪問阿里的網站

3)然後根據提示選擇會否安裝外掛，如果安裝則選擇Yes，如果不安裝則選擇No,知道外掛選擇完成。

輸入vue init webpack +專案名,我寫的是魅族官網所以寫了mz,下方報錯是由於專案名裡包含了大寫字母,在這裡點選專案重構,重構專案目錄即可更改.

4)接下來就是確認和寫入你的專案基本資訊

首先是專案名,專案描述,作者,搭建vue專案,是否路由這幾項都可以手動輸入或是選擇yes ; 從是否規範程式碼向下的三項都選擇no,方便寫程式碼,如果採用程式碼規範的話編寫程式碼時必須按照ESLint格式編寫,否則會報錯

最後一項選擇yes,等待專案搭建好即可

5)之後我們cd切換到專案目錄，然後安裝專案依賴，專案依賴的安裝程式碼為：npm install

例如你需要安裝jQuery,就在命令列輸入npm install jQuery即可,其他的專案依賴也是如此,也可以安裝mui、bootstrap框架等

6)安裝專案依賴我們一般是安裝在專案內容外的,有的人也喜歡安裝在專案內容裡,

現在我們來執行一下專案,首先我們要找到我們的專案,輸入程式碼cd+專案名,也就是我們最上面寫到的vue init webpack +專案名裡的專案名,如果你不記得了可以在編輯器的工作目錄欄裡開啟專案,專案裡的資料夾名就是你一開始的專案名稱,

ok,好了,我們來執行一下專案npm run dev讓專案跑起來,生成相應的埠號,點選地址即可瀏覽網頁

這樣我們的vue腳手架就安裝好了,現在我們來看下魅族的官網

後一頁是我自己寫的,現在我們需要將自己寫的頁面丟出來在網頁上,我們就需要改下程式碼了

首先,在APP.vue中我們需要改下頁面樣式,將margin-top改為0

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0;
  padding: 0;
}
</style>

然後找到router中的index.js將顯示頁面改寫一下,在下圖中紅框標出的位置改為自己需要展示的頁面

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Main'

Vue.use(Router)

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

改好顯示後我們來看下自己寫的頁面

<template>
   <div id="main">
     <div class="swiper-container">
       <div class="swiper-wrapper">
         <div class="swiper-slide">
           <img src="https://fms.res.meizu.com/dms/2018/08/08/393cefef-c09b-4a5f-80b5-cbe18c5d1d86.jpg"/>
         </div>
         <div class="swiper-slide">
           <img src="https://fms.res.meizu.com/dms/2018/08/08/4d73f7c9-d3a5-42b7-ac67-1504ef4d8d17.jpg"/>
         </div>
         <div class="swiper-slide">
           <img src="https://fms.res.meizu.com/dms/2018/08/08/64b6693a-b4a1-4644-8cb4-bfa589a38c8f.jpg"/>
         </div>
         <div class="swiper-slide">
           <img src="https://fms.res.meizu.com/dms/2018/08/07/3027a74e-ceed-4f56-9473-85c3b638e572.jpg"/>
         </div>
         <div class="swiper-slide">
           <img src="https://openfile.meizu.com/group1/M00/05/C1/Cgbj0VtfzZCAd93kAARQaXMtqM0781.jpg"/>
         </div>
       </div>
       <!--導航條-->
       <div class="top-nav">

       </div>
       <!--分頁器-->
       <div class="swiper-pagination"></div>
     </div>
   </div>
</template>

<script>
import Swiper from 'swiper/dist/js/swiper'
    export default {
        name: "#main",
      mounted(){
       var myswiper = new Swiper(".swiper-container",{
          autoplay:{
            delay:3000
          },
          loop:true,
          pagination:".swiper-pagination",
        })

      }
    }
</script>
<style scoped>
  body{
    margin: 0;
    padding: 0;
  }
#main{
  width: 100%;
  height: 1000px;
  background: aquamarine;
}
  .swiper-container{
    width: 100%;
    height: 670px;
  }
  .swiper-slide img{
    width: 100%;
    height: 100%;
  }
  .top-nav{
    position: absolute;
    width: 100%;
    height: 100px;
    background: bisque;
    top: 0;
    left: 0;
    z-index: 100;
  }
</style>

在這一步上遇到的問題是引進css樣式,路徑沒問題,卻還一直報錯我用了四種方法,才讓swiper框架的css成功引進的,下面我們來看看引進的方式

1)import './../..node_modules/swiper/dist/css/swiper.min.css'    在main.js上方引入css,但是未成功,路徑沒問題

2)在webpack.base.conf.js中加入以下程式碼,似乎不管用

  {test: /\.css$/,
    include
:
  [
    src/,//表示在src目錄下的css需要編譯
    'node_modules/swiper/dist/'   //增加此項
  ],
    loader
:
  'style-loader!css-loader'

}

3)@import "`swiper/dist/css/swiper.min.css",百度上的方法,路徑會提示,但是也沒用

4)在嘗試了多種方法後我們的第四種方法閃亮登場了

在css成功引用後我們看到魅族原網上輪播圖部分帶著導航條的,這個時候我們就得自己寫了,swiper-container屬性中自己有position:relative屬性,因此,我們將導航條寫入到swiper-container盒子中,swiper-wrapper盒子的下方,如上方程式碼所示,再進行編寫即可,好了,今天的部落格就到這了,等我好好寫好一個專案了再來更新!

加油!!!