标签：总结常用 Vue js vue 组件 import true click

常用插件

模块分析插件

安装以后，重新运行项目的时候，会自动打开项目分析页面

安装

npm i -D webpack-bundle-analyzer

vue.config.js 配置

const { defineConfig } = require("@vue/cli-service");
const path = require("path");
// 打包分析插件 -----
const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  css: {
    loaderOptions: {
      sass: {
        // @是src的别名
        additionalData: `
                        @import "@/style/_var.scss";
                        @import "@/style/general.scss";
                     `,
      },
    },
  },
  devServer: {
    // disableHostCheck: true,
    proxy: {
      "/dev/api/": {
        target: "http://demo.365chanlun.com/",
        changeOrigin: true,
        pathRewrite: {
          "^/dev/api": "",
        },
      },
      "/pro/api/": {
        target: "https://365chanlun.com/",
        changeOrigin: true,
        pathRewrite: {
          "^/pro/api": "",
        },
      },
    },
  },
  publicPath: process.env.NODE_ENV === "production" ? "/dist/" : "/",
  // 打包分析插件 -----
  configureWebpack: (config) => {
    config.plugins.push(new BundleAnalyzerPlugin());
  },
});

vue-slim-better-scroll 移动端滚动插件

实例文档：https://github.com/wannaxiao/vue-slim-better-scroll/blob/master/demo/default/App.vue

vue-slim-better-scroll 是开箱即用的/渐进式的 vue 移动端滚动组件/插件，基于 better-scroll

1.下载安装

npm i -D vue-slim-better-scroll

2. 引入

方式一：插件形式全局引入

 // 入口文件 main.js 中
import Scroll from 'vue-slim-better-scroll'
Vue.use(Scroll)

方式二：组件形式引入

import Scroll from 'vue-slim-better-scroll'
export default {  
   components: {
     Scroll
   },
 }

3. 使用

1. Template中的Scroll配置

<Scroll
     ref="scroll"
    :listen-scroll="true"
    :pull-up-config="pullUpConfig"   //配置项
    :style="{height: scrollHeight}"   //配置项
    class="container"
    @pullingDown="refresh"  //refresh下拉刷新回调
    @pullingUp="loadMore"  //loadMore上拉加载更多回调
>
  //滚动区域的内容//
  </Scroll>

3. data()里面的配置

//滚动区域的配置项
 pullUpConfig: {
   threshold: 0, // 提前触发 pullingUp 的距离  默认100
   txt: {more: '上拉加载', noMore: '— 没有更多文章 —'},
 },
 scrollHeight: undefined

4. 监控数据的设置

 watch: {
    comments: {
      handler(val) {
        if (!val.length) return;
        if (this.$refs.scroll) {
          this.$refs.scroll.update();
        }
      },
      immediate: true,
      deep: true,
    }
  },

5. refresh回调函数和loadMore回调函数

//下拉刷新数据
refresh() {
  //获取品读列表信息
  this.getListen({tags: this.tag, head: true});
},
//上拉加载更多数据
loadMore() {
  //获取更多
  this.getMoreListen({tags: this.tag});
}

设置全局共享变量 `_var.scss`

创建一个 _var.scss 文件，利用:export {} 导出需要的变量

$mainColor:#324157;
$mainText:#bfcbd9;

:export {
  mainColor: mainColor;
  mainText:$mainText;
}

vue.config.js 中配置 css.loaderOptions

const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  css: {
    loaderOptions: {
      sass: {
        // @是src的别名
        additionalData: `
                        @import "@/style/_var.scss";
                        @import "@/style/general.scss";
                     `,
      },
    },
  }
});

`nextTick()`

作用：在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的 DOM

activated和deactivated生命周期

<keep-alive>包裹的动态组件会被缓存，它是一个抽象组件，它自身不会渲染一个dom元素，也不会出现在父组件链中。
当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
如<keep-alive>包裹两个组件：组件A和组件B。当第一次切换到组件A时，组件A的created和activated生命周期函数都会被执行，这时通过点击事件改变组件A的文字的颜色，在切换到组件B，这时组件A的deactivated的生命周期函数会被触发；在切换回组件A，组件A的activated生命周期函数会被触发，但是它的created生命周期函数不会被触发了，而且A组件的文字颜色也是我们之前设置过的。

@click.native和@click.stop和@click.self

1. vue @click.native 原生点击事件

给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用 .native 修饰符）
等同于在自组件中：子组件内部处理click事件然后向外发送click事件：$emit("click".fn)

