vue知识点

1.vue的优点

渐进式:学一点,用一点,不用把vue全家桶里面所有的知识都学完才开发项目,后期的话我们学的越多就可以使用vue的全家桶(vue,vue-router,vuex)来进行开发。

数据驱动,响应式开发:只需要修改数据,就可以自动更新渲染视图。

双向数据绑定:表单里面输入数据,自动同步数据到data中

体积非常小,压缩以后,这个vue的库只有20kb,

性能高:不操作dom,vue自带虚拟dom,vue的底层会自动帮我们操作dom,比我们操作dom的性能要高

生态非常繁荣:配套的周边的资源非常丰富:仓库(vuex),路由库(vue-router),配套的ui库非常丰富(element系列,vant系列,antd)

面试题:请你说说vue开发跟原生开发的区别。

答案:原生开发:数据与视图联系,一般都是操作dom节点来操作,

vue开发:我们不操作dom,提高了项目的性能,vue是操作数据的

vue与react的区别:

架构思想:react: mvc vue: mvvvm=》mvc与mvvm有什么区别?

数据流:react:单向数据流 vue:双向数据流,

学习成本:react:学习成本非常高,原生js技术需求要非常扎实。vue:学习成本低。

面试题:vue在什么时候是单向数据流/子组件修改父组件传过来的值

答案:组件通讯

2.脚手架的区别

@vue/cli 与vue-cli

区别:版本不一样。

@vue/cli:可以搭建vue2&vue3的项目

搭建出来的项目,webpack的配置是隐藏起来的,我们要对webpack进行配置,都需要创建一个vue.config.js文件来进行配置

vue-cli:可以搭建vue1.0&vue2.0的项目

搭建出来的项目,webpack的配置是被暴露出来的。

3.vue的组件

  • 局部组件
  • 创建组件
  • 引入组件
  • 注册组件
  • 全局组件
  • 创建组件
  • 在main.js引入组件
// 引入全局组件的示例
import Father from './components/father.vue'
  • 在main.js通过vue.component(组件名,组件实例)
// 注册全局组件
Vue.component('Father',Father)
  • 运用场景:多次需要使用,需要复用。

4.组件通讯

  • 子传父
  • 子组件需要定义好传送的数据
  • 子组件可以通过绑定事件,也可以不绑定事件来传送
  • 子组件通过this.$emit(‘自定义的事件’,传送的数据)
this.$emit('changeVal',this.msg1)
  • 父组件通过v-on绑定子组件传过来的自定义事件转换位自己的事件,在methods里面调用这个事件,通过传一个形参,就可以获取子组件中传过来的数据
<Son :msg='msg' @changeVal='change'/>
  methods:{
      change(val){
          console.log(val,111);
          this.msg = val
      }
  }
  • 父传子
  • 父组件通过自定义属性传参
<Son :msg='msg' @changeVal='change'/>
  • 子组件通过props接受
// props:['msg']
        props:{
            msg:{
                type:String,   //设置父组件传递过来的数据类型	     String,Number,boolean,null,undefinend,Object,Array
                require:true,   //设置是否必传,
                default:'我是默认值哦' //设置默认值
            }
        },
  • 中央事件总线
  • 在main.js new一个vue的示例对象,把这个属性对象了挂载在vue的原型上,一般叫$bus
Vue.prototype.$bus = new Vue()
  • 兄弟1组件,可以通过this.uniapp ios 后台录音设置_javascriptemit(‘自定义事件’,参数)
this.$bus.$emit('msg',this.msg)
  • 兄弟组件2,可以通过this.uniapp ios 后台录音设置_数据_02on(‘传递过来的自定义事件’,(val)=>{val就可以获取到兄弟组件1传输过来的数据})
this.$bus.$on('msg',(item)=>{
     console.log(item,2222);
     this.val =item
 })

作业安排:vue优点+vue的脚手架区别+vue的组件=》手抄2遍,vue的组件通讯=》自己写代码,写两遍

