vue cli 中 每個文件所代表的意義

 

1， build   保存webpackde 初始化配置， 

2， config  保存項目初始化配置

3， node_modules    npm 加載的項目依賴模塊

4， src 文件夾是我們項目開發的目錄

　　　　如下圖：

　　　　

　　　　4.1 , assets 用來放置圖片

　　　　4.2 , components 用來放置組件文件

　　　　4.3 , router  用來放置路由相關的文件 

　　　　4.4 , App.vue  項目的入口文件(相當於一個組件)　

<template>
  <div id="app">
    <router-view class="view"></router-view>
    <router-view class="view" name="subject"></router-view>
    <router-view class="view" name="search"></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

　　　　　4.5 main.js  項目的核心文件  

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import vueScrollBehavior from 'vue-scroll-behavior'
import 'normalize.css'

Vue.use(vueScrollBehavior, { router: router })

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

　　　　import Vue from ‘vue’ 

　　　　import App from ‘./App’ 

　　　　import router from ‘./router’ 

這三句的意思是首先引入vue,   然后引入了./App即App.vue文件。最后一句是引入一段路由配置。 

然后是實例化new Vue .el:’#app’意思誰將所有的組件都放在id為app的元素中。

components表明引入的文件，此處就是app.vue這個文件,這個文件的內容將以這樣的標簽寫進#app中。

 　　　　　　webpack在編譯時可以將.vue文件中的這三部分抽出來合成cinderella單獨的文件。 

　　　　　　4、static文件夾用來放置靜態資源目錄 

　　　　　　5、index.html是首頁入口文件 

　　　　　　6、package.json是項目配置文件