VUE前端框架学习-自己已存在vue测试工程的开发要点

我的vue.js前端test工程，学习记录

第一、重要开发工具

vue：是一套用于构建用户界面的 前端框架。学习网址:https://cn.vuejs.org/v2/guide/

vuex： 是一个专为 Vue.js 应用程序开发的状态管理模式，集中式存储管理应用的所有组件的状态。学习网址：https://vuex.vuejs.org/zh/

vue-cli：是用vue开发的脚手架，可方便的创建vue工程。学习网址:https://cli.vuejs.org/zh/guide/prototyping.html

html、javascript、CSS：前端开发的基本语言，样式可用属性：https://www.runoob.com/css/css-background.html

SCSS：是一款强化的CCS的辅助工具，前端发布时是会将其转变为CCS。学习网址：https://www.sass.hk/docs/

              样式可以用属性:https://www.runoob.com/css/css-background.html

mock：前端工程师开发的最基本工具，可以模拟后台服务器的数据。学习网址：http://mockjs.com/

webpack:是一个打包工具，打包前端的所有资源，会将工程所有的文件转变为前端能够识别的发布包。学习网址:https://www.webpackjs.com/

element-ui:是一个前端基本UI开发库。学习网址：https://element.eleme.cn/#/zh-CN/component/installation

EChars：前端开发UI高级开发库（包括各种图表类库）。学习网址:https://echarts.baidu.com/echarts2/doc/example.html

vue-element-admin:基于vue.js一个模板框架，该框架使用了vue、element-ui、EChars。是一个比较完成的模板框架，学习网址：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%8A%9F%E8%83%BD

 

---

 

第一、动态路由
路由文件：src/router/index.js
配置某个路由权限的方法
1、vue启动时，会由静态路由表”constantRouterMap“，生成导航栏，登陆成功后，会动态添加路由表"asyncRouterMap"
2、路由是分级的，是一个树形结构。<route-view/>指示从路由树形结构显示组件
3、src/store/dyrouter.js，是动态路由的添加操作
4、/src/permission.js中有一个beforeEach方法，该方法也是一个钩子方法，当出现路由切换之前会执行该方法
    在该方法中，如果有用户名为空，并且获取的用户信息，并添加动态路由

---

第二、窗口布局
1、配置主界面整体布局最顶层组件:src/layout/Layout.vue
2、包括顶层区，侧边栏，主窗口
3、顶层组件:src/layout/components/Navbar.vue
   主窗口区组件:src/layout/components/AppMain.vue
   测边栏组件:src/layout/components/Sidebar/index.vue

---

 
第三、服务器回应拦截器
1、拦截器源码在"/sr/utils/request.js"，service.interceptors.response.use方法的参数即为拦截器
    可对服务器的回应数据，进行预先判断和处理。

---

第四、样式
1、在每个组件中添加属于自己的样式，即可在"src/styles"中添加样式。

---

第五、插曹
1、官网说明网页：https://cn.vuejs.org/v2/guide/components-slots.html
2、父组件，放在组件中显示
    包括：匿名插槽（单个插槽、默认插槽），具名插槽，作用域插槽（带数据的插槽）

---

第六、开发阶段数据模拟

1、build/webpack.dev.conf.js文件中有一行内容"before: require('../src/mock'),"将其反注释，即可启动模拟数据

2、src/mock/index.js就是接收请求文件，在此文件中可解析请求，并向请求发送数据。

---

第七、开发阶段请求代理（请求转发至其他主机）

1、build/webpack.dev.conf.js文件中有一行内容"before: require('../src/mock'),"将其注释，即可关闭模拟数据

2、将package.json文件中的DEV_PROXY_URL改成不同的主机（IP地址），即可将请求数据转发向该IP所在的主机

3、proxyTable指定本地请求的资源转向至某个主机。具体搜索”webpack之proxyTable设置跨域“

---

第八、开发阶段监听端口

1、在config/src/index.js文件中，有一个port键，该键定义了在开发阶段本地监听的端口号。