mes项目 组态开发项目reademe文档 待整理

vue2 项目
========= vue cmd命令所包含知识点：

当npm install无效，需要进行npm cache clean --force命令操作，
如果这样操作不成功的话，去C盘清空一个文件夹：
C/用户/administrator/appdata/Roaming/npm-cache  直接将路径下该文件夹右键删除
再重新npm install

#删除node_modules
npm cache clean --force 强制清楚缓存
npm install rimraf -g
rimraf node_modules
重装：npm install

#canvas库---ocanvas
npm install ocanvas --save
import oCanvas from 'ocanvas'
var oCanvas = require('ocanvas')

路由配置的两种方式

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.title="首页"    document.title可以改变当前页的网址上的文字描述

学会使用StackOverflow和GitHub提问

在vue3项目中使用scss:

npm install node-sass --save-dev

全局安装vue3脚手架：

npm i -g @vue/cli

vue3 通过vite初始化项目： 学习vue3.0，先从搭建环境开始

yarn/npm create vite-app vue3project
一步直接创建项目。

vue add  vue-next   让vue支持3.0

=模块化开发====

1 为什么前端要做模块化开发

避免多人开发时变量重名等问题

2 模块化开发的概念

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

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

===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就好了。

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的区别========
运行+编译器:可以直接使用template模板.
仅运行时.无法解析template模板,需要通过render函数提前编译

============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);
  con``sole.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可以访问父组件的所$