亚洲中文字幕一二,团鬼六之黑蝎秘书,撸神福利视频导航

vue-cli3項(xiàng)目搭建配置以及性能優(yōu)化
項(xiàng)目初始化

注意：安裝前請(qǐng)確保有安裝node.js，并且node>=8.9

全局安裝vue

npm install -g @vue/cli
如果之前安裝了vue舊版本，查看vue --version

創(chuàng)建項(xiàng)目

vue create vue-cli3-init(項(xiàng)目名)
注：名稱不能采用駝峰

vue-cli3也可以采用UI面板進(jìn)行配置，相對(duì)比較方便，目前先寫命令行創(chuàng)建，后續(xù)再加上面板創(chuàng)建。

選擇配置，默認(rèn)配置還是手動(dòng)，這里我選擇手動(dòng)Manually，繼續(xù)回車會(huì)讓你選擇你想要功能。（不用用git窗口，選擇不了選項(xiàng)，可以使用上下方向來切換選項(xiàng)）

此處有兩個(gè)選擇：

default (babel, eslint) 默認(rèn)套餐，提供 babel 和 eslint 支持。
Manually select features 自己去選擇需要的功能，提供更多的特性選擇。比如如果想要支持 TypeScript，就應(yīng)該選擇這一項(xiàng)。

回車后可進(jìn)行選擇，8個(gè)功能特性，可以多選：使用方向鍵在特性選項(xiàng)之間切換，使用空格鍵選中當(dāng)前特性，使用 a 鍵切換選擇所有，使用 i 鍵翻轉(zhuǎn)選項(xiàng)。我的選擇如下，請(qǐng)根據(jù)自己需要進(jìn)行選擇。

對(duì)于每一項(xiàng)的功能，此處做個(gè)簡(jiǎn)單描述：

TypeScript 支持使用 TypeScript 書寫源碼。
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 預(yù)處理器。
Linter / Formatter 支持代碼風(fēng)格檢查和格式化。
Unit Testing 支持單元測(cè)試。
E2E Testing 支持 E2E 測(cè)試。

是否選擇history模式，根據(jù)自己需要選擇。

是否選擇預(yù)語言，根據(jù)自己需要選擇。

是否ESlint輸出，根據(jù)自己需要選擇。

是否保存時(shí)或者提交時(shí)是進(jìn)行ESlint校驗(yàn)，根據(jù)自己需要選擇。

選擇把配置文件放在外面，選擇 In dedicated config files

要不要把當(dāng)前的這一系列選項(xiàng)配置保存起來，方便下一次創(chuàng)建項(xiàng)目時(shí)復(fù)用。

項(xiàng)目初始化完成，進(jìn)入項(xiàng)目:

cd vue-cli3-init
依賴安裝完成之后啟動(dòng)項(xiàng)目：
npm run serve

修改目錄結(jié)構(gòu)
用編輯器打開后可以看到目錄結(jié)構(gòu)。相對(duì)于vue-cli2精簡(jiǎn)了很多，減少了對(duì)webpack的配置。

node_modules 文件夾項(xiàng)目依賴(對(duì)webpack進(jìn)行了封裝)

public 文件夾

1.favicon.ico 是網(wǎng)站圖標(biāo)

2.index.html 頁面入口文件

src 文件夾

main.js 入口js

assets 存放靜態(tài)文件

components 存放公用組件

App.vue 入口vue文件

.eslintrc.js 配置

.gitignore 指定文件無需提交到git上

balel.config.js 使用一些預(yù)設(shè)

package.json 項(xiàng)目描述及依賴

package-lock.json 版本管理使用的文件

由于現(xiàn)在的目錄結(jié)構(gòu)不利于后期的開發(fā)，現(xiàn)在我們?cè)黾硬糠治募?，待后續(xù)可以進(jìn)行功能擴(kuò)展。在src文件下：新建api文件夾，config文件夾,router文件夾，utils文件夾，views文件夾，store文件夾。并在其文件下建子目錄，詳細(xì)請(qǐng)參考目錄截圖：

