vue商城后臺(tái)管理項(xiàng)目筆記

項(xiàng)目初始化.png

防止css重名覆蓋.png

重定向.png

表單驗(yàn)證和重置表單.png

表單預(yù)驗(yàn)證.png

配置axios.png

保存token.png

掛載路由導(dǎo)航守衛(wèi).png

實(shí)現(xiàn)退出功能.png

去除項(xiàng)目中console.log

安裝一個(gè)插件(babel-plugin-transform-remove-console)在項(xiàng)目build階段移除所有的console信息
打開項(xiàng)目控制臺(tái)被碗,點(diǎn)擊依賴->開發(fā)依賴瞎颗,輸入babel-plugin-transform-remove-console,安裝
打開babel.config.js评抚,編輯代碼如下:


去除console.log.png

修改webpack的默認(rèn)配置

默認(rèn)情況下,vue-cli 3.0生成的項(xiàng)目,隱藏了webpack配置項(xiàng),如果我們需要配置webpack
需要通過(guò)vue.config.js來(lái)配置泛释。
在項(xiàng)目根目錄中創(chuàng)建vue.config.js文件,

module.exports = {
    chainWebpack:config=>{
        //發(fā)布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默認(rèn)的打包入口温算,調(diào)用clear則是刪除默認(rèn)的打包入口
            //add添加新的打包入口
            config.entry('app').clear().add('./src/main-prod.js')
        })
        //開發(fā)模式
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

chainWebpack可以通過(guò)鏈?zhǔn)骄幊痰男问搅#薷膚ebpack配置
configureWebpack可以通過(guò)操作對(duì)象的形式,修改webpack配置

加載外部CDN

默認(rèn)情況下注竿,依賴項(xiàng)的所有第三方包都會(huì)被打包到j(luò)s/chunk-vendors.******.js文件中茄茁,導(dǎo)致該js文件過(guò)大
那么我們可以通過(guò)externals排除這些包魂贬,使它們不被打包到j(luò)s/chunk-vendors.******.js文件中

module.exports = {
    chainWebpack:config=>{
        //發(fā)布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默認(rèn)的打包入口,調(diào)用clear則是刪除默認(rèn)的打包入口
            //add添加新的打包入口
            config.entry('app').clear().add('./src/main-prod.js')

            //使用externals設(shè)置排除項(xiàng)
            config.set('externals',{
                vue:'Vue',
                'vue-router':'VueRouter',
                axios:'axios',
                lodash:'_',
                echarts:'echarts',
                nprogress:'NProgress',
                'vue-quill-editor':'VueQuillEditor'
            })
        })
        //開發(fā)模式
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

設(shè)置好排除之后裙顽,為了使我們可以使用vue付燥,axios等內(nèi)容,我們需要加載外部CDN的形式解決引入依賴項(xiàng)愈犹。
打開開發(fā)入口文件main-prod.js,刪除掉默認(rèn)的引入代碼

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// import './plugins/element.js'
//導(dǎo)入字體圖標(biāo)
import './assets/fonts/iconfont.css'
//導(dǎo)入全局樣式
import './assets/css/global.css'
//導(dǎo)入第三方組件vue-table-with-tree-grid
import TreeTable from 'vue-table-with-tree-grid'
//導(dǎo)入進(jìn)度條插件
import NProgress from 'nprogress'
//導(dǎo)入進(jìn)度條樣式
// import 'nprogress/nprogress.css'
// //導(dǎo)入axios
import axios from 'axios'
// //導(dǎo)入vue-quill-editor(富文本編輯器)
import VueQuillEditor from 'vue-quill-editor'
// //導(dǎo)入vue-quill-editor的樣式
// import 'quill/dist/quill.core.css'
// import 'quill/dist/quill.snow.css'
// import 'quill/dist/quill.bubble.css'

axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
//請(qǐng)求在到達(dá)服務(wù)器之前键科,先會(huì)調(diào)用use中的這個(gè)回調(diào)函數(shù)來(lái)添加請(qǐng)求頭信息
axios.interceptors.request.use(config => {
  //當(dāng)進(jìn)入request攔截器,表示發(fā)送了請(qǐng)求漩怎,我們就開啟進(jìn)度條
  NProgress.start()
  //為請(qǐng)求頭對(duì)象勋颖,添加token驗(yàn)證的Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem("token")
  //必須返回config
  return config
})
//在response攔截器中,隱藏進(jìn)度條
axios.interceptors.response.use(config =>{
  //當(dāng)進(jìn)入response攔截器勋锤,表示請(qǐng)求已經(jīng)結(jié)束饭玲,我們就結(jié)束進(jìn)度條
  NProgress.done()
  return config
})
Vue.prototype.$http = axios

