# vue组态

**Repository Path**: kinjaze/vue-configuration

## Basic Information

- **Project Name**: vue组态
- **Description**: vue组态
实现组件拖拽移动，缩放的测试案例
运用到vuex，组件封装思想，elementui

- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2020-12-10
- **Last Updated**: 2022-05-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

vue2 项目
=========  vue   cmd命令所包含知识点：
#
清除缓存：npm cache clean --force 
当npm install无效，需要进行npm cache clean --force命令操作，
如果这样操作不成功的话，去C盘清空一个文件夹：
C/用户/administrator/appdata/Roaming/npm-cache  直接将路径下该文件夹右键删除
再重新npm install

# 路由配置的两种方式
1 location.hash="url"    可以通过hash来改变href，但页面不发生刷新
2 history.pushState({},'','url')  也可以通过html的history改变路由且不刷新页面
  replaceState()  go() back() forward()

安装vue-router: npm install vue-router --save   添加--save是因为项目运行时也需要依赖路由

# document.titile="首页"    document.title可以改变当前页的网址上的文字描述

#
学会使用StackOverflow和GitHub提问

#
https://segmentfault.com/a/1190000023737670
在vue3项目中使用scss:
npm install sass-loader --save-dev
npm install node-sass --save-dev

#
全局安装vue3脚手架：
npm i -g @vue/cli

vue3  通过vite初始化项目： 学习vue3.0，先从搭建环境开始 https://segmentfault.com/a/1190000023737670
yarn/npm create vite-app vue3project
一步直接创建项目。

vue add  vue-next   让vue支持3.0

#
在vscode给vue文件创建一个模板页

==============报错问题记录及解决过程==============
# 1  vue create项目时：
ERROR  Error loading saved preferences: ~/.vuerc may be corrupted or have syntax errors. Please fix/delete it and re-run vue-cli in manual mode.

# 2 npm run dev启动项目时：
Uncaught SyntaxError: The requested module '/@modules/vue.js' does not provide..

# 3 项目启动成功后报错：
Failed to resolve component: router-link

# 4
Failed to reload /src/App.vue. This could be due to syntax errors or importing non-existent modules. (see errors above)

# 5
Uncaught (in promise) TypeError: Cannot read property 'default' of undefined



===============模块化开发==================
# 1 为什么前端要做模块化开发
避免多人开发时变量重名等问题

# 2 模块化开发的概念
早期的模块化开发的实现，是通过匿名函数，使得多人开发时变量重名不会影响整体项目。同时将需要全局使用的变量或者函数通过return方式暴露出去--导出。这样就可以在其他位置直接使用--导入。

# 3 常见的模块化规范有：CommonJS, AMD, CMD, ES6的Modules

模块化开发的关键就是导出和导入的操作。

=================webpack的作用/安装和使用/配置==============
webpack是用来模块化开发的工具。除了支持模块化开发，还可以进行打包，压缩，合并等功能。

1.1webpack安装和使用


==============vue脚手架 vue cli===================
# 1 脚手架工具的作用：
帮助完成项目的代码目录结构，项目结构和部署，热加载，代码单元测试等功能。

vue cli俗称vue项目脚手架，可以快速搭建vue开发环境以及对应的webpack配置。所以使用vue cli需要先安装node(因为webpack的使用需要先安装node，然后才能使用npm---npm为node自带的)

 1. 安装node：
	直接在官网下载安装：http://nodejs.cn/download/

 2. 检测安装的node版本：
	node环境要求版本  >=  8.9

 3. 什么是NPM？node package manager
	npm是一个nodejs包管理和分发工具，已经成为非官方的发布node模块的标准

国内直接使用npm的官方镜像非常慢，所以推荐使用淘宝npm镜像。
`npm install -g cnpm --registry=https://registry.npm.taobao.org`

`一般org网址都是非营利性的。com结尾的网址是营利性的`

安装vue cli3版本，既可以使用3版本，也可以使用2版本。所以直接安装3版本cli就好了。

```javascript
npm install -g @vue/cli   安装vue cli3
cli3版本下创建vue项目：
vue create projectname

如果按照3版本后想要使用2.x旧版本。可以通过命令直接拉取旧版本
npm install -g @vue/cli-init
cli2版本下创建vue项目：
vue init webpack projectname
```

========runtime compiler / runtion only的区别================




============vue所包含知识点：
# 1  input/button具有特别的监听事件
input有个特有的动态监听事件，用来监听表单数据value的变化。v-on:input/@input  
当input表单内数据value发生变化时会触发:input监听事件

button也有特有的监听事件

# 2 浏览器的event对象
cli(event) {
  //@click="cli" 当调用方法不传参不加括号时，会自动调用浏览器产生的event对象
  console.log(event);
},
cli0(val,event) {
  //@click="cli0(123,$event)" 当需要调用浏览器的event对象又需要传参时。event+$符号
  console.log(val);
  console.log(event);
},

