珠峰架构师成长计划

快速原型开发 #

可以快速识别.vue文件封装组件插件等功能

sudo npm install @vue/cli -g
sudo npm install -g @vue/cli-service-global
vue serve Home.vue

关闭eslit提示

module.exports = {
    devServer: {
      overlay: {
        warnings: false,
        errors: false
      },
    }
}

实现递归菜单组件 #

<Menu>
    <MenuItem v-for="(item,key) in menuList" :key="key">
        {{item.title}}
    </MenuItem>
    <SubMenu>
        <template #title="title"> 标题1</template>
        <MenuItem>标题1-1</MenuItem>
        <MenuItem>标题1-2</MenuItem>
            <SubMenu>
            <template #title="title">标题1-1-1</template>
            <MenuItem>标题1-1-1-1</MenuItem>
            <MenuItem>标题1-1-1-1</MenuItem>
        </SubMenu>
    </SubMenu>
</Menu>

根据数据递归渲染

menuList:[
    {
        title:'标题1',
        children:[
            {title:'标题1-1'},
            {title:'标题1-2'}
        ]
    },
    {
        title:'标题2',
        children:[
            {title:'标题2-1'},
            {title:'标题2-2'}
        ]
    },
    {
        title:'标题3',
        children:[
            {title:'标题3-1'},
            {title:'标题3-2'}
        ]
    }
]

ReSub组件实现

<Menu>
    <template v-for="(item,key) in menuList" >
        <MenuItem v-if="!item.children" :key="key">
            {{item.title}}
        </MenuItem>
        <ReSub v-else :key="key" :data="item"></ReSub>
    </template>
</Menu>

// ReSub组件主要作用是递归
<template>
    <SubMenu class="sub">
        <template #title="title">{{data.title}}</template>
        <template v-for="d in data.children">
            <MenuItem v-if="!d.children" :key="d.title">{{d.title}}</MenuItem>
            <ReSub v-else :data="d" :key="d.title" class="sub"></ReSub>   
        </template>
    </SubMenu>
</template>

<script>
import SubMenu from './SubMenu';
import MenuItem from './MenuItem'
export default {
    props:['data'], 
    name:'ReSub',
    components:{
        SubMenu,
        MenuItem
    }
}
</script>

使用vue-cli3.0创建vue项目 #

vue create <project-name>

可以通过vue ui创建项目／管理项目依赖

vue ui

配置vue-config.js #

let path = require('path')
module.exports = {
    publicPath:process.env.NODE_ENV === 'production'? '/vue-project':'/',
    outputDir:'myassets', // 输出路径
    assetsDir:'static', // 生成静态目录的文件夹
    runtimeCompiler: true, // 是否可以使用template模板
    parallel:require('os').cpus().length > 1, //多余1核cpu时 启动并行压缩
    productionSourceMap:false, //生产环境下 不使用soruceMap

    // https://github.com/neutrinojs/webpack-chain
    chainWebpack:config=>{
        // 控制webpack内部配置
        config.resolve.alias.set('component',path.resolve(__dirname,'src/components'));
    },
    // https://github.com/survivejs/webpack-merge
    configureWebpack:{
        // 新增插件等
        plugins:[]
    },
    devServer:{ // 配置代理
        proxy:{
            '/api':{
                target:'http://a.zf.cn:3000',
                changeOrigin:true
            }
        }
    },
    // 第三方插件配置
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [
                // 插入全局样式
                path.resolve(__dirname,'src/assets/common.less'), 
            ],
        }
    }
}

defer & async ／ preload & prefetch #

defer 和 async 在网络读取的过程中都是异步解析
defer是有顺序依赖的，async只要脚本加载完后就会执行
preload 可以对当前页面所需的脚本、样式等资源进行预加载
prefetch 加载的资源一般不是用于当前页面的，是未来很可能用到的这样一些资源

基于vue-cli编写组件 #

小球的滚动组件 #

更改小球的颜色

<template>
  <div :id="`ball${_uid}`" class="ball" :style="{background:color}">
  </div>
</template>
<script>
export default {
  name:'ScrollBall',
  props:{
      color:{
          type:String,
          default:'red'
      }
  }
}
</script>
<style lang="less">
  .ball{
      width:80px;
      height: 80px;
      border-radius: 50%;
      text-align:center;
      line-height:80px;
  }
</style>

球的滚动requestAnimationFrame

<ScrollBall color="red" :target="500" v-model="pos1"></ScrollBall> 
<ScrollBall color="blue" :target="300" v-model="pos2"></ScrollBall>

<script>
export default {
    props:{
        value:{
            type:Number,
            default:0
        },
        target:{
            type:Number,
            required:true
        }
    },
    mounted(){
        let ele = document.getElementById(`ball${this._uid}`);
        let timer;
        let fn = ()=>{
            let left = this.value + 2;
            if(left > this.target){
                return cancelAnimationFrame(timer);
            }
            ele.style.transform = `translate(${left}px)`;
            this.$emit('input',left);
            timer = requestAnimationFrame(fn)
        }
        timer = requestAnimationFrame(fn)
    }
}
</script>

增加球的内容

<ScrollBall color="red" :target="500" v-model="pos">球1</ScrollBall> 
<div :id="`ball${_uid}`" class="ball" :style="{background:color}">
      <slot></slot>
</div>

让小球停止运动增加小球的停止方法,通过父亲用$refs获取子组件方法

<ScrollBall color="red" :target="500" v-model="pos1" ref="ball">球1</ScrollBall>
<button @click="stop">stop</button>
stop(){
  this.$refs.ball.stopMove()
}
// 组件中停止小球运动
methods:{
  stopMove(){
      cancelAnimationFrame(this.timer);
  },
  move(){
      let ele = document.getElementById(`ball${this._uid}`);
      let left = this.value + 2;
      if(left > this.target){
          return this.stopMove();
      }
      ele.style.transform = `translate(${left}px)`;
      this.$emit('input',left);
      this.timer = requestAnimationFrame(this.move)
  }
},
mounted(){
  this.timer = requestAnimationFrame(this.move)
}

通知小球运动结束

if(left > this.target){
  this.$emit('end');
  return this.stopMove();
}