2020-03-28 金卡智能

*1. 腳手架 vue-cli現在用的什么版本，2版本了解多少，2 3有什么區別

絕對路徑與相對路徑

./ 當前路徑
…/父路徑
/ 絕對路徑
某文件里引用其他路徑下的資源：
判斷該文件所在文件夾與其他資源路徑間的關系。

---

什么？錯過了Vue CLI 2！你還要錯過Vue CLI3？
區別寫得很詳細
全局安裝一個橋接工具

Vue CLI 是一個基于 Vue.js 進行快速開發的完整系統，提供：
通過 @vue/cli 搭建交互式的項目腳手架。
通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發。
一個運行時依賴 (@vue/cli-service)，該依賴：
可升級；
基于 webpack 構建，并帶有合理的默認配置；
可以通過項目內的配置文件進行配置；
可以通過插件進行擴展。
一個豐富的官方插件集合，集成了前端生態中最好的工具。
一套完全圖形化的創建和管理 Vue.js 項目的用戶界面。

商品管理用的vue-cli2bulid config vue-cli init webpack name （init是vue3版本前的指令）webpack-dev-server...--inline：啟動inline模式來自動刷新頁面 Vue-cli3.0于2018.8.11日正式發布 public src vue create name （create是vue3版本才能用的指令） vue-config.js修改webpack的配置 vue-cli-service serve | npm run serve

vue-cli3.0默認項目目錄與2.0的相比，更精簡:
1.移除的配置文件根目錄下的，build和config等目錄，
2.移除了static文件夾，新增了public文件夾，并且index.html移動到public中。
3.在src文件夾中新增了views文件夾，用于分類 試圖組件 和 公共組件 。
4.大部分配置 都集成到 vue.config.js這里,在項目根目錄下

1 安裝
2 目錄 配置文件
3 運行
4 cli插件 @vue/cli-plugin-

*2.怎么存儲靜態資源

用絕對路徑 使用相對路徑引入的靜態資源文件，會被webpack處理解析為模塊依賴

且放在public文件夾下 public文件夾下的文件并不會被Webpack處理：它們會直接被復制到最終的打包目錄

vue-cli2 版本

1） static – 不打包，直接上傳（引入的第三方的資源文件（已經經過處理）我們不再需要處理，直接上傳）
2） src/assets – 會被打包（壓縮體積，代碼格式化，上傳至服務器 => 將項目中template需要的樣式文件、js文件等都可以放置在assets中，打包減少體積。）
config/index.js

