原创 前端性能優化的幾種方式
前端性能優化的方式： 1.封裝組件 把所有需要複用的功能或網頁模板封裝成組件，在需要的時候調用它。 2.圖片 壓縮圖片的質量，或者使用打包工具來壓縮圖片的質量，當圖片過小時（小於12k）可以把它轉成base64（代碼圖片，轉成base64
2020-07-04 05:32:56
原创 vuecli3全局引入jquery
1.下載jquery cnpm i jquery 2.在根目錄下新建vue.config.js並如下配置 vuecli3中修改webpack配置 const webpack = require("webpack"); module.
2020-07-02 06:57:41
原创 路由匹配404頁面
爲了更好的用戶體驗，需要在用戶訪問某個路由的時候，如果匹配不上就跳轉到另外一個頁面。也就是通常所見的404頁面。 方式一： 在路由的匹配規則最後加入*，必須放在最後 const routes = [ {path:'/',redire
2020-07-02 06:57:41
原创 keep-alive保存組件狀態
Vue.js的keep-alive用法 一、問題提出 在我們用Vue.js做移動端開發的時候，經常會遇到這樣的應用場景： 首先，讓用戶看到新聞列表；然後點擊新聞標題，切換到新聞詳情的組件，以展示新聞詳情。 很多應用場景都於
2020-07-02 06:57:41
原创 使用render屬性渲染組件
在methods同級路徑調用render屬性的createElements方法，返回結果直接替換el指定的容器 var vm = new Vue({ el:'#app', data:{},
2020-06-16 10:36:27
原创 webpack的基本概念
Webpack的概念 網頁引入的靜態資源多了以後有什麼問題？ 1.網頁加載速度慢，因爲我們要發起很多的二次請求 2.要處理複雜的包之前的依賴關係 如何解決上述兩個問題？ 1.合併、壓縮、精靈圖、圖片的Base64掩碼 2.使用webp
2020-06-16 10:36:27
原创 前端bug筆記
1.使用mint-ui的輪播圖插件導致界面文字抖動模糊的問題 解決方法：給img標籤的上一層div加上這個樣式： transform: translateZ(0); <mt-swipe :auto="3000"> <mt-s
2020-06-16 10:36:27
原创 導入外部圖片和字體
原因：默認情況下webpack無法處理css文件中的圖片url地址和字體樣式，需要配置第三方loader 導入外部圖片資源配置 1.安裝url-loader和file-loader cnpm i url-loader file-loade
2020-06-16 10:36:27
原创 webpack中如何使用vue開發
1.安裝vue cnpm i vue -S 2.在main.js中導入vue.js 方式一： import Vue from 'vue/dist/vue.js' 方式二：import Vue from 'vue' //主要用法，使用.
2020-06-16 10:36:27
原创 Vue路由簡介
什麼是路由 1.後端路由：對於普通的網站，所有的超鏈接都是url地址，所有的url地址都對應服務器上對應的資源 2.前端路由：對於單頁面應用程序，主要通過url中的hash(#號)來實現不同頁面之間的切換 hash的特點：HTTP請求中不
2020-06-16 10:36:27
原创 vue項目抽離路由模塊
抽離路由模塊 1.在src目錄下新建router.js文件 2.把main.js中的所有導入路由模塊剪切進router.js //導入Account.vue Goodslist.vue組件 import account from '.
2020-06-16 10:36:27
原创 普通文件讀取及下載方法
普通讀取文件方法 const fs = require('fs') const path = require('path') function getFileByPath(fpath,succCb,errCb){ fs.rea
2020-06-16 10:36:27
原创 導入處理css、less、scss的第三方loader
原因：webpack只能打包處理JS類型的文件，無法處理其他非JS類型的文件； 如果要處理其他類型文件，需要手動安裝一些 第三方loader 加載器； 配置處理css樣式表的第三方loader 1.如果要處理css文件，需要安裝 cnpm
2020-06-16 10:36:27
原创 vue-cli 4.0安裝及項目搭建
安裝 1.卸載舊版本vue-cli npm uninstall -g vue-cli 如果卸載有問題，檢查C:\Users\用戶\.npmrc文件，刪除以下代碼 cache=C:\Program Files\nodejs\node_c
2020-06-16 10:36:27
原创 利用jquery封裝全局函數
方式一： (function($){ $.extend({ cookie: function() { var cookie = { //參數分別是cookie的名稱，cookie的值，cookie的有效時間
2020-06-16 10:36:27