前端开发流程

1 创建目录结构

1.1 项目大体结构

package.json记录了工程所有依赖，及脚本命令
开发使用：npm run dev
打包使用：npm run build

webpack.base.conf.js就是webpack的webpack.config.js配置文件，在此文件中配置了入口文件及各种Loader，webpack 是通过vue-load解析.vue文件，通过css-load打包css文件等

main.js是工程的入口文件，在此文件中加载了很多第三方组件，如：Element-UI、Base64、VueRouter等。
index.html是模板文件。

然后时src目录，src目录下存放页面及js代码。
src目录下各个目录的大概意思：
assets：存放一些静态文件，如图片。
base：存放基础组件
base/api：基础api接口
base/component：基础组件，被各各模块都使用的组件
base/router：总的路由配置，加载各模块的路由配置文件。
common：工具类
component：组件目录。
mock：存放前端单元测试方法。
module：存放各业务模块的页面和api方法。
一般都是在src目录下的module目录下创建对应功能模块的目录结构，每个模块以模块名命名,目录结构大体上可以分为：
test/api：test模块的api接口
test/component：test模块的组件
test/page： test模块的页面
test/router ：test模块的路由配置
statics：存放第三方组件的静态资源
vuex：存放vuex文件
static：与src的平级目录，此目录存放静态资源
它与assets的区别在于，static目录中的文件不被webpack打包处理，会原样拷贝到dist目录下。

2 开发流程

2.1 先创建页面，例如test.vue的文件

1.创建静态页面
2. 如果要访问这个页面，就要定义路由了，创建路由配置文件，就是.js文件，在文件里面导入静态页面，然后再在总的base目录下的router目录下的配置文件里面配置这个模块的路由信息，记得要导出
3. 在api目录下创建js文件，调用服务端方法，但是直接调用会出现跨域问题，关于跨域问题，可以这样解决：
浏览器出现跨域错误，会报如下错误：
No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://ip:port’ is therefore not allowed access.
原因：浏览器的同源策略不允许跨域访问，所谓同源策略是指协议、域名、端口相同，直接调用服务端的方法，ip和端口都不同，就会出现跨域问题。
解决：解决的方法有很多，这里采用proxyTable解决，因为跨域问题只在浏览器会出现，在服务器之间不会出现跨域问题。
vue-cli提供的解决vue开发环境下跨域问题的方法，proxyTable的底层使用了http-proxy-middleware（https://github.com/chimurai/http-proxy-middleware），它是 http代理中间件，它依赖node.js，基本原理是用服务端代理解决浏览器跨域
4. 在静态文件中调用该方法

2.2 访问流程

1.浏览器输入：http://ip:port/#/xxx
2.通过路由，在路由js文件中找到path:’/xxx’的一项，对应的component:page就是导入的具体哪个页面
3.找到这个页面之后会看有没有钩子方法，如果有钩子方法，则根据vue的生命周期从前往后执行对应的钩子方法
4.先执行created()这个钩子方法，当实例对象创建好,还没有渲染DOM元素的时候调用，取出路由中的参数,赋值给数据对象：this.$route.query.page
执行完这个方法，浏览器访问的路径在查询的时候就把一些分页参数默认拼接上了
5.再执行mounted()这个钩子方法，当DOM元素渲染完成后调用，并执行方法里面的内容
6.如果说mounted方法中调用query查询方法，就会到服务端请求数据，就会有跨域问题，这个时候用代理来解决，设置proxyTable，遇到特定的，比如：/test/demo这个路径，就转到服务端某个服务端口下的某个方法上
7.然后就去服务端调用方法，调用成功后就调用then方法，then方法里面接收到服务端返回的数据，然后把服务端响应的数据赋值给页面的数据对象，
然后通过数据绑定，将数据对象中的数据渲染到DOM元素中，进行展示。