多環(huán)境運(yùn)行

由于我們的項(xiàng)目需要在不同環(huán)境下進(jìn)行運(yùn)行(開發(fā)，生產(chǎn)，測(cè)試等)，這避免我們需要多次的去切換請(qǐng)求的地址以及相關(guān)的配置，vue-cli2是可以直接在config文件中進(jìn)行配置的，但是vue-cli3已經(jīng)簡(jiǎn)化了，官方文檔也有進(jìn)行配置的說明，實(shí)現(xiàn)具體有以下2種方法，我比較偏向第二種。

第一種實(shí)現(xiàn)方法

1.在根目錄新建2個(gè)文件，分別為.env.development，.env.production，.env.test。注意文件是只有后綴的。

.env.development 模式用于serve，開發(fā)環(huán)境，就是開始環(huán)境的時(shí)候會(huì)引用這個(gè)文件里面的配置

.env.production模式用于build，線上環(huán)境。

.env.test 測(cè)試環(huán)境

2.分別在文件內(nèi)寫上：

開發(fā)環(huán)境：

//.env.development
VUE_APP_BASE_API = '需要請(qǐng)求API'
線上環(huán)境：

//.env.production
VUE_APP_BASE_API = '需要請(qǐng)求API'
測(cè)試環(huán)境：

//.env.test
VUE_APP_BASE_API = '需要請(qǐng)求API'
當(dāng)需要用到該變量是可以用process.env.VUE_APP_BASE_API進(jìn)行取值。

3.更改package.json文件

"scripts": {
"dev": "vue-cli-service serve",
"test": "vue-cli-service serve --mode test",
"build": "vue-cli-service build",
"build:test": "vue-cli-service build --mode test",
"lint": "vue-cli-service lint"
},
第二種實(shí)現(xiàn)方式

1.在config文件新建index.js文件，根據(jù)全局的環(huán)境變量來進(jìn)行判斷，并進(jìn)行輸出。代碼如下：

// 一些全局的config配置
const modeUrlObj = {
// 生產(chǎn)環(huán)境
'production': {
baseURL: 'http://xxx:9091/pro/',
authBaseURL: ''
},
// 開發(fā)環(huán)境
'development': {
baseURL: 'http://xxxx:9091/dev/',
authBaseURL: ''
},
// 測(cè)試環(huán)境
'test': {
baseURL: 'http://xxxx:9091/test/',
authBaseURL: ''
}
}
export default modeUrlObj[process.env.NODE_ENV]
2.更改package.json文件

import config from '../config/index' // 路徑配置
config.baseURL // 對(duì)應(yīng)環(huán)境api
4.運(yùn)行命令行

npm run dev // 開發(fā)環(huán)境
npm run test // 測(cè)試環(huán)境
npm run build // 正式環(huán)境打包
npm run build:test // 測(cè)試環(huán)境打包
axios封裝

在vue項(xiàng)目中，和后臺(tái)交互獲取數(shù)據(jù)這塊，我們通常使用的是axios庫，它是基于promise的http庫，可運(yùn)行在瀏覽器端和node.js中。他有很多優(yōu)秀的特性，例如攔截請(qǐng)求和響應(yīng)、取消請(qǐng)求、轉(zhuǎn)換json、客戶端防御XSRF等。所以我們的尤大大也是果斷放棄了對(duì)其官方庫vue-resource的維護(hù)，直接推薦我們使用axios庫。如果還對(duì)axios不了解的，可以移步axios文檔。

安裝依賴

npm install axios --save; // 安裝axios
配置axios

在uitls文件下新增request.js文件，在這里我們對(duì)axios進(jìn)行初始化后，暴露給需要引用的文件，方便開發(fā)。

import axios from 'axios'
import config from '../config/index' // 路徑配置
創(chuàng)建axios實(shí)例，并進(jìn)行配置

