Vue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲

F:\Vue教程\Vue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲

Vue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲

F:\Vue教程\Vue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲\第1章课程介绍

第1章课程介绍

1-1.mp4

Vue深精透
@Jokcy

讲项目的课程的问题
业务逻辑较多，80%的时间在实现业务
对于知识点的讲解不全面，没有体系
不太涉及工程化的内容，基本项目通过vue-cli生成
不深入讲解服务端宣染

http://ssr.todo.jokcy.me/app

有服务器服务端宣染一开始带有数据的不空白显示

学习之后的收获
掌握Vue开发的各个环节
无需依赖vue-cli搭建Vue工程的能力
具备全栈开发的能力

1-2 项目介绍.mp4

https://www.imooc.com/learn/935

1-3 Webpack4升级注意.mp4

https://www.imooc.com/article/23555 webpack4升级指北

F:\Vue教程\Vue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲\第2章 Vue+Webpack的前端工程工作流搭建

第2章 Vue+Webpack的前端工程工作流搭建

2-1 项目目录升级-一个正式项目的目录结构.mp4

webpack-merge合并工具

2-2 vue-loader配置.mp4

vue-style-loader

npm i rimraf -d 删除dist目录

doc-loader

2-3 css module配置.mp4

2-4 安装使用eslint和editorconfig以及precommit.mp4

npm i eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node -D

创建文件.eslintrc

npm i eslint-plugin-html -D

npm i eslint-loader babel-eslint -D

vscode 插件 EditorConfig for VS Code

npm i husky -D

git init

2-5 Webpack4升级.mp4

npm uninstall webpack webpack-dev-server webpack-merge -D

npm i webpack webpack-dev-server webpack-merge webpack-cli -D

npm i extract-text-webpack-plugin@next -D next测试版

F:\Vue教程\Vue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲\第3章 Vue核心知识

第3章 Vue核心知识

3 章.mp4

学习框架主要api

有runtime 没办法写template 会报错

const div=document.createElement('div')
document.body.appendChild(div)
app.$el
app.$options newVue({})里面全部
app.$isServer SSR服务端   

组件上的watch会销毁
$watch需要手动
const unWatch=app.$watch('oo',()=>{})
unWatch()

app.$on('x',()=>{}) 注册事件
app.$emit('x') 触发事件

app.$forceUpdate()强制重新渲染  性能低
或者用
app.$set(app.obj,'a',i)
$delete删除

异步更新dom节点 解决
vm.$nextTick(cb)

主动销毁 app.$destroy()

SSR beforCreate created执行

renderError(h,err) render错误才执行

errorCaptured 组件报错捕获到 会向上冒泡，并且正式环境可以使用

// eslint-disable-line

watch 'obj.a'优化 deepTrue 不每次都触发

v-model.lazy 懒加载 change改变才修改 一次性 input标签

不是new出来的 是组件全局或局部 data是函数 否则同一个组件俩次使用同时改变

boolean 布离

props 可以传fun  type:Function

改props数据
赋值data中转
this.$emit()

:on-change="fn"
props:{
    onChange:Function
}


Vue.extend(component) 继承
propsData
扩展
const component2={
    extends:component,
    data(){return{}}
}

model:{
    prop:,
    event:'change'    
}

slot插槽 具名 作用域 slot-scope v-slot
作用域使用子组件的变量

this.$parent.$options.name

provide(){return{}}
inject:['xx']

  // template: `
  //   <div :style="style">
  //     <slot></slot>
  //   </div>
  // `,
  render (createElement) {
    return createElement('div', {
      style: this.style
      // on: {
      //   click: () => { this.$emit('click') }
      // }
    }, [
      this.$slots.header,
      this.props1
    ])
  },
      
router export函数 SSR 内存溢出

F:\Vue教程\Vue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲\第4章 Vue-Router和Vuex

第4章 Vue-Router和Vuex

4-1 4-2 4-3.mp4

hash路由不被搜索引擎解析 SSR不带#mode=history

export default ()=>{
    return new Router({
        routes,
        mode:'history',
        base:'/base/',//路径加上
        linkActiveClass:'',//router-link标签的类
        linkExactActiveClass:"",
        scrollBehavior(to,from,savedPosition){
            //有滚动位置就返回位置 没默认
            if(savedPosition){
                return savedPosition;
            }else{
                return {x:0,y:0}
            }
        },//跳转滚动
        parseQuery(query){ //url转json
            //query Q儿 app?id=1&name=koo
        },
        stringifyQuery(obj){},
        fallback:true,//浏览器不支持history 自动转hash模式 
        //设置false 单页面变多  多请求服务器
    })
}
函数闭包 多个地方使用 改不是同一个
transition 窜碎身
.v-enter-active,.v-leave-active +transition
.v-enter,.v-leave-to

params :id /app/123 动态 PD
query app?id=1&name=koo Q?

4-4 Vue-router之导航守卫.mp4

命名视图
<router-view name='a'/>
    
router.js
{
    path:'/app',
    components:{
        default:one,
        a:two    
    }    
}
三蓝布局

Vue-router之导航守卫
router.beforeEach((to,from,next)=>{
    //登录验证
    next()
    next('/login')跳转
})
router.beforeResolve((to,from,next)=>{
    next()
})
router.afterEach((to,from)=>{
    
})

router.js
{
    path:'/app',
    beforeEnter(to,from,next){
        next()
    },    
    component:One 
}

