⑴ 什麼編輯器寫Vue比較好
寫 vue.js 應該用什麼編輯器/IDE 才是最好的呢？
個人嘗試過 IDEA ，是我接觸到的編輯器 / IDE 中效果最好的
VSCode 的話代碼高亮有很嚴重的缺陷，自動補全也不好用
Atom / Sublime Text 的話沒有自動補全…
那各位 vue.js 開發者是用什麼編輯器呢？
裝插件啊。
用著 jb 家全套的人表示日常無腦推 jb
VSCode 的智能補全需要配合 typings 。
拿 IDE 和編輯器比的都是流氓。
atom 下似乎沒有啥好的插件，除了高亮幾個常用的插件之外，也沒找到好用的格式化插件 :(
我 Atom/VSCode 的插件經常出問題
⑵ vue各版本命名
Vue的各種版本介紹：
cjs（兩個版本都是完整版，包含編譯器
）vue.cjs.js
vue.cjs.prod.js（開發版，代碼進行了壓縮）
global（這四個版本都可以在瀏覽器中直接通過scripts標簽導入，導入之後會增加一個全局的Vue對象）
vue.global.js（完整版，包含編譯器和運行時）
vue.global.prod.js（完整版，包含編譯器和運行時，這是開發版本，代碼進行了壓縮）
vue.runtime.global.js
vue.runtime.global.prod.js
browser（四個版本都包含esm，瀏覽器的原生模塊化方式，可以直接通過的方式來導入模塊）
vue.esm-browser.js
vue.esm-browser.prod.js
vue.runtime.esm-browser.js
vue.runtime.esm-browser.prod.js
bundler（這兩個版本沒有打包所有的代碼，只會打包使用的代碼，需要配合打包工具來使用，會讓Vue體積更小）
vue.esm-bundler.js
bue.runtime.esm-bundler.js
在vue的文檔中我們可以了解到vue有兩個版本（vue.js），完整版與不完整版(vue.runtime.js),其中的vue.min.js和vue.runtime.js是完整版與不完整版的縮小版，省去了裡面的注釋。
template標簽在vue實例綁定的元素內部，它是可以顯示template標簽中的內容，但是查看後台的dom結構不存在template標簽。如果template標簽不放在vue實例綁定的元素內部默認裡面的內容不能顯示在頁面上，但是查看後台dom結構存在template標簽。
⑶ 寫代碼的軟體有哪些
寫代碼可以用的軟體有：Webstorm、Vscode、SublimeText、HBuilder、Dreamweaver、notepad++、editplus等。
代碼就是程序員用開發工具所支持的語言寫出來的源文件，是一組由字元、符號或信號碼元以離散形式表示信息的明確的規則體系。代碼設計的原則包括唯一確定性、標准化和通用性、可擴充性與穩定性、便於識別與記憶、力求短小與格式統一以及容易修改等。源代碼是代碼的分支，某種意義上來說，源代碼相當於代碼。現代程序語言中，源代碼可以書籍或磁帶形式出現，但最為常用格式是文本文件，這種典型格式的目的是為了編譯出計算機程序。計算機源代碼最終目的是將人類可讀文本翻譯成為計算機可執行的二進制指令，這種過程叫編譯，它由通過編譯器完成。做前端開發，寫代碼的軟體是必不可少的。主流的前端開發寫代碼軟體有：WebStorm、Vscode、Sublime Text、HBuilder、Dreamweaver、notepad++、editplus等，下面我們一起來看看。
做前端開發，寫代碼的軟體是必不可少的。主流的前端開發寫代碼軟體有：WebStorm、Vscode、Sublime Text、HBuilder、Dreamweaver、notepad++、editplus等，下面我們一起來看看。
1.WebStorm【推薦】
WebStorm 是jetbrains公司旗下一款javaScript 開發工具。目前已經被廣大中國JS開發者譽為「Web前端開發神器」、「最強大的HTML5編輯器」、「最智能的JavaScript IDE」等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。WebStorm的過人在於，商家不斷的更新版本。
2.Visual Studio Code（簡稱：Vscode）【推薦】
Visual Studio Code中文版是微軟推出的帶 GUI 的代碼編輯器，啟動非常快，完全可以用來代替其他文本文件編輯工具。還可以用來做開發，支持各種語言。軟體功能非常強大，界面簡潔明晰、操作方便快捷，設計得很人性化。軟體主要改進了文檔視圖，完善了對 Markdown的支持，新增php語法高亮。
3.Sublime Text
Sublime Text是一個代碼編輯器也是HTML和散文先進的文本編輯器。擁有著漂亮的用戶界面和非凡的功能，例如迷你地圖，多選擇，Python的插件，代碼段，等等。完全可自定義鍵綁定，菜單和工具欄。其主要功能包括：拼寫檢查，書簽，完整的Python API，Goto功能，即時項目切換，多選擇，多窗口等等。
4.HBuilder
HBuilder是DCloud推出的專為前端打造的開發工具，具有飛一樣的編碼、最全的語法庫和瀏覽器兼容數據、可以方便的製作手機APP、最保護眼睛的綠柔設計等特點。支持HTML、CSS、JS、PHP的快速開發。通過完整的語法提示和代碼輸入法、代碼塊等，大幅提升HTML、js、css的開發效率。
5.Dreamweaver
Dreamweaver是由Macromedia公司開發的一款所見即所得的網頁編輯器。所見即所得的網頁編輯器的優點有直觀性、使用方便、容易上手。它使用所見即所得的介面，亦有HTML編輯的功能。熟練掌握Dreamweaver軟體的使用，無論是設計師還是工程師，它都能有效提高你的工作效率。
6.Notepad++
Notepad++是一款Windows操作系統下的一套文本編輯器。此軟體是免費軟體，可以免費使用，自帶中文，小巧高效，支持27種編程語言，通吃C,C++ ,Java ,C#, XML, HTML, PHP,JS 等，Notepad++ 內置支持多達27種語法高亮度顯示。Notepad++除了可以用來製作一般的純文字說明文件，也十分適合編寫計算機程序代碼。
7.Editplus
Editplus是一款由韓國Sangil Kim出品的小巧但是功能非常強大的文字編輯器，擁有無限制的Undo/Redo（撤銷）、英文拼字檢查、自動換行、列數標記、搜尋取代、同時編輯多文件、全屏幕瀏覽功能。除了支持HTML, CSS, PHP, ASP, Perl, C/C++, Java, JavaScript, VBScript的代碼高亮外，還內建完整的HTML和CSS指令功能。
⑷ vue 的優點是什麼
Vue 的獨特優勢
Vue 和其他前端框架相比，在結構、樣式、業務分離等方面更清晰徹底，更符合前端多年來的編碼習慣，更符合直覺、更容易學習和維護。
入門非常容易，資料豐富，框架功能完善，加入非常多的特性，例如，if, for, async,為開發者節省很多垃圾代碼。模板支持 html 和 jsx，支持自定義指令，方便操作 dom 的一致行為。
一、門檻低、上手快
Vue 上手簡單的原因是無需復雜配置，只需要一個 HTML 與相關文件就能跑起來。從設計的角度上來看，Vue 考慮的也是如何降低門檻，讓只掌握了 Web 基礎知識 (HTML, CSS, JS) 的情況下，能夠最快理解和上手，從而實現和完成一個應用。
和 React、Angular 相比，Vue 的中文文檔是寫的最好的，再加上國內有非常豐富的視頻、圖文教程、各種開源的插件，哪怕是一個新手前端開發，學習一周左右就可以搞一個項目出來。就如我們開頭所說，配合第三方前端表格控制項 SpreadJS，自學一周就能做出一個企業級的表格協同文檔。所以，它對於非專業前端，或者前端入門人士來說是非常適合的。
其次，Vue 設定多，所以需要思考的就少。屬性指令定義了一大堆，API 文檔整理好的就在那裡，需要什麼一查，最佳實踐的 demo 寫好了放在那邊，照著寫就 OK 了。
二、人性化，符合用戶習慣
React 的設計理念是提供強大而復雜的機制，讓開發者來適應我；而 Vue 則是為了更適應開發者的使用習慣，在很多設定上都是讓開發者怎麼爽怎麼來。
比如 Vue 的 API 跟傳統 Web 開發者熟悉的模板契合度非常高。Vue 的單文件組件是以模板+JavaScript+CSS 的組合模式呈現，它跟 Web 現有的 HTML、JavaScript、CSS 能夠更好地配合；Vue 提供反應式的數據，當數據改動時，界面就會自動更新，而 React 裡面則還需要調用方法 SetState。
三、Vue + 第三方控制項 = 效率高 & 使用便利 & 組件化架構
前面我們提到了 Vue 的兩個基礎特性，但能成為時代的發展趨勢，說明 Vue 的能力遠不止於此。
從我們團隊嘗試使用 Vue 的情況來看，Vue 使用起來異常簡單，它從 React 那裡借鑒了組件化、prop、單向數據流、性能、虛擬渲染，並意識到狀態管理的重要性，並從 Angular 那裡借鑒了模板，並賦予了更好的語法，以及雙向數據綁定（在單個組件里），它不強制使用某種編譯器，所以你完全可以在遺留代碼里使用 Vue，並對之前亂糟糟的 jQuery 代碼進行改造。
即便，仍然有很多人認為 Vue 只適合開發簡單的網站或者單頁面應用，但其實 Vue 有著比 React 和 Angular 更為豐富多元的第三方控制項資源。配合這些資源使用，Vue 做企業級項目甚至比其他框架來的更加便利高效。
⑸ 使用create-vue過程中遇到的一些問題
例如沒有引入的組件會報錯： __If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. __
所以要關注瀏覽器的警告， 不能忽略，有時候出錯了， 編譯也不報錯，排查很難受
解決方案： 將node版本升級到12及以上； 我用了12.16.2之後，啟動成功
筆者誤將vue-> Vue了，然後編譯器報了個Two output files share the same path but have different contents； 說打包路徑不能一直，搞得一臉懵；
最後通過對比發現，Pre-bundling dependencies的結果裡面多了個Vue導致的😄；很難受
最後，vite編譯的確實很快，不到6秒就能編譯成功，風一般的速度； 不過在使用的時候要注意各種坑，希望vite官方，能將錯誤拋出來，而不是報警告。
感謝vite大佬為我們提供了這么快的編譯工具！！！
⑹ vue前端面試題有哪些呢
文章中給你列舉了部分的面試題，這些都是公司面試常遇到的，還有需要的還可以自己去查閱一下資料
1、active-class是哪個組件的屬性？嵌套路由怎麼定義？
答：vue-router模塊的router-link組件。
2、怎麼定義vue-router的動態路由？怎麼獲取傳過來的動態參數？
答：在router目錄下的index.js文件中，對path屬性加上/:id。 使用router對象的params.id
3、vue-router有哪幾種導航鉤子？
答：三種，一種是全局導航鉤子：router.beforeEach(to,from,next)，作用：跳轉前進行判斷攔截。第二種：組件內的鉤子；第三種：單獨路由獨享組件
4、scss是什麼？安裝使用的步驟是？有哪幾大特性？
答：預處理css，把css當前函數編寫，定義變數,嵌套。 先裝css-loader、node-loader、sass-loader等載入器模塊，在webpack-base.config.js配置文件中加多一個拓展:extenstion，再加多一個模塊：mole裡面test、loader
4.1、scss是什麼？在vue.cli中的安裝使用步驟是？有哪幾大特性？
答：css的預編譯。
使用步驟：
第一步：用npm 下三個loader（sass-loader、css-loader、node-sass）
第二步：在build目錄找到webpack.base.config.js，在那個extends屬性中加一個拓展.scss
第三步：還是在同一個文件，配置一個mole屬性
第四步：然後在組件的style標簽加上lang屬性 ，例如：lang=」scss」
有哪幾大特性:
1、可以用變數，例如（$變數名稱=值）；
2、可以用混合器，例如（）
3、可以嵌套
5、mint-ui是什麼？怎麼使用？說出至少三個組件使用方法？
答：基於vue的前端組件庫。npm安裝，然後import樣式和js，vue.use（mintUi）全局引入。在單個組件局部引入：import {Toast} from 『mint-ui』。組件一：Toast(『登錄成功』)；組件二：mint-header；組件三：mint-swiper
6、v-model是什麼？怎麼使用？ vue中標簽怎麼綁定事件？
答：可以實現雙向綁定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model層的data屬性。綁定事件：<input @click=doLog() />
7、axios是什麼？怎麼使用？描述使用它實現登錄功能的流程？
答：請求後台資源的模塊。npm install axios -S裝好，然後發送的是跨域，需在配置文件中config/index.js進行設置。後台如果是Tp5則定義一個資源路由。js中使用import進來，然後.get或.post。返回在.then函數中如果成功，失敗則是在.catch函數中
8、axios+tp5進階中，調用axios.post(『api/user』)是進行的什麼操作？axios.put(『api/user/8′)呢？
答：跨域，添加用戶操作，更新操作。
9、什麼是RESTful API？怎麼使用?
答：是一個api的標准，無狀態請求。請求的路由地址是固定的，如果是tp5則先路由配置中把資源路由配置好。標准有：.post .put .delete
10、vuex是什麼？怎麼使用？哪種功能場景使用它？
答：vue框架中狀態管理。在main.js引入store，注入。新建了一個目錄store，….. export 。場景有：單頁應用中，組件之間的狀態。音樂播放、登錄狀態、加入購物車
11、mvvm框架是什麼？它和其它框架（jquery）的區別是什麼？哪些場景適合？
答：一個model+view+viewModel框架，數據模型model，viewModel連接兩個
區別：vue數據驅動，通過數據來顯示視圖層而不是節點操作。
場景：數據操作比較多的場景，更加便捷
12、自定義指令（v-check、v-focus）的方法有哪些？它有哪些鉤子函數？還有哪些鉤子函數參數？
答：全局定義指令：在vue對象的directive方法裡面有兩個參數，一個是指令名稱，另外一個是函數。組件內定義指令：directives
鉤子函數：bind（綁定事件觸發）、inserted(節點插入的時候觸發)、update（組件內相關更新）
鉤子函數參數：el、binding
13、說出至少4種vue當中的指令和它的用法？
答：v-if：判斷是否隱藏；v-for：數據循環出來；v-bind:class：綁定一個屬性；v-model：實現雙向綁定
14、vue-router是什麼？它有哪些組件？
答：vue用來寫路由一個插件。router-link、router-view
15、導航鉤子有哪些？它們有哪些參數？
答：導航鉤子有：a/全局鉤子和組件內獨享的鉤子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave
參數：有to（去的那個路由）、from（離開的路由）、next（一定要用這個函數才能去到下一個路由，如果不用就攔截）最常用就這幾種
16、Vue的雙向數據綁定原理是什麼？
答：vue.js 是採用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。
具體步驟：
第一步：需要observe的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter和getter
這樣的話，給這個對象的某個值賦值，就會觸發setter，那麼就能監聽到了數據變化
第二步：compile解析模板指令，將模板中的變數替換成數據，然後初始化渲染頁面視圖，並將每個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變動，收到通知，更新視圖
第三步：Watcher訂閱者是Observer和Compile之間通信的橋梁，主要做的事情是:
1、在自身實例化時往屬性訂閱器(dep)裡面添加自己
2、自身必須有一個update()方法
3、待屬性變動dep.notice()通知時，能調用自身的update()方法，並觸發Compile中綁定的回調，則功成身退。
第四步：MVVM作為數據綁定的入口，整合Observer、Compile和Watcher三者，通過Observer來監聽自己的model數據變化，通過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達到數據變化 -> 視圖更新；視圖交互變化(input) -> 數據model變更的雙向綁定效果。
ps：16題答案同樣適合」vue data是怎麼實現的？」此面試題。
17、請詳細說下你對vue生命周期的理解？
答：總共分為8個階段創建前/後，載入前/後，更新前/後，銷毀前/後。
創建前/後： 在beforeCreated階段，vue實例的掛載元素$el和數據對象data都為undefined，還未初始化。在created階段，vue實例的數據對象data有了，$el還沒有。
載入前/後：在beforeMount階段，vue實例的$el和data都初始化了，但還是掛載之前為虛擬的dom節點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message成功渲染。
更新前/後：當data變化時，會觸發beforeUpdate和updated方法。
銷毀前/後：在執行destroy方法後，對data的改變不會再觸發周期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，但是dom結構依然存在
18、請說下封裝 vue 組件的過程？
答：首先，組件可以提升整個項目的開發效率。能夠把頁面抽象成多個相對獨立的模塊，解決了我們傳統項目開發：效率低、難維護、復用性等問題。
然後，使用Vue.extend方法創建一個組件，然後使用Vue.component方法注冊組件。子組件需要數據，可以在props中接受定義。而子組件修改好數據後，想把數據傳遞給父組件。可以採用emit方法。
19、你是怎麼認識vuex的？
答：vuex可以理解為一種開發模式或框架。比如PHP有thinkphp，java有spring等。
通過狀態（數據源）集中管理驅動組件的變化（好比spring的IOC容器對bean進行集中管理）。
應用級的狀態集中放在store中； 改變狀態的方式是提交mutations，這是個同步的事物； 非同步邏輯應該封裝在action中。
20、vue-loader是什麼？使用它的用途有哪些？
答：解析.vue文件的一個載入器，跟template/js/style轉換成js模塊。
用途：js可以寫es6、style樣式可以scss或less、template可以加jade等
21、請說出vue.cli項目中src目錄每個文件夾和文件的用法？
答：assets文件夾是放靜態資源；components是放組件；router是定義路由相關的配置;view視圖；app.vue是一個應用主組件；main.js是入口文件
22、vue.cli中怎樣使用自定義的組件？有遇到過哪些問題嗎？
答：第一步：在components目錄新建你的組件文件（smithButton.vue），script一定要export default {
第二步：在需要用的頁面（組件）中導入：import smithButton from 『../components/smithButton.vue』
第三步：注入到vue的子組件的components屬性上面,components:{smithButton}
第四步：在template視圖view中使用，<smith-button> </smith-button>
問題有：smithButton命名，使用的時候則smith-button。
23、聊聊你對Vue.js的template編譯的理解？
答：簡而言之，就是先轉化成AST樹，再得到的render函數返回VNode（Vue的虛擬DOM節點）
詳情步驟：
首先，通過compile編譯器把template編譯成AST語法樹（abstract syntax tree 即 源代碼的抽象語法結構的樹狀表現形式），compile是createCompiler的返回值，createCompiler是用以創建編譯器的。另外compile還負責合並option。
然後，AST會經過generate（將AST語法樹轉化成render funtion字元串的過程）得到render函數，render的返回值是VNode，VNode是Vue的虛擬DOM節點，裡面有（標簽名、子節點、文本等等）