// 創(chuàng)建axios 實(shí)例
const service = axios.create({
baseURL: config.baseURL, // api的base_url
timeout: 10000 // 請(qǐng)求超時(shí)時(shí)間
})
利用axios的請(qǐng)求攔截和響應(yīng)攔截可以對(duì)登錄和權(quán)限方面進(jìn)行控制，具體需求可以自己進(jìn)行配置。完整代碼如下：

import axios from 'axios'
import config from '../config/index' // 路徑配置

// 創(chuàng)建axios 實(shí)例
const service = axios.create({
baseURL: config.baseURL, // api的base_url
timeout: 10000 // 請(qǐng)求超時(shí)時(shí)間
})

// request 攔截器
service.interceptors.request.use(
config => {
// 這里可以自定義一些config 配置

    return config
},
error => {
    //  這里處理一些請(qǐng)求出錯(cuò)的情況

    Promise.reject(error)
}

)

// response 攔截器
service.interceptors.response.use(
response => {
const res = response.data
// 這里處理一些response 正常放回時(shí)的邏輯

    return res
},
error => {
    // 這里處理一些response 出錯(cuò)時(shí)的邏輯

    return Promise.reject(error)
}

)

export default service
api請(qǐng)求配置

在api文件下新建分類的api請(qǐng)求文件。根據(jù)具體需要分類。主要是方便團(tuán)隊(duì)開發(fā)，容易歸類?？梢詤⒖枷旅媾渲?。

import request from '@/utils/request'

export default {
// 登錄
login (data) {
return request({
url: '/login',
method: 'post',
data
})
},
// 獲取用戶信息
getUserInfo () {
return request({
url: '/userinfo',
method: 'get'
})
}
}
業(yè)務(wù)中需要進(jìn)行請(qǐng)求可以用import后，進(jìn)行傳參即可。

模塊化vuex
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。

如果對(duì)vuex還不大了解的可以自行閱讀vuex官方文檔。

安裝vuex

npm install vuex -S
新建目錄

modules文件主要用法存放分類的文件，可以進(jìn)行區(qū)分，getters文件是對(duì)state進(jìn)行處理，index.js主要進(jìn)行一些引入，初始化操作。

書寫vuex配置

index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user' // 引入各個(gè)模塊的代碼
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
modules: {
user
},
getters
})

export default store
getter.js文件

getter中的配置可根據(jù)需求進(jìn)行增加或者刪除，下面是示例。

const getters = {
requestLoading: state => state.app.requestLoading,
size: state => state.app.size,
token: state => state.user.token,
avatar: state => state.user.avatar,
name: state => state.user.name,
roles: state => state.user.roles
}
export default getters
moduels/user.js文件

該文件為與業(yè)務(wù)相關(guān)，可以跟據(jù)具體參見進(jìn)行增加和刪除命名。每個(gè)文件的基本配置和用法如下：

import { getToken, setToken } from '@/utils/auth'
import api from '@/api/user'

const user = {
state: {
token: getToken(),
},

mutations: {
SET_TOKEN: (state, token) => {
state.token = token
},
},

actions: {
// 登錄
Login ({ commit }, userInfo) {
return new Promise((resolve, reject) => {
api.login(userInfo).then(res => {
if (res.code === 200) {
setToken(res.data)
commit('SET_TOKEN', res.data)
}
resolve()
}).catch(err => {
reject(err)
})
})
}
}
}

export default user
全局樣式引用
在項(xiàng)目開發(fā)過程中，我們經(jīng)常需要全局樣式引用，例如主題色等，如果每次去寫的化會(huì)變得很麻煩。因?yàn)槲覀儜?yīng)該了sass預(yù)語言編譯，所以可以大膽的應(yīng)用其特性。例如變量，函數(shù)，混入等。但是我們需要在項(xiàng)目中進(jìn)行全局的配置才能有效果。不用在每一個(gè)頁面都進(jìn)行引入樣式，就能直接引用。