2. vue @click.stop 阻止单击事件冒泡

 <a v-on:click.stop="doThis"></a>

3. vue @click.prevent 提交事件不再重载页面

<form v-on:submit.prevent="onSubmit"></form>

在js数据中如何引用图片

因为webpack会将图片当做模块来引用，所以在js中需要使用require将图片引用进来，不能直接以字符串的形式。
只有在template中的静态文件地址和style中的静态文件地址需要加~, 在script里的, 别名定义成什么就写什么

let imageUrl = require("./img/marker_green.png");

webpack中配置别名alias

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'img': resolve('static/img'),
    }
  },

CSS loader 会把把非根路径的url解释为相对路径，加~前缀才会解释成模块路径，
在使用时加上~,告诉加载器它是一个模块，而不是相对路径

<img src="~img/navbar/demo.png" alt="" />

在js中使用相对路径时，不需要加~

<script>
 import 'assets/css/style.css'
</script>

Vue项目打包部署到apache服务器

参考文档：

https://www.cnblogs.com/ykCoder/p/11022572.html

引入阿里图标库

1. 下载图标库，解压项目

2. `main.js` 全局引入

// 引入阿里图标库
import "@/assets/iconfonts/iconfont.css";

3. 使用图标

 <div class="iconfont icon-zhanghugaikuang"></div>

相同component 不同参数

比如：发表文章和编辑文章都是使用同一的个组件 article

{ path: "/create",component: article, name:'发表文章'},
{ path: "/edit/:id",component: article, name:'编辑文章'},

默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子，此时可以在 router-view上加上一个唯一的key，来保证路由切换时都会重新渲染触发钩子了

<router-view :key="key"></router-view>

computed: {
    key() {
        return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
    }
 }

还有另外一种方式，就是通过meta设置参数来区分

{ path: "/create",component: article, name:'发表文章'},
{ path: "/edit/:id",component: article, name:'编辑文章',meta:{isEdit:true}},

判断是否是编辑页面

computed: {
  isEdit() {
    return this.$route.meta.isEdit // 根据meta判断
  }
}，
created() {
  if (this.isEdit) { 
    this.fetchData();
  }
},

路由懒加载

const Foo = resolve => require(['./Foo.vue'], resolve)
//或者
const Foo = () => import('./Foo');

标签：总结,常用,Vue,js,vue,组件,import,true,click
From： https://www.cnblogs.com/songxia/p/18072859

Vue项目常用总结

常用插件

模块分析插件

安装

vue.config.js 配置

vue-slim-better-scroll 移动端滚动插件

1.下载安装

2. 引入

方式一：插件形式全局引入

方式二：组件形式引入

3. 使用

1. Template中的Scroll配置

3. data()里面的配置

4. 监控数据的设置

5. refresh回调函数和loadMore回调函数

设置全局共享变量 `_var.scss`

`nextTick()`

activated和deactivated生命周期

@click.native和@click.stop和@click.self

1. vue @click.native 原生点击事件

2. vue @click.stop 阻止单击事件冒泡

3. vue @click.prevent 提交事件不再重载页面

在js数据中如何引用图片

webpack中配置别名alias

Vue项目打包部署到apache服务器

引入阿里图标库

1. 下载图标库，解压项目

2. `main.js` 全局引入

3. 使用图标

相同component 不同参数

路由懒加载

相关文章

赞助商

阅读排行

Vue项目常用总结

常用插件

模块分析插件

安装

vue.config.js 配置

vue-slim-better-scroll 移动端滚动插件

1.下载安装

2. 引入

方式一：插件形式 全局 引入

方式二：组件形式引入

3. 使用

1. Template中的Scroll配置

3. data()里面的配置

4. 监控数据的设置

5. refresh回调函数和loadMore回调函数

设置全局共享变量 _var.scss

nextTick()

activated和deactivated生命周期

@click.native和@click.stop和@click.self

1. vue @click.native 原生点击事件

2. vue @click.stop 阻止单击事件冒泡

3. vue @click.prevent 提交事件不再重载页面

在js数据中如何引用图片

webpack中配置别名alias

Vue项目打包部署到apache服务器

引入阿里图标库

1. 下载图标库，解压项目

2. main.js 全局引入

3. 使用图标

相同component 不同参数

路由懒加载

相关文章

赞助商

阅读排行

方式一：插件形式全局引入

设置全局共享变量 `_var.scss`

`nextTick()`

2. `main.js` 全局引入