module.exports = {// ...build: {assetsPublicPath: '/',assetsSubDirectory: 'static'} }

注意：如果把圖片放在assets與static中，html頁面可以使用；但在動態綁定中，assets路徑的圖片會加載失敗，因為webpack使用的是commenJS規范，必須使用require才可以，具體代碼如下：

<div id="hook"><h3>演示鉤子的組件</h3><p>直接使用路徑</p><img src="../../assets/11.png" alt="圖片加載失敗" title="assets中的圖片"><img src="../../../static/11.png" alt="圖片加載失敗" title="static中的圖片"><br><p>動態綁定路徑</p><img :src="assetsURL" alt="圖片加載失敗" title="assets中的圖片"><img :src="staticURL" alt="圖片加載失敗" title="static中的圖片"></div> data (){return {assetsURL: require('../../assets/11.png'),staticURL: '../../../static/11.png'}}

vue-cli3 版本

1）public不打包（個人理解相當于2版本static）
2） src/assets

資源打包

• webpack處理靜態資源：在所有的*.vue文件中你所有的templates 和CSS 都被vue-html-loader 和css-loader 查詢資源的URLs解析. 比如說, 在 img src=”./logo.png” 和background: url(./logo.png) 中./logo.png是一個相對資源路徑，并且會被Webpack視為一個模塊依賴來解析。
• 因為./logo.png并非一個Javascript，當將它作為模塊依賴對待時，我們需要用url-loader和file-loader去處理它。

webpack 中的解析規則

webpack中文文檔

• 相對URLs,
  例如 ./assets/logo.png 將會被解釋為一個模塊依賴.
  它們將會被替換為基于你Webpack輸出配置自動生成的 URL
• 無前綴URLs,
  例如. assets/logo.png 將會被像相對URLs一樣處理并將被轉化為 ./assets/logo.png. 我在實際操作中，不加./會報錯，會當做模塊去查找，如果起了別名@/xx/xx.png正常，給assets直接取別名也無法加載圖片。而大多在項目中加載圖片，都是用import的方法，并不直接src=字符串
• 帶~前綴的URLs 將會被看做模塊請求， 類似于請求(‘some-module/image.png’).
  如果你想改變Webpack的模塊解決配置你需要使用這個前綴 。例如,你需要處理資源的別名，你需要使用 ~assets/logo.png去確保這個別名時受到重視的.
• 特權相對URLs（絕對路徑，/開頭）,
  例如 /assets/logo.png 是完全不作處理的.

最后

假如說，你把index.html以及static文件夾直接放到容器的根目錄，即訪問路徑為：http://xxxx:9090/index.html這樣形式，那么直接使用‘/’即可，不用使用相對路徑。

但是如果說你的前端項目是在某個項目文件夾下或者合并到后臺項目中去發布，即訪問路徑可能為：http://xxx:9090/projectname/index.html，那么就一定要使用’./’,否則資源信息會找不到。

另外：放在static下的圖片，在編碼開發的時候直接使用相對路徑即可，和assetsPublicPath配置為相對路徑或絕對路徑沒有任何關系。這點不要混淆。

*3.多入口

vue-cli3多環境多入口，分別打包

http://localhost:8081/ui.html http://localhost:8081/index.html

會有2個main.js，2個router.js
都是 雙份的
需要配置vue.config.js

let objectProject = {index: {entry: 'src/views/index/main.js', // page 的入口template: 'src/public/index.html', // 模板來源filename: 'index.html', // 在 dist/index.html 的輸出// 當使用 title 選項時，template 中的 title 標簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>title: 'Index Page',// 在這個頁面中包含的塊，默認情況下會包含,提取出來的通用 chunk 和 vendor chunk。chunks: ['chunk-vendors', 'chunk-common', 'index']},ui: {entry: 'src/views/ui/main.js',template: 'src/public/ui.html',filename: 'ui.html',title: 'Index Page',chunks: ['chunk-vendors', 'chunk-common', 'ui']} } let page = {} let projectname = process.argv[3] // 獲取執行哪個文件 if (process.env.NODE_ENV == 'development') {page = objectProject } else {page[projectname] = objectProject[projectname] } module.exports = {publicPath: './', // 官方要求修改路徑在這里做更改，默認是根目錄下，可以自行配置outputDir: 'dist'+projectname, //標識是打包哪個文件//默認情況下，生成的靜態資源在它們的文件名中包含了 hash 以便更好的控制緩存。如果你無法使用 Vue CLI 生成的 index HTML，你可以通過將這個選項設為 false 來關閉文件名哈希。filenameHashing: true,pages: page,productionSourceMap: false,// 生產環境 sourceMapdevServer: {open: true, // 項目構建成功之后，自動彈出頁面host: 'localhost', // 主機名，也可以127.0.0.0 || 做真機測試時候0.0.0.0port: 8081, // 端口號，默認8080https: false, // 協議hotOnly: false // 沒啥效果，熱模塊，webpack已經做好了} }

他說入口是public?

4 .BFC（5個要點）

根元素或其它包含它的元素

浮動、絕對定位（absoluted或者fixed）

內聯塊display: inline-block （一共三個）

表格單元格display: table-cell

display：flex

overflow非visible
什么是BFC？看這一篇就夠了

5.call和apply的區別（反性）

如果使用apply或call方法，那么this指向他們的第一個參數，apply的第二個參數是一個參數數組，call的第二個及其以后的參數都是數組里面的元素。會立即調用。而bind返回函數，不會立即調用。

var numbers = [5, 458 , 120 , -215 ] Math.max.apply(null, numbers)

看MDN Math.max()的參數是一組數值（把數寫進去，不能直接傳數組）
有幾個例子比較深了沒看下去

6.Localstorage和sessionstorage的區別

均只能存儲字符串類型的對象

生命周期不同：

• localStorage生命周期是永久，這意味著除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，否則這些信息將永遠存在。
• sessionStorage生命周期為當前窗口或標簽頁，一旦窗口或標簽頁被永久關閉了，那么所有通過sessionStorage存儲的數據也就被清空了。

共享：

• 不同瀏覽器（× ×）無法共享localStorage或sessionStorage中的信息。
• 相同瀏覽器的不同頁面間可以共享相同的 localStorage（頁面屬于相同域名和端口）但是不同頁面或標簽頁間無法共享sessionStorage的信息。(√ ×)
• 如果一個標簽頁包含多個iframe標簽且他們屬于同源頁面，那么他們之間是可以共享sessionStorage的。（√ √）

7.數組遍歷的區別：forEach map filter 返回值（find、some、every）

函數操作返回值

forEach	遍歷數組，length次，無法break	無返回值，return控制跳出當前循環	執行
map	同上	新數組	執行
filter	–	判斷為true的元素 組成的新數組	篩選
includes	判斷數組是否含有某值，不用return，不用回調	true或false	篩選
find		輸出的是一旦 判斷為true 則跳出循環輸出符合條件的那個數組元素	篩選
findIndex		輸出的是一旦 判斷為true 則跳出循環輸出符合條件的那個數組元素下標	篩選
some		判斷為true則馬上跳出循環并return成true	判斷
every			判斷
reduce		利用前遍歷操作的結果到下一次遍歷使用，重復疊加使用下去	sum或者新數組

MDN內置對象

8.Reduce 作用 返回值

*9.ES6

阮一峰ES6
羅列出平時用到的哪些是es6語法

• 變量聲明 var let const
• 模板字符串``

**10.var與（let、const）的區別 要完整

掛載在window上| 后者不能this.

變量提升 undefined還是報錯

塊作用域

重復聲明：同一作用域下let和const不能聲明同名變量，而var可以（重復賦值）

let

• 模仿私有成員：在處理構造函數的時候，可以通過let聲明而不是閉包來創建一個或多個私有成員。
• 暫存死區 ：let和const都適用
• switch語句

let x = 1; switch(x) {case 0:let foo;break;case 1:let foo; // SyntaxError for redeclaration.break; }

下面是對的寫法：

let x = 1;switch(x) {case 0: {let foo;break;} case 1: {let foo;break;} }

由于詞法作用域，表達式(foo + 55)內的標識符foo被認為是if塊的foo變量，而不是值為33的塊外面的變量foo。

function test(){var foo = 33;{let foo = (foo + 55); // ReferenceError} } test();

在以下情況下，這種現象可能會使您感到困惑。 let n of n.a已經在for循環塊的私有范圍內。因此，標識符n.a被解析為位于指令本身(“let n”)中的“ n”對象的屬性“ a”。
在沒有執行到它的初始化語句之前，它仍舊存在于暫存死區中。

function go(n) {// n here is defined!console.log(n); // Object {a: [1,2,3]}for (let n of n.a) { // ReferenceErrorconsole.log(n);} }go({a: [1, 2, 3]}); var a = 100;if(1){a = 10;//在當前塊作用域中存在a使用let/const聲明的情況下，給a賦值10時，只會在當前作用域找變量a，// 而這時，還未到聲明時候，所以控制臺Error:a is not definedlet a = 1; }

const常量

• 一旦聲明必須賦值,不能使用null占位。

• 聲明后不能再修改

• 如果聲明的是復合類型數據，可以修改其屬性

const a = 100; const list = []; list[0] = 10; console.log(list);　　// [10]const obj = {a:100}; obj.name = 'apple'; obj.a = 10000; console.log(obj);　　// {a:10000,name:'apple'}

*11.模板字符串 ``

vue {{}} 叫插值表達式、 mustache模板語言 – 相關 模板引擎
模板字符串 ``

• 可以當作普通字符串使用
• 定義多行字符串
• 字符串中嵌入變量

*12.模板字符串中怎么表示變量

// 字符串中嵌入變量 var name = "Bob", time = "today"; `Hello ${name}, how are you ${time}?` // Hello Bob, how are you today?

• 大括號內可以放入任意的JavaScript表達式，可以進行運算，以及引入對象屬性
• 模板字符串之中還可以調用函數
• 如果模板字符串中的變量沒有聲明，則會報錯
• String.raw方法用來充當模板字符串的處理函數，返回一個除表達式和變量會被替換，其它都保持原樣的字符串。

String.raw`Hi\n${2+3}!`; // "Hi\n5!" String.raw`Hi\u000A!`; // "Hi\u000A!"

13.箭頭函數里的this 指向

ES6箭頭函數里this的指向就是上下文里對象this指向,偶爾沒有上下文對象,this就指向window

14.Object. keys

// simple array var arr = ['a', 'b', 'c']; console.log(Object.keys(arr)); // console: ['0', '1', '2']// array like object var obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(Object.keys(obj)); // console: ['0', '1', '2']// array like object with random key ordering var anObj = { 100: 'a', 2: 'b', 7: 'c' }; console.log(Object.keys(anObj)); // console: ['2', '7', '100']

15.V-if v-show 區別 相當于css中的

*16.V-for的key有什么用

關鍵詞：
虛擬DOM的Diff算法 vue實現了一套虛擬DOM，使我們可以不直接操作DOM元素，只操作數據便可以重新渲染頁面 ``高效的更新虛擬DOM`
Vue2.0 v-for 中 :key 到底有什么用？

**17.16：06頁面切換回來的時候，查詢過的表不用再查。求 vue中如何保存組件的狀態，進行緩存，切換的時候#? 輸出的

**18.Vue中怎么跨域

配置代理方式
關鍵詞:配置代理

1. 后臺更改header

header('Access-Control-Allow-Origin:*');//允許所有來源訪問 header('Access-Control-Allow-Method:POST,GET');//允許訪問的方式

2. 使用JQuery提供的jsonp

ethods: { getData () { var self = this $.ajax({ url: 'http://f.apiplus.cn/bj11x5.json', type: 'GET', dataType: 'JSONP', success: function (res) { self.data = res.data.slice(0, 3) self.opencode = res.data[0].opencode.split(',') } }) } }

3. 使用http-proxy-middleware 代理解決（項目使用vue-cli腳手架搭建）

proxyTable: { '/api': { //使用"/api"來代替"http://f.apiplus.c" target: 'http://f.apiplus.cn', //源地址 changeOrigin: true, //改變源 pathRewrite: { '^/api': 'http://f.apiplus.cn' //路徑重寫 } } }

4. axios跨域，依然是配置了代理

配置BaseUrl
在main.js中，配置下我們訪問的Url前綴：

axios.defaults.baseURL = '/api' // 開發本地代理 axios.defaults.headers.post['Contenst-Type'] = 'application/json;' axios.defaults.headers.common['token'] = store.state.token

配置代理
修改config文件夾下的index.js文件，在proxyTable中加上如下代碼：

proxyTable: {'/api': { //代理地址target: 'http://xxx.xxx.xxx.xxx:8088', //需要代理的地址， 實際生產環境需要訪問的地址changeOrigin: true, //是否跨域secure: false,pathRewrite: {'^/api': '/' //本身的接口地址沒有 '/api' 這種通用前綴，所以要rewrite，如果本身有則去掉}}},

修改請求Url

this.$axios.get("/test/test123") .then(res=>{console.log(res)}).catch(err=>{console.log(err)})

給url加上了前綴/api，我們訪問"/test/test123"就當于訪問了：localhost:8080/api/test/test123

**19.header誰處理的？17：54 后端

**20.發請求到響應的過程

一個完整的http請求響應過程

21.vuex用過嗎

**22.Vuex怎么獲取數據

獲取vuex中的數據一般寫在computed(計算）中<script>import { mapState, mapMutations } from 'vuex';export default {// computed: mapState({// 第一種接受數據方法// // hhh: state => state.num,// 第二種接受數據方法// // zxd : 'num'// 第三種接受數據方法// countPlusLocalState(state){// return state.num + 100// }// }),//第四種接收數據的方法computed:mapState(['num']),//第五種接收數據的方法// computed:{// ...mapState(['num']),// he(){// return 'hhehehe'// }// },name: "user",methods:{...mapMutations(['add','del'])}, </script>

**23.Mutation 和action區別: 異步

1、流程順序

“相應視圖—>修改State”拆分成兩部分，視圖觸發Action，Action再觸發Mutation。

2、角色定位

基于流程順序，二者扮演不同的角色。

Mutation：專注于修改State，理論上是修改State的唯一途徑。

Action：業務代碼、異步請求。

3、限制

角色不同，二者有不同的限制。

Mutation：必須同步執行。

Action：可以異步，但不能直接操作State。

24.Getter 的作用 – 可以認為是store的計算屬性

[Vuex系列] - Vuex中的getter的用法

*25.vue里怎么阻止冒泡

• . stop：阻止冒泡（通俗講就是阻止事件向上級DOM元素傳遞）
• . prevent：阻止默認事件的發生
• . capture：捕獲冒泡，即有冒泡發生時，有該修飾符的dom元素會先執行，如果有多個，從外到內依次執行，然后再按自 然順序執行觸發的事件
• . self：將事件綁定到自身，只有自身才能觸發，通常用于避免冒泡事件的影響
• . once：設置事件只能觸發一次，比如按鈕的點擊等

**26.21.55 axios異步請求，如果同時發多個請求，讓他們全部返回以后再進行處理，是怎么操作的

this.$axios.all([this.$axios.get(url).then(res => res.data),this.$axios.get(url).then(res => res.data)]).then(this.$axios.spread((val1,val2) => {// val 是數組中每個接口返回的值 res.dataconsole.log('兩個接口全部加載完成',val1,val2) ; // 1,2})).catch(err => {console.log(err) ;}) =

*27.Axios get請求post請求參數

get：params

params:{id:this.kemuid}, headers:{token:Cookies.get('token'), platform: 'web'}

post：對象

{'queslistid':this.kemuid},{headers: {'token':Cookies.get('token'),'platform': 'web'} }

*28.axios如何實現一個請求的攔截 24.48

**29.Axios回調函數作用. Then 和catch 什么時候執行catch

Promise對象——then()和catch()方法

30.Baseurl

*31.Timeout

axios超時timeout攔截

32.Vue以外其他框架

33.框架除了elementUI

*34.ElemuentUI解釋柵格布局實現原理 26.10

Element UI Layout源碼解析

**35.vue子組件之間直接怎么通信 25.27

bus數據通信
Vue 兄弟組件之間的通信
https://www.cnblogs.com/fundebug/p/10884896.html

**36.表單組件綁定的model值

**37.前端控制用戶對頁面的訪問權限

前端權限控制

**38.Echarts如何把分割線去掉

yAxis : [{type : 'value',name:'電量(kWh)',axisLine:{show:false},axisTick:{show:false},splitLine:{show:false}}]splitLine對應2，axisTick對應1.

**39.路由兩類：hash和history的區別

前端路由的兩種模式：hash模式和 history模式

40.只需要1個div

<style>div{height: 100px;width: 100px;border-radius: 100px;position: absolute;top: 40%;left: 40%;border: solid 10px purple;box-shadow: 0px 0px 0px 10px red,0px 0px 0px 10px black inset;background: gray;}div::after{content:' ';background-color: yellow; border-radius: 100px;display: block;z-index: -1;position: relative; left: -30px;top: -30px;width: 160px;height: 160px;}div::before{content:' ';background-color: green; border-radius: 100px;display: block;z-index: -2;position: absolute; left: -40px;top: -40px; width: 180px;height: 180px;}</style><div></div>

總結

以上是生活随笔為你收集整理的前端试题(一)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。