新建目錄

在assets下新建如下文件，具體的代碼自行進(jìn)行配置

common.scss 主要存放公共的樣式
mixin.scss 存放混入樣式
reset.scss 存放重置樣式。
variable.scss 存放變量

全局引入

新建vue.config.js文件，并寫上以下代碼

module.exports = {
css: {
loaderOptions: {
// pass options to sass-loader
sass: {
// @/ is an alias to src/
// so this assumes you have a file named src/variables.scss
data: @import "@/assets/css/variable.scss"; @import "@/assets/css/common.scss"; @import "@/assets/css/mixin.scss";
}
}
},
}
在app.vue中引入reset.scss文件，完成后，樣式即可進(jìn)行全局調(diào)用了。

安裝amfe-flexible

npm i amfe-flexible --save
px轉(zhuǎn)rem

方法一：

在common.scss文件中，全局引入scss函數(shù)：

/**
轉(zhuǎn)化px為rem。 $base-font-size = 設(shè)計(jì)稿尺寸/10 */ @function px2rem($ px, $base-font-size: 37.5) { @return ($ px/$base-font-size)*1rem
}
調(diào)用方式直接： width: px2rem(175);

方法二：

安裝依賴

npm i postcss-pxtorem --save-dev
package.json內(nèi)，在postcss內(nèi)添加：

"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 75, // 設(shè)計(jì)稿寬度的1/10,（JSON文件中不加注釋，此行注釋及下行注釋均刪除）
"propList":["*"] // 需要做轉(zhuǎn)化處理的屬性，如hight、width、margin等，*表示全部
}
}
},
常用util
該文件主要是對(duì)一些常用的js進(jìn)行封裝，例如時(shí)間格式化，LocalStorage操作等，相對(duì)比較常用的方法，這個(gè)文件可以進(jìn)行保存，要用到時(shí)直接復(fù)制過來用即可。下面是我封裝LocalStorage的文件，可參考以下，其他自行設(shè)置

import Cookies from 'js-cookie'

const TokenKey = 'Authorization'
/*

設(shè)置setLocalStorage
/
export function setLocalStorage (key, value) {
window.localStorage.setItem(key, window.JSON.stringify(value))
}
/
獲取getLocalStorage
/
export function getLocalStorage (key) {
return window.JSON.parse(window.localStorage.getItem(key) || '[]')
}
/
設(shè)置setSessionStorage
/
export function setSessionStorage (key, value) {
window.sessionStorage.setItem(key, window.JSON.stringify(value))
}
/
獲取getSessionStorage
/
export function getSessionStorage (key) {
return window.JSON.parse(window.sessionStorage.getItem(key) || '[]')
}
/
獲取getToken
/
export function getToken () {
return Cookies.get(TokenKey)
}
/
設(shè)置setToken
/
export function setToken (token) {
return Cookies.set(TokenKey, token)
}
/
移除removeToken
*/
export function removeToken () {
return Cookies.remove(TokenKey)
}
引入第三方UI框架(elementUI)

打開控制臺(tái)，執(zhí)行vue add element命令，為項(xiàng)目安裝element。

2.等待其安裝完畢，在設(shè)置向?qū)е信渲靡敕绞胶图虞d地區(qū)。

3.在自動(dòng)安裝完依賴后，可以看到相關(guān)的文件已經(jīng)被創(chuàng)建/更新了。

4.如果需要按需引入，則去到src目錄下自動(dòng)新建的plugins目錄，編輯element.js即可，默認(rèn)會(huì)導(dǎo)入一個(gè)Button。這么做的好處是不用把引入的ele組件寫在main.js文件下，使各模塊更加分離。

配置vue.config.js文件
基本配置

1.文件目錄配置別名
我們可以把src配置為@，如果需要就不用到根目錄開始寫了，直接用@/xxx/進(jìn)行引用。根據(jù)自己需要進(jìn)行配置，在vue.config.js文件中加入代碼