# 3  v-model实现数据双向绑定的原理
v-model实现数据双向绑定的原理：  v-model实际上使得vue做了两步操作：
1.v-bind  model--->view
2,input的特有监听事件@input     view--->model

<input type="text" v-model="message">
<input type="text" v-bind:value='message' @input="message = $event.target.value">


# 4   data() { return {} }
为什么vue在设计的时候data是一个函数，而不是直接一个对象？
因为对象return的是同一片内存空间。这样会导致组件在复用时，所有复用组件使用同一片内存地址。导致数据紊乱。
data必须是一个函数。每调用一个组件实例，就会调用一个data函数。而函数return的是一片新的内存地址。这样使得所有复用的组件之间互不影响。

============组件化开发：====================

# 5  父子组件之间传值
++ 4.1 父组件向子组件中传值：
props:['变量1','变量2','变量3'];//最基础的写法，数组类型，不推荐
props:{//对象类型，推荐。可以对传过来的值进行类型审核和简单验证，同时也方便阅读和简单维护
    propA:Number,//基础的类型检查
    propB:[String,Number],//多个可能的类型
    propC:{//必填的字符串
        type: String,
        required:true
    },
    propD:{//带默认值的数字类型
        type:Number,
        default:100
    },
    propE:{//带默认值的对象
        type:Object,
        default:function() {//Object or Array的默认值是一个函数
            return { msg:'hi' }
        }
    },
    propF:{//自定义验证函数
        validator:function(value) {
            //这个值必须匹配下列字符串中的一个
            return ['','',''].indexOf(value) !== -1;//返回值true or false 
            //arr.indexOf(item) 判断数组arr中是否包含元素item。如果不包含则返回-1
        }
    }
}

++ 4.2 子组件向父组件传值：
在子组件中使用this.$emit('func',value)
在父组件调用子组件时:
<son @func="sonhappen"/>
methods:{
    sonhappen(value) {
        //注意，父组件中此处接收的值都是string类型。
        console.log(value)
    }
}

# 6  父子组件之间的访问
++父组件直接访问子组件：
    this.$children：   数组类型  一般不使用$children来拿子组件数据。而是使用$refs
        可以访问父组件的所有子组件对象，包括子组件的子组件；可以访问子组件的所有数据。
    this.$refs:  对象类型  好像行不通啊？？
        <son ref="name" />
        this.$refs.name可以访问到son子组件的所有数据。name会作为子组件对象的key值。

++子组件访问父组件：  
    this.$parent：可以在子组件中访问到父组件对象。一般开发中不使用。会影响组件的独立性。
    this.$root：可以在子组件中访问根组件即vue实例对象

# 7   v-bind
v-bind不支持驼峰写法
v-bind:cInfo="info"   这样写会出现值传递失败的情况  需要改成v-bind:c-info="info"

# 8  计算属性
计算属性存在缓存。在多次调用时，由于存在缓存，只会执行一次。
与methods的区别：methods调用几次执行几次

# 9 插槽 slot 
插槽的作用：为了让组件具有可扩展性。

9.1基本插槽的使用：
    在自定义的组件中使用<slot></slot>。可以在插槽内填入默认内容。
    在引用组件时，可以在组件内直接填入内容。就可以替换子组件内插槽的默认内容。

9.2具名插槽的使用：
    一个子组件内可能存在多个插槽，当引用子组件时，可能只希望替换其中某一个插槽的内容。这时候就可以使用具名插槽。即给每个slot一个特有的name属性值。

    在子组件中：
        <slot name="left"></slot>
        <slot name="center"></slot>
        <slot name="right"></slot>
    在父组件中引用子组件时：
        <son><div slot="center">我要把son组件内的center插槽内容替换掉</div></son>

9.3作用域插槽：
   ---有个需求：子组件中包含一个数组数据。需要在不同的位置进行展示。有的地方水平展示，有点地方纵列展示，有的位置直接显示一个数组。希望父组件告知子组件具体如何展示。

   ---以上需求就可以使用作用域插槽。展示数据由子组件提供。但展示方式由父组件决定。
   ---所以需要先在父组件中拿到子组件的数据：
        1,在子组件中将子组件的数据绑定到abc：  [abc可以随意更改成你喜欢的名字]
        在son组件中：
         <div>
             <slot :abc="sondata">
                 子组件默认展示
             </slot>
         </div>
        2，在父组件中引用子组件son时，使用<template slot-scope="slot"></template>拿到子组件数据：  slot.abc就是从子组件获取到的数据
        <son>
            <template slot-scope="slot">
                <span v-for="item in slot.abc"></span>
            </template>
        </son>


# 10 this.$router this.$route
this.$router 指的时newVue的实例对象   this.$router.push/this.$router.replace
this.$route  指的是当前活跃状态下的路由对象
{ path:'/user/:abc',component:user }    this.$route.params.abc

