美文网首页
2018.5.30-BTHJ项目心得

2018.5.30-BTHJ项目心得

作者: yguang94 | 来源:发表于2018-05-31 11:27 被阅读0次

    想到哪写哪~~

    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引用

    未完待续

    相关文章

      网友评论

          本文标题:2018.5.30-BTHJ项目心得

          本文链接:https://www.haomeiwen.com/subject/wbzfsftx.html