// 配置
chainWebpack: (config)=>{
// 配置別名
config.resolve.alias
.set('@', resolve('src'))
.set('assets',resolve('src/assets'))
.set('components',resolve('src/components'))
.set('router',resolve('src/router'))
.set('utils',resolve('src/utils'))
.set('static',resolve('src/static'))
.set('store',resolve('src/store'))
.set('views',resolve('src/views'))
}
2.跨域配置
在前端請(qǐng)求過程中，如果后臺(tái)沒有設(shè)置跨域請(qǐng)求的，可以在webpack進(jìn)行配置。

devServer: {
proxy: {
'/api': {
target: 'http://127.0.0.1:8080',
changeOrigin: true
}
}
}
3.其他配置

具體可以參照官網(wǎng)的配置說明，在項(xiàng)目中我用到了

assetsDir: 'assets', // 靜態(tài)文件目錄
publicPath: './', // 編譯后的地址，可以根據(jù)環(huán)境進(jìn)行設(shè)置
lintOnSave: true, // 是否開啟編譯時(shí)是否不符合eslint提示
以上的所有代碼必須寫在module.exports輸出才能生效. 詳細(xì)的配置可參考官網(wǎng) vue-cli3

項(xiàng)目框架性能優(yōu)化 (v1_mint_ui分支)
通過以上的基本配置，項(xiàng)目已經(jīng)符合我們工作需要了，但是在工作過程中會(huì)發(fā)現(xiàn)隨著項(xiàng)目的集成度越來越高，業(yè)務(wù)越來越多。出現(xiàn)了加載慢和打包文件過大的問題。導(dǎo)致我們頁面白屏?xí)r間過長(zhǎng)，用戶體驗(yàn)不友好。那么如果你感興趣的話，可以進(jìn)行以下的配置，可以大大大大大的減小體積和加載速度。在master分支是沒有進(jìn)行優(yōu)化的，如果需要看優(yōu)化代碼可以到另外一個(gè)分支。所以在頁面引入的代碼都是當(dāng)前頁面需要的執(zhí)行代碼，可以往下面幾個(gè)方法進(jìn)行處理。

js,css代碼的最小化壓縮和分割

js,css代碼公用代碼提取, 按需引入(cdn加載)

圖片文件的壓縮

gzip的壓縮

去除console.log

1.js,css代碼的最小化壓縮和分割

首先，我們先對(duì)js文件進(jìn)行配置以達(dá)到壓縮效果，先看一下沒有配置代碼情況，整個(gè)app.js 的文件是2.8M（因?yàn)槭浅跏柬?xiàng)目），但是如果頁面一多，就不只這個(gè)數(shù)了。

我們會(huì)通過chainWebpak來處理. 在優(yōu)化前, 看下相關(guān)文件的響應(yīng)代碼: 看下app.js文件的返回代碼:代碼如下：

在vue.config.js文件中加入,run以下后查看app.js情況，文件會(huì)變小（由于初始項(xiàng)目體積小，看不出多大區(qū)別）。

module.exports = {
chainWebpack: config => {
config.optimization.minimize(true);
}
}

分割代碼,相應(yīng)的文件中存入分割后的代碼。

module.exports = {

chainWebpack: config => {
    config.optimization.minimize(true);
    config.optimization.splitChunks({
      chunks: 'all'
    })
}

}

加入以上代碼后，分成了2個(gè)文件，最大的只有2.7M了，這樣可以分成多個(gè)進(jìn)行加載，可以達(dá)到最快化，但是一定要平衡文件大小的和分割出來的文件數(shù)量的平衡, 數(shù)量多了, 請(qǐng)求也會(huì)變慢的, 影響性能.可以根據(jù)項(xiàng)目的進(jìn)行設(shè)置，具體可參考官方文檔的詳細(xì)說明。

2.js,css代碼公用代碼提取, 按需引入(CDN加載)