今日目标:结合动态表单+vuex 实现户籍管理系统页面

  • vuex
  • vue的状态管理(状态机,仓库),一般运用于大型项目,小型用的比较少,一般用于公用数据存储。
  • 五大属性
  • state
  • state一般用于存储数据的 =》 vue中的data。 取:this.$store.state.要去的数据 =》辅助函数mapState也可以取数据,一般结合computed来一起使用的
  • mutations
  • mutations 修改数据的唯一方法,改&增:this.$store.commit(‘mutations里面定义的函数’,要改&增的数据)=》辅助函数mapMutations ,一般结合methods来一起使用的. 所有的操作都是同步
  • actions
  • 异步操作,操作一些异步的数据,修改数据的话,还是需要调用mutations 里面的commit的方法来修改=》store.commit(‘mutations里面定义的函数’,要改&增的数据).调用action一般使用this.$store.dispatch(‘actions里面定义的方法’,需要传递的数据)=》mapActions,一般结合methods来一起使用的
  • getters
  • vuex的计算属性 == computed, 一定要有返回值 =》辅助函数mapGetters
  • module
  • 仓库的模块化,运用场景:项目模块比较多,都要使用vuex的时候,分模块使用,利于管理

5.动态表单*

封装一个表单,在不同的表单组件里面都可以使用。

1.封装一个表单的组件,里面所有的数据全部都搞成动态(input,select,radio,checkbox,textarea)通过在父组件中传递的数据,进行v-for循环,然后进行v-if的判断,来进行渲染。获取到表单里面的数据我们通过子传父,传给父组件就行了。

2.在父组件中,把我们需要传递到子组件中的数据封装好,父传子传递过去就行。

6.生命周期

共11个,其中8个常用的,3个不常用

创建阶段

  • beforeCreate
  • created
    多用于发送请求
    面试题:如何在created里dom.
    答案:this.$nextTick() == vue.nextTick()。
    面试题:请你说说$nexttick的作用
    答案:将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。
<p ref='app' id="app"/>
this.$refs.app  == documnet.getElementById('app')

挂载阶段

  • beforeMount
  • mounted
    dom生成,可以操作dom
    更新阶段
  • beforeUpdate
  • updated
    销毁阶段
  • beforeDestory
  • destoryed
    运用场景:项目的性能优化(清除定时器,解绑事件,解绑不必要的全局变量)

7.路由vue-router

  • 路由模式
  • hash(默认模式 ---- 浏览器环境)
  • 底层基于onhashchange
  • history(浏览器环境)
  • 底层基于pushState
  • 缺点:项目打包以后,对页面进行刷新,会报错404. 需要后端对页面进行重定向
  • abstract(node.js环境)
  • 基本不用(了解项)
  • 路由守卫
  • 前置守卫:beforeEach(to,from,next)
  • to:去哪儿
  • from:从哪儿来
  • next:放行
  • next():放行到某个页面
  • next(‘/goods’) 放行到规定的页面(商品),
  • 解析守卫:beforeResolve
  • 后置守卫:afterEach
  • 路由独享守卫:beforeEnter
  • 组件守卫:
