vue-cli腳手架項目構成

這篇文章針對於已經會用腳手架搭建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進行接口配置導入數據都是在這個文件裏面配置。

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後麼麼噠)複製代碼