vue步步深入（三）脚手架文档的基本结构和处理

1."static"文件夹可以放静态资源

2."src"文件夹里自动生成的几个文件夹可以删掉，后面我们可以建自己需要的文件夹

3."App.vue"里面可以先删掉多余的东西，只留下最简单的模板

<template>

</template>

<script>
export default {
	
}
</script>

<style>

</style>

4."main.js"里面也可以先全部删掉，只留空白页，后面再一步步加上去

5.在"src"文件夹里面新建几个文件夹，如下

//api：用来放公用或常用的api

//base：基础组件，跟业务逻辑不相关的组件

//common：公用的方法，公用的字体

//components：业务逻辑组件

//router：路由

//store：做vuex的状态管理

6.在"build"文件夹的“webpack.base.conf.js”给上面新建的文件夹，认为常用的文件夹取别名（可以避免../深路径 引用复杂的问题）

在“alias”里面添加

7.把整个网页做成一个大组件<App></App>，放在index.js里面。

在‘main.js’文件引入所需文件以及package.json文件里面添加的包，相当于入口文件引入，则所有的组件都可以使用

import "babel-polyfill"    //这个引进来就可以了，不需要用，不用里面的方法
import Vue from "vue"
import App from './App'    //这里的写法不一样是因为引的是App.vue页面,要用相对路径的写法
import './common/stylus/index.styl'    //引入css样式
import fastclick from 'fastclick'


new Vue({
	el: '#app',	//把组件App挂载在index.js页面已经存在的DOM元素#app里面
	render: h => h(App)
})

其中‘render: h => h(App)’的‘h’是‘createElement’的简写，具体用法百度

8.公共样式，字体，图片等放置：在‘src’->'common'文件里面再新建文件夹如下：