上一篇文章https://segmentfault.com/a/11...介绍了项目中文件夹的分类和作用，这次主要讲解src文件夹具体文件分类和内容。先上src文件夹的结构图：文件和文件夹的作用App.vueApp.vue：根组件，pages中的组件都会被插入到这个组件中，这个组件会被插入到index.html文件中形成一个单页应用根组件里面是这样的：其中，组件是一个功能组件，渲染路径匹配的视图组件。被渲染的组件也可以嵌入自身，根据嵌套路径渲染被嵌套的组件。这样就实现了在单个页面下根据不同路由渲染不同组件的目的。根组件基本上没有交互可做，底部样式其实可以放在全局样式表中。main.jsmain.js：入口js文件，影响全局。它的作用是引入全局使用的库，公共样式和方法，设置路由。这是负责配置影响整个世界的内容的文件。它将具有以下功能：1.导入vue和相关库importVuefrom'vue'//introducevueimportstorefrom'./store'//introducevueximportrouterfrom'./router';//引入路由配置文件importAppfrom'./App'//引入根组件2.引入需要使用的第三方库（注意注册和使用的区别）//引入element-uiimportElementUIfrom'element-ui';import'element-ui/lib/theme-default/index.css';Vue.use(ElementUI);//引入字体图标样式，这里使用阿里妈妈的iconfont字体库import'@assets/iconfont/iconfont.css';import'@assets/iconfont/iconfont.js';//引入复制信息组件importVueClipboardsfrom'vue-clipboards';Vue.use(VueClipboards);//引入axios库importaxiosfrom'axios'//导入d3图形库import*asd3from'd3'//导入国际化库importVueI18nfrom'vue-i18n';Vue.use(VueI18n);//导入自定义json格式英文控制文件importzhfrom'@assets/lang/zh-CN'importenfrom'@assets/lang/en-US'Vue.config.lang='zh-cn'//设置默认中文Vue.locale('zh-cn',zh)Vue.locale('en',en)//导入时间转换模块importmomentfrom'moment';moment.locale('zh-cn');Vue.prototype.$moment=moment;//将moment模块转换成Vue的原型方法，可以直接在组件中使用this.$moment(time)//引入图表importEChartsfrom'vue-echarts';Vue.component('chart',ECharts);//将Echarts注册为全局组件，可以直接调用3.引入自定义库//引入银行卡图标样式import'@assets/icon-bank/iconfont.js';//收集在iconfont上的银行卡图标//引入一个自定义的http模块import{AjaxApi}from'@http/AjaxApi.js';//http文件夹下一个自定义的处理api接口的文件，导出一个包含所有与后台接口通信的函数的对象Vue.prototype.$axios=AjaxApi;//加入Vue原型方法，在组件中调用this.$axios.xxx()//引入public方法importcommonMixinsfrom'@mixins/common-mixins.js';//mixins文件夹下的自定义常用函数的集合Vue.混入（普通混入）；//全局注册组合4.引入自定义公共样式，使组件可以使用scoped定义自己的样式//引入公共样式和修改元素样式import'@assets/css/common.less'import'@assets/css/theme.less'5.定义一些不需要单独导入的简短全局修改//在html5history模式下，在表单组件（input输入框等）中点击enter，会自动向后台发送表单数据get形式，需要阻止默认事件document.onkeydown=function(e){vare=e||事件;如果（e.keyCode==13）{e.preventDefault？e.preventDefault():(e.returnValue=false);}};//格式化金额，每三位加一个逗号，可选择保留小数点后几位Number.prototype.format=function(n,x){varre='\\d(?=(\\d{'+(x||3)+'})+'+(n>0?'\\.':'$')+')';返回this.toFixed(Math.max(0,~~n)).replace(newRegExp(re,'g'),'$&,');};6、设置vue的全局配置，在启动应用前应用Vue.config.productionTip=false；//防止vue在启动时生成生产提示7、指定渲染文件newVue({el:'#app',template:'',router,store,components:{App}})assets文件夹assets：放置静态资源，包括公共css文件、js文件、iconfont字体文件、img图片文件等资源文件。文件结构如下：css文件夹下会有重置css样式的文件和其他全局样式文件。js文件夹包含字典文件，包含银行字典和全国省市，在组件中引用后遍历获取数据。components文件夹components：放置常用的模块组件。项目中总会有一些可复用的组件，比如弹框、发送手机验证码、图片上传等，将它们作为通用组件使用，避免重复工作；结构如下：可以按功能模块创建文件夹，将本功能要用到的放置到常用组件中。例如注册、登录、重置密码等功能使用的常用模块文件（账号、密码、图形验证码、短信验证码）可以放在login文件夹下；account-center文件夹包含与修改帐户相关的模块。全局通用的公共模块不需要创建文件夹。http文件夹http:放置后台api相关的文件。有axios库的实例配置文件，使用配置好的axios实例访问api获取数据的函数集合文件；结构如下：config.js是根据项目需求配置的axios实例文件，通过axios.create([config])创建，可以进行指定成功状态码、序列化params、设置headers、修改token等配置，设置全局请求/响应拦截器，设置baseURL等。AjaxApi.js导入config.js实例，传入API等参数，为每个API配置专用功能，然后将文件组装并导出为对象。示例如下：mixins文件夹mixins：放置混合选项的文件。具体来说，它相当于一个公共函数的集合。当在组件中被引用时，它可以作用于组件而无需编写重复的方法。在我看来，它相当于一个没有和