beforeRouteEnter(to, from) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` !
    // 因为当守卫执行时,组件实例还没被创建!
  },
  beforeRouteUpdate(to, from) {
    // 在当前路由改变,但是该组件被复用时调用
    // 举例来说,对于一个带有动态参数的路径 `/users/:id`,在 `/users/1` 和 `/users/2` 之间跳转的时候,
    // 由于会渲染同样的 `UserDetails` 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候,组件已经挂载好了,导航守卫可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from) {
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样,它可以访问组件实例 `this`
  },
  • 动态路由传参
  • 路由配置
{
    path: '/about/:id/:name',   //需要在这里面定义参数
    name: 'about',
    component: () => import( '../views/AboutView.vue')
  }
  • A组件传参
this.$router.push('/about/123/张三')
  • B组件接受
this.$route.params
  • 路由传参
  • router-link
#A组件跳转
<router-link to="/about?id=456">去关于我</router-link>
#B组件接收
this.$route.query
  • push 会把跳转的页面添加到历史记录里面
query  参数携带在地址栏上,页面刷新数据不会丢失。参数不能太多
this.$router.push({
    path:'/about',
    query:{
        id:456
        name:'李四'
    }
})
#接收
this.$route.query
params  页面刷新 数据会丢失,一般适用于移动端
this.$router.push({
    name:'about',
    params:{
        id:456
        name:'李四'
    }
})
#接收
this.$route.params
  • replace 不会把跳转的页面添加到历史记录里面
query  参数携带在地址栏上,页面刷新数据不会丢失。参数不能太多
this.$router.replace({
    path:'/about',
    query:{
        id:456
        name:'李四'
    }
})
#接收
this.$route.query
params  页面刷新 数据会丢失,一般适用于移动端
this.$router.replace({
    name:'about',
    params:{
        id:456
        name:'李四'
    }
})
#接收
this.$route.params
  • router与route区别
  • router是全局的路由信息对象,可以使用以下几个方法,对路由进行操作(跳转,回退,返回)
  • push 跳转页面
  • go 前进或后退
  • back 返回
  • forward 跳转
  • replace 替换页面
  • route是当前路由信息对象,可以获取路由的信息
  • name 路由里面定义的name
  • meta 元信息
  • params 使用name传参,获取的参数
  • query 使用path传参,获取的参数

8.vue内置API

更新数组的方法

vue将被监听的数组的变更方法进行了包裹,所以他们也将触发视图更新

vue底层,不能挟持数组,他挟持了数组的方法,只要调用这些方法,也会触发视图更新

面试题:请你vue2.0的缺陷(数据发生了变化,视图没有渲染)???解决的方案。

答案:监听不了对象跟数组的变化。

push 尾部添加

pop 尾部删除

shift 头部删除

unshift 头部添加

splice 截取

reverse 反转

sort 排序

Vue.set

Vue.set  == this.$set,  作用: 修改vue2的缺陷的。
#修改数组
this.$set(要修改的数组,修改数组的下标(索引),新值)
#修改对象
this.$set(要修改的对象,下标(键名),新值)

Vue.nextTick

作用:将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。

ref

运用场景: 操作dom,父组件调用子组件里面定义的方法;

操作dom: 在标签上面 定义一个ref => ref =‘xxxx’ 在生命周期里面使用通过: this.$refs.xxxx

父组件中调用子组件里面定义的方法:在子组件标签上面 定义一个ref => ref =‘xxxx’ 在事件使用通过: this.$refs.xxxx.方法名

Vue.directive

注册或获取全局自定义指令

Vue.directive('指令名',{
     //配置对象
     inserted(el,exp){//el:获取实例,exp表达式
    //当绑定的元素插入dom时,触发此函数
	}
})


//mian.js 使用   例如:注册一个添加背景色的自定义指令
// 自定义指令
Vue.directive('bgColor',{
  inserted(el,exp){
      el.style.background=exp.value
      el.style.color='#fff'
  }
})
<p v-bgColor="'blue'">改变背景颜色</p>

//自定义文件使用
//新建directive文件,在里面新建
export function bgColor(){
    return{
        inserted(el,exp){
            el.style.background=exp.value
            el.style.color='#fff'
        }
    }
}
export function bgColor(){
    return{
        inserted(el,exp){
            el.style.background=exp.value
            el.style.color='#fff'
        }
    }
}

//在mian.js使用
import * as directives from '@/directive'  // 引入自定义指令
Object.keys(directives).forEach((item)=>{
  Vue.directive(item,directives[item]())
})

Vue.filter

注册或获取全局过滤器。

// 局部过滤器
<!-- 定义完之后直接通过 管道符  |  调用即可 -->
<div>{{ msg | toFixed }}</div>
filters: {
    toFixed(val) {
        return val.toFixed(2);
    },
},
//全局过滤器
// 过滤器
Vue.filter('toFixed',(val)=>{
  return val.toFixed(3)
})


//进阶版本
//自定义文件使用
//新建filter文件夹,在里面新建
 export function toFixed(val) {
     return val.toFixed(4);
}
export function toUpperCase(val) {
    return val.toUpperCase();
}

//在mian.js使用
import * as filters from './filters/index';
Object.keys(filters).forEach(item => {
   Vue.filter(item, filters[item])
});

Vue.component

注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称

  • 局部组件
  • 创建组件
  • 引入组件
  • 注册组件
  • 使用组件
  • 全局组件
main.js
// 全局组件
import Mybtn from '@/components/Btn.vue'
Vue.component("my-btn",Mybtn)

vue.use

作用:调用|注册|使用 插件的

运用场景: ui库,router等

computed

  • 特点
  • 计算属性,常用于逻辑计算,最终返回一个唯一的结果,必须要有返回值
  • 写法与methods一样,使用函数名,就代表返回的结果
  • 有依赖缓存,只要依赖的响应式的数据发生变化了,就会出现计算,性能比较高
  • 写法
  • 写法一(标准写法 取数据)
<p>姓:{{ firstName }}</p>
<p>名:{{ lastName }}</p>
<p>姓名:{{ name }}</p>

data() {
    return {
        firstName: "科比",
        lastName: "布莱恩特",
    };
},
computed: {
   name() { return this.firstName + "-" + this.lastName;},		
},
  • 写法二(有get和set可以获取 也可以修改)
name: {
    get() {
        return this.firstName + "-" + this.lastName;
    },
    set(val) {
        console.log(val);
        let arr = val.split("-");
        this.firstName = arr[0];
        this.lastName = arr[1];
    },
},

watch

侦听器,主要观察数据的变化,自动返回旧值和新值

  • 写法一
watch: {
    name(newVal, oldVal) {
        // newVal: 新值
        // oldVal: 旧值
        this.oldVal = oldVal;
        this.newVal = newVal;
    },
},
  • 写法二
name: {
    immediate: true, // 立即执行
        handler(newVal, oldVal) {
        console.log(newVal, oldVal);
    }, // 执行函数
    deep: true, // 深度监听
},
#在变更 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本。
#解决方案:computed重新深拷贝定义

data

面试题:data为什么是个函数,而不是一个对象。

答案:组件复用或嵌套。如果说他是一个对象的话,他就没有作用域。会造成数据的污染,那如果是个函数的话,他就用自己的作用域,data定义的数据就只局限于当前组件。

插槽

分类:
	#匿名插槽
	<slot></slot>
	#具名插槽
	<slot name="header"></slot>   
	使用:
	以前:<p slot='header'></slot> 以前版本的,现在的vue2.0已经废弃了
	现在:<template v-slot:header></template > 
	#vue2.0   slot='插槽名'来插入内容,也可以用v-slot:插槽的名字,vue3.0只能用v-slot,不能用slot='插槽名'
	#作用域插槽
    子组件中的数组,在父组件中使用
    父组件中使用方法:
	前:<template slot-scope='scope'></template>
	现:<template v-slot='scope'></template>
	运用场景:element里表格中自定义的数据中来使用

动态组件&异步组件

#动态组件
<component :is='想要使用组件名'></component>
<component v-for="item in cominfo" :key="item" :is="item"></component>
import Card from '../components/Card.vue';
import Comone from '../components/comone.vue'
import Comtwo from '../components/comtwo.vue'
export default {
  components:{
    Card,
    Comone,
    Comtwo,
  },
  data(){
    return{
      cominfo:['Comone','Comtwo']
    }
  }
}
#异步组件
组件懒加载,想要用的时候才出发的组件了就叫异步组件
 components:{
   Card:()=>import('../components/Card.vue'),
   Comone:()=>import('../components/comone.vue'),
   Comtwo:()=>import('../components/comtwo.vue'),
 },

修饰符

#事件修饰符
	.stop  阻止事件冒泡
    .prevent  阻止重新加载页面
    .capture
    .self
    .once 只触发一次
    .passive
#按键修饰符
	.enter
    .tab
    .delete (捕获“删除”和“退格”键)
    .esc
    .space
    .up
    .down
    .left
    .right
#鼠标修饰符
	.left
	.middle
	.right
#自定义修饰符
	.sync
	.native

自定义v-model

v-model 默认会利用名为 value 的 prop 和名为 input 的事件

#父组件 
<el-input :value="val" @input="inputinfo"></el-input>  ==    <el-input v-model="val"></el-input>
#子组件
<template>
    <div>
        <input  :value="value" @input="changeInput" type="text">
    </div>
</template>
<script>
    export default {
        props:['value'],
        data(){
            return{
                val:''
            }
        },
        methods:{
            changeInput(e){
                this.$emit('input',e.target.value)
            }
        }
        
    }
</script>

混入 mixin

可以js里面代码全部抽离出来,封装成单独的js文件,在需要的组件中使用的话:直接引入,通过mixins:['引入的我js'],混入一下,就可以使用我们抽离出来的js里面的配置代码

1.创建mixins文件
export const globalMixns ={
    data(){
        return {
            num:30
        }
    },
    created(){
        console.log('我是创建阶段');
    },
    methods:{
        handleCli(){
            console.log('我是混入中的事件');
        }
    },
    mounted() {
        console.log('我是挂载阶段');
    },  
}
2.引入mixins文件
import {globalMixns} from '../mixins/index';
3.混入
mixins:[globalMixns],

项目相关的

token

  1. 作用:接口鉴权。
  2. 运用场景:
  • 路由拦截(路由权限)=》路由守卫(前置守卫),判断有没有token 有就放行,
  • axios的请求拦截里面,把token放请求头里面
  • (面试题)请求里面需要token但是实际中又没有token,会报什么错误??(token时效性) 答案:报错401
  • token的时效性判断:路由守卫,响应拦截.
  • 路由守卫里面的话,我们会判断这个token是不是正确的 =>后端会写一个判断token的接口来操作,在路由守卫里,我们就需要判断一下这个接口是否是正确的,正确的才跳转
  • 响应拦截判断token的时效性=>判断是否报错401,如果是401,返回登录页面,然后在把我们存的token清空
  • token无感刷新

权限

  • 管理系统权限:
  • 路由权限
    使用路由前置守卫 (beforeEach)
  • 用户权限(菜单权限)
  • 前端做(面试的时候千万不能说)
  • 登录,拿到权限的字段值(role)
  • 路由里面分为静态路由+动态路由(会在meta里面配置他的权限)
  • 通过拿到的role的字段值,进行一系列的判断(前端权限最难的带你)。然后把用户能访问的路由信息 通过addRoutes添加到路由里面
  • 最后拿到所有的路由信息,在菜单栏进行渲染就行了
  • 后端做(面试的时候一定要说)
  • 调接口,获取路由信息,进行渲染就,即可。
  • 按钮权限
  • 自定义指令 & v-if来做(不推荐v-show)

请求拦截和响应拦截

  1. 请求拦截(request)
  • 拿token,设置请求头的
  • 设置content-type(频率不多)
  1. 响应拦截(response)
  • 封装统一的弹框(请求失败或成功的弹框)
  • 判断code是否401,返回登录页面,清空token

promise

  • 什么是promosie:es6新特性之一,拿来解决回调地狱的。
  • promise的状态:3个状态,进行中(pending), 成功(fulfilled) ,失败(reject)
  • promise的静态方法:6个静态方法, resolve,reject, all ,race, any ,allSettled(了解前四个,重点:all race)
  • all : 并发请求(同时发多个请求),参数是个数组[请求1,请求2,请求3],响应的数据 =》(成功=》如果说 所有的请求都成功了,那么会在.then把所有成功的数据通过数组的形式返回来。失败=》如果并发的请求中,有一个请求发送失败了,那么他就会立即停止,只返回失败的数据。)
  • race:谁跑的快的就先获取谁。
  • promise只要执行了 就不能中断的 进行中=》 已成功 ; 进行中 =》失败
  • promise 与 async 和await的区别(面试题)
  • promise 是es6, async与await 是es7的
  • promise解决异步回调地狱的,async与await 把异步转为同步
  • 语法: async 语法上比promise更加简洁优雅
  • js的事件循环机制
  • 代码执行顺序
  • 从上到下,先同(步)后异(步),异步中又分为宏任务,微任务(promsie)。先宏后微。

响应式布局

最简单的解释:页面的自适应

pc端:1366&1920分辨率

  • 媒体查询 flex+百分比的布局 rem
  • rem =>借助px2rem 插件
    移动:各种不同的手机类型
  • rem => 默认的rem 1rem = 16px =>通过html 标签| body
  • rem => html |body =》企业中的rem 一般会进行js配置的
  • em=> 父元素
  • 小程序|uniapp =》 rpx
  • 面试题:echarts自适应=》window.onresize(监听屏幕宽度的变化)
window.onresize=()=>{
    echarts.resize()
}

支付

支付最难的不是前端,是后端。前端只需要调接口,拿数据就行了

  • vue项目支付
  • 拿商品信息的数组,发一个请求(后端),获取订单id
  • 拿订单的id,发请求,获取时间戳,签名,算法,随机字符串等等。
  • 得到这些数据以后了,在发支付的请求就可以了(支付的链接)。
  • 原生小程序|uniapp
  • wx.requestPayment
  • uni.requestPayment
uni.requestPayment({
    "provider": "wxpay", 
    "orderInfo": {
        "appid": "wx499********7c70e",  // 微信开放平台 - 应用 - AppId,注意和微信小程序、公众号 AppId 可能不一致
        "noncestr": "c5sEwbaNPiXAF3iv", // 随机字符串   后端给
        "package": "Sign=WXPay",        // 固定值   
        "partnerid": "148*****52",      // 微信支付商户号
        "prepayid": "wx202254********************fbe90000", // 统一下单订单号 
        "timestamp": 1597935292,        // 时间戳(单位:秒)
        "sign": "A842B45937F6EFF60DEC7A2EAA52D5A0" // 签名,这里用的 MD5/RSA 签名
    },
    success(res) {},
    fail(e) {}
})

性能优化

  • 组件封装 =>动态表单,动态表格,按钮, echarts,card
  • 封装工具函数 =>axios, 日期等等
  • 路由懒加载
  • 图片懒加载 =》 设置自定义属性 data-src
  • 减少http请求 => vuex(actions),存储
  • 生命周期(销毁阶段)=》 清除定时器=》clearInterval
  • zip压缩 =》 webpack
  • cdn =》
  • axios响应拦截=》 封装弹窗
  • 尽量使用字体图标
  • webpack配置 清除console.log
  • computed 代替 methods

多环境打包|启动项目

  • 环境(开发,测试,线上)=》axios里面的baseURL
"scripts": {
    "serve": "vue-cli-service serve",     //对应的环境    开发环境  development
    "build": "vue-cli-service build"	//对应的环境 	 正式环境	production
  },
  1. 创建对应环境的文件
  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fAoE7Ptk-1683563301183)(D:\试讲录屏\0310复习课\day05\doc\image-20220924114334522.png)]
  • 在文件里面配置对应的baseURL,必须要是 VUE_APP 开头的
VUE_APP_BASE_URL = 'http://192.168.0.0:8080'     //请求地址
VUE_APP_TITLE = '网易云线上版本'  //项目名字
  • 在package.json里面配置不同的启动命令
"scripts": {
    "serve": "vue-cli-service serve",     //对应的是开发环境的启动命令
    "serve:pro": "vue-cli-service serve --mode production",    //对应的是正式(线上)环境的启动命令
    "serve:test": "vue-cli-service serve --mode test",  //对应的是测试环境的启动命令
    "build": "vue-cli-service build", //对应的是正式(线上)环境的打包命令
    "build:pro": "vue-cli-service build --mode development", //对应的是开发环境的打包命令
    "build:test": "vue-cli-service build --mode test"  //对应的是测试环境的打包命令
  },

打包白屏

解决方案: 在vue.config.js 配置 pubilcPath:‘./’,

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath:'./',   //解决打包白屏产生的错误
})

工作流程

部门与部门之间的协作

  1. 第一天上班该干什么?
  1. 进公司,找hr. 办理入职手续.
  2. 带领你去找你的直系领导.
  3. 带到你的工位上面去.
  4. 直系领导会给你安排任务
  5. 直系领导会找对应的人员来跟你对接工作.
  6. 拿到电脑以后安装 vscode(里面各种各样的插件),谷歌浏览器,node,git
  7. 申请一个git账号,可以是项目组负责人或我们自己申请
  8. 项目拉取下来以后会给你1到3天的时间,给你熟悉代码的. 或者直接不给你时间,直接上手,给你一个功能让你实现.
  9. 只要是项目负责人(java居多,前端次之,ui,产品经理,测试).给你的任务在时间节点完成以后,你就要去向项目负责人要新的任务.因为刚进公司的,必须要表现的积极一点.
  10. 如果说我们的任务不多,又没有其他的任务要做了,切记不要摸鱼,就算是我们摸鱼也要表现的非常努力的样子.
  11. 进公司后,如果说想要在公司里面站稳,就算我们技术不是太好 那我们该如何在公司里面站稳? ‘舔’ == 我们社交能力,我们跟公司的同事关系都处理的非常融洽.公司一般辞退人,一般会问你的同事.尤其要在公司里面跟后端的关系一定要处理好,尤其是同项目组的后端.
新项目的工作流程:
  1. 产品经理产出原型图.使用工具:墨刀
  2. 立项大会: 产品经理组织的,参会人员有前端,后端,测试,ui. 目的:了解项目需求,项目开发周期,项目技术栈定型,
  3. 项目开发. 前端,后端,ui. 例:管理系统:前端会根据原型图来画页面. ui出图以后我们再根据ui图进行微调即可. ui根前端一般是怎么进行对接的. 通过 蓝湖
    前端完成一部分项目页面以后 会进行接口对接. 例:半个月完成 商品管理,人员管理. 接口对接完成以后 测试进场 进行测试. 前端如何跟后端进行对接: showdoc线上接口文档,swagger.
    前端如何跟测试进行配合:禅道
  4. 项目开发完成以后,测试完 bug也修改完以后 最后就打包上线.
  5. 前端做打包上线: yarn build 打包dist目录(打对应环境的包).
    前端上线:向后端要服务器的远程地址和前端页面存放的路径(D://xxx/xxxx/xxx)
    把dist目录扔进去就行了
    非前端上线: dist文件 直接扔给对应的上线人员就行了(后端,运维)

12.yarn : 无法加载文件 C:\Users\admin\AppData\Roaming\npm\yarn.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 h
ttps:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1

解决方案:

1.搜索powershell,然后以管理员身份运行(记住要以管理员身份进去)

2.输入 set-ExecutionPolicy RemoteSigned 回车 在弹出的内容后面 输入Y 然后关闭即可

融洽.公司一般辞退人,一般会问你的同事.尤其要在公司里面跟后端的关系一定要处理好,尤其是同项目组的后端.

##### 新项目的工作流程:

   1. 产品经理产出原型图.使用工具:墨刀

   2. 立项大会:  产品经理组织的,参会人员有前端,后端,测试,ui.   目的:了解项目需求,项目开发周期,项目技术栈定型,

   3. 项目开发.  前端,后端,ui.   例:管理系统:前端会根据原型图来画页面.  ui出图以后我们再根据ui图进行微调即可.  ui根前端一般是怎么进行对接的.    通过 蓝湖

      前端完成一部分项目页面以后  会进行接口对接.     例:半个月完成   商品管理,人员管理.  接口对接完成以后  测试进场  进行测试.   前端如何跟后端进行对接:  showdoc线上接口文档,swagger.

      前端如何跟测试进行配合:禅道

   4. 项目开发完成以后,测试完 bug也修改完以后 最后就打包上线.

   5. 前端做打包上线:    yarn  build  打包dist目录(打对应环境的包).

      前端上线:向后端要服务器的远程地址和前端页面存放的路径(D://xxx/xxxx/xxx)

      把dist目录扔进去就行了

      非前端上线: dist文件 直接扔给对应的上线人员就行了(后端,运维)

   12.yarn : 无法加载文件 C:\Users\admin\AppData\Roaming\npm\yarn.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 h
   ttps:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
   所在位置 行:1 字符: 1

   解决方案:

   1.搜索`powershell`,然后以**管理员**身份运行(记住要以管理员身份进去)

   2.输入 set-ExecutionPolicy RemoteSigned 回车 在弹出的内容后面 输入Y 然后关闭即可