Vue.config.productionTip = false

//全局注冊(cè)組件
Vue.component('tree-table', TreeTable)
//全局注冊(cè)富文本組件
Vue.use(VueQuillEditor)

//創(chuàng)建過(guò)濾器將秒數(shù)過(guò)濾為年月日,時(shí)分秒
Vue.filter('dateFormat',function(originVal){
  const dt = new Date(originVal)
  const y = dt.getFullYear()
  const m = (dt.getMonth()+1+'').padStart(2,'0')
  const d = (dt.getDate()+'').padStart(2,'0')

  const hh = (dt.getHours()+'').padStart(2,'0')
  const mm = (dt.getMinutes()+'').padStart(2,'0')
  const ss = (dt.getSeconds()+'').padStart(2,'0')

  return `${y}-${m}-$a052zjm ${hh}:${mm}:${ss}`
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

然后打開public/index.html添加外部cdn引入代碼

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>電商后臺(tái)管理系統(tǒng)</title>

    <!-- nprogress 的樣式表文件 -->
    <link rel="stylesheet"  />
    <!-- 富文本編輯器 的樣式表文件 -->
    <link rel="stylesheet"  />
    <link rel="stylesheet"  />
    <link rel="stylesheet"  />
    <!-- element-ui 的樣式表文件 -->
    <link rel="stylesheet"  />

    <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
    <!-- 富文本編輯器的 js 文件 -->
    <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

    <!-- element-ui 的 js 文件 -->
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>

  </head>
  <body>
    <noscript>
      <strong>We're sorry but vue_shop doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

定制首頁(yè)內(nèi)容

開發(fā)環(huán)境的首頁(yè)和發(fā)布環(huán)境的首頁(yè)展示內(nèi)容的形式有所不同
如開發(fā)環(huán)境中使用的是import加載第三方包叁执,而發(fā)布環(huán)境則是使用CDN茄厘,那么首頁(yè)也需根據(jù)環(huán)境不同來(lái)進(jìn)行不同的實(shí)現(xiàn)
我們可以通過(guò)插件的方式來(lái)定制首頁(yè)內(nèi)容,打開vue.config.js谈宛,編寫代碼如下:

module.exports = {
    chainWebpack:config=>{
        config.when(process.env.NODE_ENV === 'production',config=>{
            ......
            
            //使用插件
            config.plugin('html').tap(args=>{
                //添加參數(shù)isProd
                args[0].isProd = true
                return args
            })
        })

        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')

            //使用插件
            config.plugin('html').tap(args=>{
                //添加參數(shù)isProd
                args[0].isProd = false
                return args
            })
        })
    }
}

然后在public/index.html中使用插件判斷是否為發(fā)布環(huán)境并定制首頁(yè)內(nèi)容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>電商后臺(tái)管理系統(tǒng)</title>

    <% if(htmlWebpackPlugin.options.isProd){ %>
    <!-- nprogress 的樣式表文件 -->
    <link rel="stylesheet"  />
    ........
    <!-- element-ui 的 js 文件 -->
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
    <% } %>
  </head>

路由懶加載

當(dāng)路由被訪問(wèn)時(shí)才加載對(duì)應(yīng)的路由文件次哈,就是路由懶加載。
路由懶加載實(shí)現(xiàn)步驟:
1.安裝 @babel/plugin-syntax-dynamic-import
打開vue控制臺(tái)入挣,點(diǎn)擊依賴->安裝依賴->開發(fā)依賴->搜索@babel/plugin-syntax-dynamic-import
點(diǎn)擊安裝。

2.在babel.config.js中聲明該插件硝拧,打開babel.config.js

//項(xiàng)目發(fā)布階段需要用到的babel插件
const productPlugins = []

//判斷是開發(fā)還是發(fā)布階段
if(process.env.NODE_ENV === 'production'){
  //發(fā)布階段
  productPlugins.push("transform-remove-console")
}

module.exports = {
  "presets": [
    "@vue/app"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    ...productPlugins,
    //配置路由懶加載插件
    "@babel/plugin-syntax-dynamic-import"
  ]
}

3.將路由更改為按需加載的形式径筏,打開router.js,更改引入組件代碼如下:

