Vue專案常用總結

songxia777發表於2024-03-14
Vue

常用外掛

模組分析外掛

安裝以後，重新執行專案的時候，會自動開啟專案分析頁面

安裝

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');

相關文章