前端站点学习

一，目录结构

1，vue-cli 3.0 搭建前端页面

• package.json 记录了项目所需依赖
• packagelock.json 记录了对项目npm install后项目拥有的依赖
• public下面放置index.html
• src记录代码逻辑和页面
• vue.config.js 识别vue3.0的关键
  2，node 搭建后端服务器

二，ui重点文件结构

1，src

• api

home.js
	导出该项目所需要的接口（向服务器发送axios请求）  
index.js
	引入home.js中导出的接口；将自定义方法写入vue原型中；在页面的其他位置直	接$方法名
    方法： 
        Object.defineProperties(Vue.prototype, {
          $fetch: {
            get() {
              return apiObj
            }
          }
        })

• assets 放置静态资源和部分抽出样式
• common

	1,config 全局配置的文件，比如加密前缀，请求路径'''
	2,自定义指令
         方法：
         步骤1：导出一个方法  
         步骤2：const vueDirective = {};
                vueDirective.install = function install(Vue) {
                    Vue.directive('scrollbar',scrollbar)
                };
                install的用途：
                	1，添加全局方法或prototype
                    2, 添加全局资源Vue.directive('my-directive',)
                  	3. 注入组件选项Vue.mixin()?
                  	4. 添加实例方法  Vue.prototype.$myMethod
                'scrollbar'是自定义的指令名，后边的是该指令对应的方法 
                 vue插件暴露一个install方法，Vue.js 的插件应该暴露一个 				  install 方法。这个方法的第一个参数是 Vue 构造器，第二个参                  数是一个可选的选项对象;
     3,创建axios实例同时添加响应拦截器：判断相应失败的原因，如果由于登陆原因失败，则跳转路由

• components

- 定义组件
- 尽量使用display flex进行弹性布局
- animation动画：动画名 动画持续时间 动画进行的方式 动画执行次数；比transition更加灵活；
- vw vh指的是页面视口宽高的占比100vw通常相当于页面视口的宽度
- calc（100vw-10px） 计算使用
- window.scrollTo在有滚动条的情况下可以直接回到页面的首部；
- background-size: cover;设置背景图片平铺在背景中；  
- index.js直接导出所有组件，在页面中可以用解构赋值获取需要的部分；
- transition可以进行路由或其他组件过渡；.fade-enter-active...

• views vue模板 用于路由占位处与vue-router合作展示在页面中；

watch: {
     '$route' (to,from) {
        this.fileName = this.$route.query.path
        this.getDetail(this.$route.query.path)
     } 
  },
  可以监视路由的跳入，跳出路由

• APP.vue定义挂载在app上的模板
• main.js Vue.use( plugin );插件需要引用时；
• router.js 将组件和路径结合起来，路由劫持 ，beforeEach()路由开始之前的操作
• Vuex

state,mutations,actions,getters  
在外部同步函数修改时：store.commit(funcName,params);
      异步函数修改时：store.dispatch(funcName,params);
      获取属性值：store.getters.属性；  

• Vue-tips

computed:{
	属性名（）{
    //return xx
    }
}
watch:{
	属性名（）{
    //操作，监控该属性，每当该属性变动时，都会执行该操作；
    }
}