vue组件
export default{
    beforeRouteEnter(to,from,next){
        next()
    },
    beforeRouteUpdate(to,from,next){
        //出err 弹框
        next()
    },
    beforeRouteLeave(to,from,next){
        //离开的确
        next()
    },
}

global.confirm('are you sure?')

4-5 Vuex之集成.mp4

4-6 Vuex之state和getters.mp4

4-7 Vuex之mutation和action.mp4

export default()=>{
    return new Vuex.Store({
        strict:true,//其他地方使用无法直接修改state 报错
        state,
        mutations,
        plugins:[
            (store)=>{}
        ]
    })
}

4-8 Vuex之模块.mp4

modules:{
    a:{
        namespaced:true,
         state,
            mutations:{
                update(){}
            },
             getters:{
                 textp(state,getters,rootState){}
             }   
    }
}
this['a/update']()
...mapMutations(['a/update'])

动态注册模块
store.registerModule('c',{
    state:{
        test:3
    }
})
解绑
store.unregisterModule('c')
store热更新

store.watch((state)=>{return state.count+1},()=>{})

store.subscribe((mutation,state)=>{
    mutation.type
    mutation.payload
})
store.subscribeAction((action,state)=>{
    action.type
    action.payload
})

4-9 Vuex之其他一些API和配置.mp4

https://www.draw.io/#WCBAFE1AC284BF4EFI2033 网上导图

F:\Vue教程\Vue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲\第5章服务器渲染

第5章服务器渲染

5章.mp4

node 服务器可以使用webpackserver
SSR必用的包 npm i vue-server-renderer -S 
服务端流行框架 npm i koa -S
npm i koa-router -S 
axios memory-fs
babel支持js语法高  node支持低就require
npm i ejs -S 

ejs里面
<%-%>不转义  <%=%>转义

router.onReady() SSR才弄

npm i koa-send -S koa发送静态资源

npm i nodemon -D 自动重启

npm i concurrently -D 多任务启动

npm i vue-meta -S 改html的meta

F:\Vue教程\Vue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲\第6章高级组件开发

第6章高级组件开发

6章.mp4

document.body.removeChild(el)

F:\Vue教程\Vue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲\第7章项目开发

第7章项目开发

7上.mp4

https://www.apicloud.com

签名 npm i sha1 -S

Restlet Client .crx

7下.avi

npm i koa-body -S 中间件 npm i koa-session -S

form标签 取消自动填密码等 autocomplete="off" input才有效
webpack
proxy:{
    '/api':"http://127.0.0.1:3333" 代理
}

F:\Vue教程\Vue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲\第8章部署和总结

第8章部署和总结

8-1 8-2.mp4

pm2.yml 文本标记语言

pm2 start pm2.yml --env production

npm i pm2 -g

nginx代理端口

https://portal.qiniu.com/bucket/data/index cdn静态资源

npm i qiniu -D 七牛

8-3 总结.mp4

用到的技术

SSR 服务端宣染
https://www.imooc.com/article/23555 webpack4升级指北
https://www.imooc.com/learn/935 免费todo视频
webpack-merge合并工具
vue-style-loader
npm i rimraf -d 删除dist目录
doc-loader 写文档
https://www.draw.io/#WCBAFE1AC284BF4EFI2033 网上导图
SSR必用的包 npm i vue-server-renderer -S 
服务端流行框架 npm i koa -S
npm i koa-router -S 
process.env.NODE_ENV
axios memory-fs写文件
npm i ejs -S html模板
npm i koa-send -S koa发送静态资源
npm i nodemon -D 自动重启
npm i concurrently -D 多任务启动
npm i vue-meta -S 改html的meta
https://www.apicloud.com 云api
签名 npm i sha1 -S 
Restlet Client .crx
npm i koa-body -S 中间件 npm i koa-session -S
npm i pm2 -g
nginx代理端口
https://portal.qiniu.com/bucket/data/index cdn静态资源
npm i qiniu -D 七牛

posted @ 2024-12-14 13:46 KooTeam 阅读(25) 评论(0) 收藏举报

刷新页面返回顶部

KooTeam

Knowledge makes humble,ignorant makes proud!

Vue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲

Vue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲

第1章课程介绍

1-1.mp4

第2章 Vue+Webpack的前端工程工作流搭建

2-1 项目目录升级-一个正式项目的目录结构.mp4

第3章 Vue核心知识

3 章.mp4

第4章 Vue-Router和Vuex

4-1 4-2 4-3.mp4

hash路由不被搜索引擎解析 SSR不带#mode=history

4-4 Vue-router之导航守卫.mp4

第5章服务器渲染

5章.mp4

第6章高级组件开发

6章.mp4

第7章项目开发

7上.mp4

第8章部署和总结

8-1 8-2.mp4

用到的技术

公告

KooTeam

Knowledge makes humble,ignorant makes proud!

Vue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲

Vue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲

第1章 课程介绍

1-1.mp4

第2章 Vue+Webpack的前端工程工作流搭建

2-1 项目目录升级-一个正式项目的目录结构.mp4

第3章 Vue核心知识

3 章.mp4

第4章 Vue-Router和Vuex

4-1 4-2 4-3.mp4

hash路由不被搜索引擎解析 SSR不带#mode=history

4-4 Vue-router之导航守卫.mp4

第5章 服务器渲染

5章.mp4

第6章 高级组件开发

6章.mp4

第7章 项目开发

7上.mp4

第8章 部署和总结

8-1 8-2.mp4

用到的技术

公告

第1章课程介绍

第5章服务器渲染

第6章高级组件开发

第7章项目开发

第8章部署和总结