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是项目配置文件