import Vue from 'vue'
import Router from 'vue-router'
const Login = () => import(/* webpackChunkName:"login_home_welcome" */ './components/Login.vue')
// import Login from './components/Login.vue'
const Home = () => import(/* webpackChunkName:"login_home_welcome" */ './components/Home.vue')
// import Home from './components/Home.vue'
const Welcome = () => import(/* webpackChunkName:"login_home_welcome" */ './components/Welcome.vue')
// import Welcome from './components/Welcome.vue'
const Users = () => import(/* webpackChunkName:"user" */ './components/user/Users.vue')
// import Users from './components/user/Users.vue'
const Rights = () => import(/* webpackChunkName:"power" */ './components/power/Rights.vue')
// import Rights from './components/power/Rights.vue'
const Roles = () => import(/* webpackChunkName:"power" */ './components/power/Roles.vue')
// import Roles from './components/power/Roles.vue'
const Cate = () => import(/* webpackChunkName:"goods" */ './components/goods/Cate.vue')
// import Cate from './components/goods/Cate.vue'
const Params = () => import(/* webpackChunkName:"goods" */ './components/goods/Params.vue')
// import Params from './components/goods/Params.vue'
const GoodList = () => import(/* webpackChunkName:"goods" */ './components/goods/List.vue')
// import GoodList from './components/goods/List.vue'
const GoodAdd = () => import(/* webpackChunkName:"goods" */ './components/goods/Add.vue')
// import GoodAdd from './components/goods/Add.vue'
const Order = () => import(/* webpackChunkName:"order" */ './components/order/Order.vue')
// import Order from './components/order/Order.vue'
const Report = () => import(/* webpackChunkName:"report" */ './components/report/Report.vue')
// import Report from './components/report/Report.vue'

項(xiàng)目?jī)?yōu)化上線https://www.cnblogs.com/royal6/p/12988252.html

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末障陶,一起剝皮案震驚了整個(gè)濱河市滋恬,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌抱究,老刑警劉巖恢氯,帶你破解...
    沈念sama閱讀 216,470評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異鼓寺,居然都是意外死亡勋拟,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門妈候,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)敢靡,“玉大人,你說(shuō)我怎么就攤上這事苦银⌒ル剩” “怎么了赶站?”我有些...
    開封第一講書人閱讀 162,577評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)纺念。 經(jīng)常有香客問(wèn)我贝椿,道長(zhǎng),這世上最難降的妖魔是什么陷谱? 我笑而不...
    開封第一講書人閱讀 58,176評(píng)論 1 292
  • 正文 為了忘掉前任烙博,我火速辦了婚禮,結(jié)果婚禮上叭首,老公的妹妹穿的比我還像新娘习勤。我一直安慰自己,他們只是感情好焙格,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,189評(píng)論 6 388
  • 文/花漫 我一把揭開白布图毕。 她就那樣靜靜地躺著,像睡著了一般眷唉。 火紅的嫁衣襯著肌膚如雪予颤。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,155評(píng)論 1 299
  • 那天冬阳,我揣著相機(jī)與錄音蛤虐,去河邊找鬼。 笑死肝陪,一個(gè)胖子當(dāng)著我的面吹牛驳庭,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播氯窍,決...
    沈念sama閱讀 40,041評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼饲常,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了狼讨?” 一聲冷哼從身側(cè)響起贝淤,我...
    開封第一講書人閱讀 38,903評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎政供,沒(méi)想到半個(gè)月后播聪,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,319評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡布隔,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,539評(píng)論 2 332
  • 正文 我和宋清朗相戀三年离陶,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片衅檀。...
    茶點(diǎn)故事閱讀 39,703評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡枕磁,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出术吝,到底是詐尸還是另有隱情计济,我是刑警寧澤茸苇,帶...
    沈念sama閱讀 35,417評(píng)論 5 343
  • 正文 年R本政府宣布,位于F島的核電站沦寂,受9級(jí)特大地震影響学密,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜传藏,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,013評(píng)論 3 325
  • 文/蒙蒙 一腻暮、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧毯侦,春花似錦哭靖、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至卦碾,卻和暖如春铺坞,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背洲胖。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工济榨, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人绿映。 一個(gè)月前我還...
    沈念sama閱讀 47,711評(píng)論 2 368
  • 正文 我出身青樓擒滑,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親叉弦。 傳聞我的和親對(duì)象是個(gè)殘疾皇子丐一,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,601評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容