前端框架VUE- 常规操作

前端框架VUE- 常规操作

 

创建项目

npm create vite@latest
npm create vite@latest my-vue-app -- --template vue

npm init vue@latest
npm init vue@2

vue init webpack-simple VueQualityVideo
vue create VueQualityVideo

 

 

1.  VUE-Windows系统下搭建vue环境 

https://www.cnblogs.com/1285026182YUAN/p/10540602.html

 

 2. 清除npm 缓存

npm cache clean --force

 

安装插件

npm install --registry=https://registry.npm.taobao.org

 

 

 3. 快速清理 vue 项目中的 node_modules 包

1.安装npm包–rimraf

npm install rimraf -g
 

2.在cmd指令下，进入所需删除的node_modules文件夹的位置，再输入指令

rimraf node_modules

 

 

4. 安装插件

npm install 插件@版本             安装但不写入package.json
npm install 插件@版本 –-save       安装并写入package.json的”dependencies”中  
npm install 插件@版本 -–save-dev  安装并写入package.json的”devDependencies”中， 默认

 

5. 卸载插件

npm uninstall xxx      删除xxx模块
npm uninstall -g xxx   删除全局模块xxx
npm cache clean 清除缓存

 

6. 取消事件冒泡

在事件中加入  event.cancelBubble = true;//取消事件冒泡

例：

    //审核驳回
    handleClick_back(row) {
      event.cancelBubble = true;//取消事件冒泡
      
      this.$prompt("请输入驳回的原由", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(({ value }) => {});
    },

 @click.stop 阻止事件冒泡

@click.prevent 阻止事件的默认行为，

 

vue中事件修饰符详解(stop, prevent, self, once, capture, passive)

 

.stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件
.prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交
.self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号
.capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式
.once 是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行
.passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成。这个 .passive 修饰符尤其能够提升移动端的性能。

.passive 和 .prevent 不能一起使用:

• .prevent 将会被忽略

.self 和 .stop 区别:

• self只响应当前元素自身触发的事件，不会响应经过冒泡触发的事件，并不会阻止冒泡继续向外部触发。
• stop是从自身开始不向外部发射冒泡信号

 

 

7. vue由2.x 升级到 3.x

npm install -g @vue/cli

npm install -g @vue/cli-init

 需保证 node.js 的版本大于8.9

 

vue由3.x 降级到 2.x 

npm install -g vue-cli@2.9.6

 

 

8.  Vue传输当前事件，使用 $event 

                  <a-checkbox :value="itemf.Id" @click.stop="" class="ccbItem" @change="toggle_model">
                  </a-checkbox>

                  <a-checkbox :value="itemf.Id" @click.stop="" class="ccbItem" @change="toggle_model($event, itemf)">
                  </a-checkbox>

　　　　　　　　　　toggle_model(e, itemf) {}

 

 

9. 设置页面内容不可选中

前景，当给div增加click事件点击后，会选中页面上一些其他的文字，使用体验不好

在vue的 index.html 中 ，设置全局样式

    * {
      -webkit-touch-callout: none;
      /*系统默认菜单被禁用*/
      -webkit-user-select: none;
      /*webkit浏览器*/
      -khtml-user-select: none;
      /*早期浏览器*/
      -moz-user-select: none;
      /*火狐*/
      -ms-user-select: none;
      /*IE10*/
      user-select: none;
    }

 

 

 

10.  版本号查看

在 package.json 文件中，例如：  "vue-loader": "15.0.0",

1. 固定版本号：yarn add vue-loader@15.0.0

2. 固定大版本号与次版本号：yarn add vue-loader@~15.0.0

3. 固定大版本号：yarn add vue-loader@^15.0.0