2018.5.30-BTHJ项目心得

想到哪写哪~~

1.关于流程(搞清楚思路)

交代背景--公司就我一个人前端,所以都是自己来...这个项目是个单页面应用...
①界面构成
②跳转关系
③组件划分
④文件结构

2.关于开发

2.1.起项目
就目前水平还是老老实实的用标准的吧 vue init webpack my-project
用simple的太简单,好多东西需要自己配
2.2准备组件
可以先建文件写上名字,具体内容不用先着急写
2.3配置路由
先安装,然后main.js引用
然后在router文件夹下的index.js里写配置
首先凡是用的上的组件先import一顿引用,包括vue
然后Vue.use(Router)
再然后export default new Router({ })里面写路径啊,名字啥的
比如:

export default new Router({
    mode:'history',
    router:[
        {  
          path:'/'
          redirect:'Home'            //这是当出现'/'时,自动跳转到Home路由
         },
        {  
          path:'/home'
            componet:Home 
        }
    ]
})

路由写好后记得测试
2.4写组件
框架用的elemnetUI,直接就按照设计图写就ok
数据可以先暂时用假数据,暂时不写model,也可以本地在static文件夹下建个mock文件夹理解写的json文件,然后用axios配一下本地,(这个axios后面再说)
还可以用在线的mock网站,本来有人推介了野狗云,结果我没账号还用不了.最后用easy mock.主要是我们后台大大要前端发的请求都是psot请求,本地mock发get请求比较简单,post请求有点复杂,我就把mock的数据都转移到了easy mock上,可以接受post请求,很好用.
2.5关于axios

//在config的index.js里增加如下内容

//这是axios配置本地mock时
proxyTable: {
      '/api':{
       target:'http://localhost:8080',
        changeOrigin: true,
        pathRewrite:{
             '^/api': '/static/mock'
       }
      }
//------------------------------------------------------------
//这是axios配置easy mock时
  proxyTable: {
      '/api':{
        target:'https://www.easy-mock.com/mock',
        changeOrigin: true,
        pathRewrite:{
          '^/api': ''
        }
      }

2.6 axios封装
axios可以封装起来,包括很多可以公用数据处理都可以封装到一起,在组件需要的时候import引用

未完待续