# 11 所有的组件都继承自vue类的原型
所以通过Vue.prototype.自定义的方法和变量，整个vue项目中的所有组件都可以使用变量或方法

# 12 全局导航守卫
https://blog.csdn.net/qq_36545813/article/details/109510815

# 13 router-view是VueRouter的组件。

# 13 keep-alive是vue内置的组件，
可以使被包含的组件保留状态，或避免重新渲染；
被包裹在keep-alive里面的组件，所有路径匹配到的视图组件都会被缓存。

keep-alive有两个非常重要的属性，开发者可以自由定义哪些组件需要被缓存，哪些组件需要被重复创建和销毁【一般存在每次进入路由都需要重新更新的情况】
--inclue属性：只有相匹配的组件才会被缓存--字符串或正则
--exclue属性：任何相匹配的组件都不会被缓存--字符串或正则  
比如app.vue下有a b c 3个组件，且全部都被keep-alive包裹，但我需要每次切换到组件C时都重新创建。
可以这样操作：   c是组件的name值。如果需要排除多个组件，使用逗号分隔就好，需要注意的是不能多添加空格，否则会出错
<keep-alive exclude="c"><router-view/></keep-alive>

<!-- vue组态实现矩形在画布内移动： -->
<template>
    <div
    id="test"
    @mousemove="get"
    :style="{'left':fastartLeft+'px','top':fastartTop+'px'}">
        <h1>测试vue组态--实现移动和拖拽</h1>
        <p>鼠标坐标：</p>
        <p>{{left}}</p>
        <p>{{top}}</p>
        <p>移动元素的坐标</p>
        <p>{{positionx}}</p>
        <p>{{positiony}}</p>
        <div 
        id="son"
        @mousedown="move" 
        :style="{'left':positionx+'px','top':positiony+'px'}">
            <p>元素可移动</p>
        </div>
    </div>
</template>
<script>
export default {
  name: 'test',//在画布内移动矩形   https://blog.csdn.net/weixin_39090097/article/details/82385986?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-8.compare&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-8.compare
  data () {
      return {
          left:0,//鼠标坐标
          top:0,
          fastartTop:100,//父盒子初始位置
          fastartLeft:300,
          positionx:0,//移动元素初始位置
          positiony:0
      }
  },
  methods: {
      get(e) {
        this.left = e.clientX;
        this.top = e.clientY;
      },
      move(e) {
          let odiv = e.target;//获取目标元素
          let x = e.clientX - odiv.offsetLeft;//鼠标相对点击元素的位置=鼠标位置-元素相对外层元素的位置
          let y = e.clientY - odiv.offsetTop;
          console.log(odiv.offsetLeft,odiv.offsetTop);
          document.onmousemove = (ev) => {//当画布被点击并且鼠标按下后在画布上发生移动时，
              let left = ev.clientX - x;//获取拖拽元素的位置
              let top = ev.clientY - y;
            //   this.positionx = left;
            //   this.positiony = top;
              //将拖拽元素放到当前位置
              if(left <= 0) {
                  left = 0;
              }
              else if(left >= document.documentElement.clientWidth - odiv.offsetWidth) {
                  left = document.documentElement.clientWidth - odiv.offsetWidth;
              }
              if(top <= 0) {
                  top = 0;
              }
              else if(top >= document.documentElement.clientHeight - odiv.offsetHeight) {
                  top = document.documentElement.clientHeight - odiv.offsetHeight;
              }
              this.positionx = left;
              this.positiony = top;
          }
          document.onmouseup = (en) => {
              document.onmousemove = null;
              document.onmouseup = null;
          }
      }
  }
}
</script>
<style scoped>
#test {
    background: yellowgreen;
    width: 1600px;
    height: 500px;
    color: white;
    position: relative;
    /* top: 100px; */
    /* left: 300px; */
}
#son {
    width: 100px;
    height: 100px;
    background:rgb(248, 160, 160);
    position: absolute;
    /* top: 0; */
    /* left: 0; */
}
</style>

<!-- vue组态实现矩形在画布内拖拽：由8个点来控制矩形的放大缩小 -->


# 使用vuex
npm i vuex -S
npm i es6-promise -S

# 使用码云gitee    https://blog.csdn.net/qq_36545813/article/details/105673756
在码云新建仓库并第一次将本地代码提交
在控制台：
git comfig --global user.name '677'
git config --global user.email '1592713356@qq.com'
创建本地git仓库：
mkdir storename
cd storename
git init 
touch READEME.md    //注意：如果报错touch:无法将'touch'项识别为cmdlet.....   安装touch :npm install touch-cli -g 安装后再执行touch READEME.md
git add READEME.md
git commit -m 'first commit'
git remote add origin https://gitee.com/......
git push -u origin master