vue-cli腳手架專案構成

pro-xiaoy發表於2018-02-05
Vue

這篇文章針對於已經會用腳手架搭建vue的同學，如果不會從vue腳手架搭建，可以先稍微瞭解下Node和es6，這樣對你學習vue很有幫助。

初學vue，當腳手架刷刷刷的一次性拉下來那麼多JS，和.vue的檔案時，應該或多或少都有點矇蔽，vue官網的介紹和node上面的提示都有點作用，我想每個人都走過那些坑吧，因為vue對於程式碼格式要求很高，所以寫的時候慎重慎重。下面放一張圖這張圖也是從網上盜來的祖傳圖--!

祖傳程式碼圖

原諒我畫了特別醜的紅線！因為這兩個檔案在目前的vue腳手架中已經刪除（讓我吃過大虧）！

build[webpack配置]

build檔案主要是webpack的配置，主要啟動檔案是webpack.dev.conf.js，當我們輸入npm run dev首先啟動的就是webpack.dev.conf.js，它會去檢查node及npm版本，載入配置檔案，啟動服務。這些內容我們可以在package.json裡面看到。以及我們匯入node用node進行介面配置匯入資料都是在這個檔案裡面配置。

vue-cli腳手架專案構成

config——[vue專案配置]

重點提一下Index.js這裡面配置埠號和首頁資訊，裡面是一點基礎的Node知識在這裡就不多說。

node_modules——[依賴包]

npm install ,npm安裝包，可以直接安裝你想用的外掛比如jquery很方便。重點提一點，如果你想安裝全域性的在package.json中找到你所引入的外掛以及他的版本，安裝的時候加入--save,比如：npm install jquery --save。
寫完發現祖傳的圖上面沒有node_modules這個資料夾見諒見諒。

src——[專案核心檔案]

1.App.vue——[根元件]
一個vue頁面通常由三部分組成:模板(template)、js(script)、樣式(style)。
  1. template類似於一個大的div巢狀內容，初始化的app.vue裡面會巢狀一個router,相當於裡面的跳轉頁面
  2. script是用es6寫的，裡面一些基礎的vue知識我想既然都要用到腳手架就說明本地的vue.js檔案或多或少會知道。這個仁者見仁智者見智。
  3. style，樣式，就不多說了。這裡你會看到import這種引入樣式表的方式。
2.main.js-[入口檔案]
main.js主要是引入vue框架，根元件及路由設定，並且定義vue例項。順口說一句
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import MuseUI from 'muse-ui'  //引入muse-ui的框架
    import 'muse-ui/dist/muse-ui.css'
    import axios from 'axios'  // 引入axios的框架非同步方法
    import store from './vuex/store' //這就是vuex，vue的專案管理工具，能不用就不用的東西。
    Vue.use(MuseUI);
    
    Vue.config.productionTip = false
    
    //vue原型中加入axios
    Vue.prototype.$http = axio  //這句話忽略不計我自己專案中的.

    new Vue({
      el: '#app',
      router,
      store,
      components: { App }, // components組建資訊引入App.vue檔案
      template: '<App/>',
      beforeCreate(){
        this.$store.dispatch('getData',this); // 生命週期裡面的，可以不看這是專案中的
      }
    })
複製程式碼
3.router/index.js
    import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router) //配置vue使用路由
    
    import friend from '../components/friends/friend' // 將friend這個組建引入
    let routes = [
      { path: '/friends', name: 'friend', component: friend }, //跳轉資訊
    ]
    
    export default new Router({
      routes
    })
複製程式碼

static

語義化，靜態檔案的意思，可以放json或者imgs或者css檔案

package.json專案基本資訊，打包工具基本可以在裡面閱讀到你可以看到的檔案和配置記憶版本號

文筆很糟糕，能看到這的都是大神。如果有緣人看到裡面有錯誤可以交流交流，共同進步。

          ----------天雨大不潤無根之草，佛法寬只度有緣之人(佛系90後麼麼噠)複製程式碼

相關文章