把公用代碼提取出來,然后采用使用免費(fèi)的cdn資源進(jìn)行加載。在項(xiàng)目中我們主要是引入引入不同的模塊庫才會(huì)導(dǎo)致文件較大，那么是否可以把這些文件進(jìn)一步處理，答案是可以的，比如vue, vuex, vue-router, element-ui等公共資源庫。利用webpack我們可以使用externals參數(shù)來配置:

在vue.config.js文件:

module.exports = {
chainWebpack: config => {
// 壓縮代碼
config.optimization.minimize(true);
// 分割代碼
config.optimization.splitChunks({
chunks: 'all'
})
// 用cdn方式引入
config.externals({
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'mint-ui': 'MINT', // 需用MINT
'axios': 'axios'
})
}
}
index.html加入CDN地址,注意引入的時(shí)候要寫在body里面，否則會(huì)報(bào)錯(cuò)。

重新運(yùn)行項(xiàng)目, 看看效果，已經(jīng)大大的減小了很多，到了k級(jí)別了：

提取css代碼：
因?yàn)閖s會(huì)動(dòng)態(tài)的加載出css，所以js文件包會(huì)比較大，那么需要提取css代碼到文件. 這里我們只需要將css配置一下:

module.exports = {
css: {
extract: true
}
}

3.圖片文件的壓縮

圖片文件大于在webpack設(shè)定的值時(shí)，我們可以對(duì)其進(jìn)行壓縮在進(jìn)行引入，安利給大家一個(gè)壓縮圖片的網(wǎng)站https://tinypng.com/，它可以批量的壓縮圖片又不會(huì)失真，壓縮比相對(duì)較大?？梢詫?duì)圖片進(jìn)行有效壓縮。

4.gzip的壓縮

如果后臺(tái)有對(duì)前端的代碼進(jìn)行g(shù)zip壓縮的話，那么就不需要進(jìn)行壓縮了，后臺(tái)自己配置就可以。如果后臺(tái)不具備這種情況那么我們可以利用compression-webpack-plugin插件可以幫助我們進(jìn)行g(shù)zip壓縮：

安裝依賴：

npm install --save-dev compression-webpack-plugin
然后引入相關(guān)代碼:

const CompressionWebpackPlugin = require('compression-webpack-plugin')

const compress = new CompressionWebpackPlugin(
{
filename: info => {
return ${info.path}.gz${info.query}
},
algorithm: 'gzip',
threshold: 10240,
test: new RegExp(
'\.(' +
['js'].join('|') +
')$'
),
minRatio: 0.8,
deleteOriginalAssets: false
}
)
module.exports = {
devServer: {

before(app, server) {
app.get(/.*.(js)$/, (req, res, next) => {
req.url = req.url + '.gz';
res.set('Content-Encoding', 'gzip');
next();
})
}
}
configureWebpack: {
plugins: [compress]
}
重新run一遍，出現(xiàn)了意向不到的結(jié)果了。又原來的2.8M轉(zhuǎn)化為250+kb了，縮小了11倍以上。重大突破

6.去除console.log

正常情況下我們會(huì)在開發(fā)環(huán)境進(jìn)行console調(diào)試，但是如果不刪除，過多會(huì)出現(xiàn)內(nèi)存泄漏的情況，那么我們可以在正式環(huán)境的時(shí)候就把它給干掉，實(shí)現(xiàn)方法如下：

方法一：

npm i --save-dev babel-plugin-transform-remove-console
在babel.config.js中配置

const plugins = [];
if(['production', 'prod'].includes(process.env.NODE_ENV)) {
plugins.push("transform-remove-console")
}

module.exports = {
presets: [["@vue/app",{"useBuiltIns": "entry"}]],
plugins: plugins
};
參考鏈接：http://www.itdecent.cn/p/adc33ac846f9

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

vue-cli3項(xiàng)目搭建配置

vue-cli3項(xiàng)目搭建配置

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

vue-cli3項(xiàng)目搭建配置

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av