vuejs優雅代碼（編程語言vue）

本文目錄一覽：

• 1、如何優雅地使用 VSCode 來編輯 vue 文件
• 2、.vue文件怎麼寫js代碼
• 3、vuejs在前端開發起到什麼作用

如何優雅地使用 VSCode 來編輯 vue 文件

先來扒一扒使用 PHPStorm 遇到的問題：

vue文件雖然可以通過插件來解決高亮問題，但是 script 標籤中的 ES6 代碼的識別老是出問題，箭頭函數有的時候能正確識別，有的時候會報錯

無法正確識別 vue 文件中的 jsx 語法

無法正確識別和高亮 vue 文件 style 標籤中使用的 less 語法

vue文件中 template 部分使用了大量的自定義標籤（自定義組件）和自定義屬性，會報一堆 warning

經常性卡死

webpack實時編譯的錯誤不能直接展示在代碼編輯器內，還得自己到控制台中查看

如何安裝 vscode

很簡單，傳送門： 官網下載安裝

第一步，要支持 vue 文件的基本語法高亮

這裡，我試過好3個插件： vue , VueHelper 和 vetur ，最終選擇使用 vetur 。

安裝插件： Ctrl + P 然後輸入 ext install vetur 然後回車點安裝即可。

p.s: vscode 的插件安裝比 PHPStorm 的插件安裝更快捷方便，安裝完成後還不用重啟整個程序，只要重新加載下工作區窗口就可以了。

安裝完 vetur 後還需要加上這樣一段配置下：

“emmet.syntaxProfiles”: {

“vue-html”: “html”,

“vue”: “html”

}

這時可以打開一個vue文件試試，注意下右下角狀態欄是否正確識別為 vue 類型：

如果被識別為 text 或 html ，則記得要點擊切換下。

第二步，要支持 vue 文件的 ESLint

可能還有人會問為什麼要 ESLint ？沒有 lint 的代碼雖然也可能可以正確運行，但是 lint 作為編譯前的一道檢測成本更小，而且更快。此外， ESLint 還有很多規範是幫助我們寫出更加優雅而不容易出錯的代碼的。

jshint 本來也是個不錯的選擇，但是 ESLint 對 jsx 的支持讓我還是選擇了 ESLint.

安裝插件： Ctrl + P 然後輸入 ext install eslint 然後回車點安裝即可。

ESLint 不是安裝後就可以用的，還需要一些環境和配置：

首先，需要全局的 ESLint , 如果沒有安裝可以使用 npm install -g eslint 來安裝。

其次，vue文件是類 HTML 的文件，為了支持對 vue 文件的 ESLint ，需要 eslint-plugin-html 這個插件。可以使用 npm install -g eslint-plugin-html 來安裝

接着，安裝了 HTML 插件後，還需要在 vscode 中配置下 ESLint：

“eslint.validate”: [

“javascript”,

“javascriptreact”,

“html”,

“vue”

],

“eslint.options”: {

“plugins”: [“html”]

},

最後，別忘了在項目根目錄下創建 .eslintrc.json , 如果還沒創建，還可以使用下面快捷命令來創建：

這樣一來 vue 中寫的 js 代碼也能正確地被 lint 了。

要是不小心少個括號之類的都可以有對應的報錯:

多餘 import 也都能報錯:

還是蠻智能的。

第三步，配置構建任務

vue 項目的構建我選擇用 webpack ，不過，並不是直接使用命令行下的 webpack 而是使用了 webpack 的 API 寫的 node 腳本。 腳本主要有兩個，一個是 build/bin/build.js 另一個是 build/bin/watch.js 分別是單次構建和實時構建。

於是乎，對應 vscode 中的 tasks 也是有兩個： build 和 watch ，簡單配置如下：

{

// See

// for the documentation about the tasks.json format

// use `Ctrl+P` and type `task` + SPACE + taskName to run a task

“version”: “0.1.0”,

“tasks”: [

{

“taskName”: “build”,

“echoCommand”: true,

“command”: “node”,

“args”: [

“build/bin/build.js”

],

“suppressTaskName”: true,

“isBuildCommand”: true

},

{

“taskName”: “watch”,

“echoCommand”: true,

“command”: “node”,

“args”: [

“build/bin/watch.js”

],

“suppressTaskName”: true,

“isBackground”: true

}

]

}

這樣配置好後，按 Ctrl + Shift + B 即可開始單次構建。 不過單次構建比較慢（要10秒+），一般我都用實時構建： Ctrl + P 然後輸入 task watch 回車 即可開始實時構建。實時構建除了第一次比較慢，其他時候還是非常快的，一般1秒內就可以構建好。

最後，webpack 構建錯誤提示

webpack 構建失敗後一般都會有錯誤提示，會顯示在輸出窗口中：

為啥是彩色的？ 因為裝了 Output Colorizer 這個插件。

當然，這樣還是不夠方便 — 實時構建是後台運行的，「輸出」窗口一般也都是在後台，每次保存完文件還得點開豈不麻煩。

要是能做到像 ESLint 一樣直接把錯誤標到編輯器上面就好了。真的可以嗎？翻了下 vscode 的文檔，發現有神奇的 problemMatcher — 可以對任務輸出進行解析，解析出的問題會顯示在「問題」窗口中，如果還有文件名行號和列號，則會在源代碼編輯窗口中對應的位置標出來。

先放個最終效果：

在這個文件的第32行，import 了一個不存在的模塊，這樣的錯誤在 ESLint 中當然是檢查不出來的，然而在 webpack 的實時構建中會報錯：

這個事情的困難在於兩點：

如何通過 problemMatcher 把這個錯誤給抓出來？

如何找到錯誤對應的行號？（如果可能的話，還有列號）

webpack的錯誤輸出格式並不是完全統一的，而且有些還沒有行號 — 一方面可能是 webpack 的 bug ，另一方面 vue 文件在構建的時候會拆成 template, script 和 style 三個方面進行構建，報錯的行號可能對不上。

最終我的解決方案是對 webpack 的錯誤重新格式化輸出，然後匹配：

首先，重新格式化輸出需要 format-webpack-stats-errors-warnings 這個包（偶新寫的）

npm install –save-dev format-webpack-stats-errors-warnings

然後，到 build/bin/build.js 和 build/bin/watch.js 中在 webpack 構建完成的回調函數中增加這個格式化後的輸出：

更多使用介紹見 github

最後，在 .vscode/tasks.json 中，每個任務下添加 problemWatcher :

// …

{

“taskName”: “build”,

// …

// build 任務的:

“problemMatcher”: {

“owner”: “webpack”,

“fileLocation”: [

“relative”,

“${workspaceRoot}”

],

“pattern”: {

“regexp”: “^!(\\w+): (\\S+)?:(\\d+),(\\d+)(?:~(?:(\\d+),)?(\\d+))?: (.*)$”,

“severity”: 1,

“file”: 2,

“line”: 3,

“column”: 4,

“endLine”: 5,

“endColumn”: 6,

“message”: 7

}

}

}

{

“taskName”: “watch”,

// …

// watch 任務的：

“problemMatcher”: {

“owner”: “webpack”,

“fileLocation”: [

“relative”,

“${workspaceRoot}”

],

“pattern”: {

“regexp”: “^!(\\w+): (\\S+)?:(\\d+),(\\d+)(?:~(?:(\\d+),)?(\\d+))?: (.*)$”,

“severity”: 1,

“file”: 2,

“line”: 3,

“column”: 4,

“endLine”: 5,

“endColumn”: 6,

“message”: 7

},

“watching”: {

“activeOnStart”: true,

“beginsPattern”: “^\\s*Webpack begin run”,

“endsPattern”: “^\\s*Build complete at”

}

}

// …

}

// …

註：在 watch 任務中，為了匹配何時開始和何時結束，我在 webpack 構建的 run 和 watch 時增加了一個 console.log(‘Webpack begin run’) 的打印，而在構建完成後增加了一個 console.log(“Build complete at ..”) 的打印。

.vue文件怎麼寫js代碼

單個組件裏面可以使用 import $ from ‘jquery’ 引用

當前你得使用npm把jquery 安裝了。 把jquery 用export default 導出來(就是在jquery.js的最後一行寫上 export default $)， 然後使用import $ from 『jquery的文件地址』

至於 script標籤裏面怎麼寫

import $ from ‘jquery’

export default {

  data: function() {

    return {

      testData: 1 // 這個對象裏面定義所有的變量 這些變量可以 在html直接和dom綁定

    }

  },

  mounted: function() {

    // 生命周期函數， 有好幾個 執行的順序都不一樣，可以根據場景 選擇不同的生命周期函數 這塊一般是初始化數據的地方

  },

  methods: { // 這裡寫所有的方法， 這些方法可以在 方法內部使用this.方法名調用，也可以在html 中使用@時間名 = 『函數名()』調用

    init() {  

      // 實例方法

      // 使用this.變量可以訪問data中的變量

      console.log(this.testData)

    }

  }

}

vuejs在前端開發起到什麼作用

jQuery的諸多局限性導致前端工程師的發展受到了很多的限制，只能做一些表面性的工作，並不能實現前後端分離開發。

而近期出現的Vue，它給前端帶來了無限的可能和改變。

改變一：真正意義上的前端工程師

之前開發都是前端做靜態頁面，把頁面給到後台程序員改成jsp、php、asp等等…一頓亂改，一頓塞變量，做完以後頁面樣式亂七八糟，最後你再調整css。說白了你會html，css就行了，基本沒什麼門檻，可以這麼說。

有了Vue和Node的前端工程化以後，前端工程師能做的事情越來越多，後台人員只需要拋過來一個Api，剩下的就可以都交給前端了。

改變二：服務端渲染VS客戶端渲染

傳統的jsp、php或是模板渲染也好，都是服務端渲染，就是客戶端一個請求，服務器直接把整個頁面返回給你，簡單粗暴。（Spring Boot是通過模板引擎，由服務端完成的渲染工作）

但是vue開發是前後端分離開發，通過api進行交互，客戶端請求服務器返回json數據，由客戶端進行渲染。

不僅減輕了服務器的壓力速度更快而且渲染更加優雅，代碼更容易維護。

改變三：渲染優雅，代碼易維護

jQuery是通過DOM來控制數據，不僅笨重而且渲染數據特別麻煩，而 Vue是通過數據來控制狀態，通過控制數據來控制渲染，變量可以直接寫在標籤中，渲染更加優雅。

因為前端代碼和後台代碼都是分開的，所以項目更容易維護，開發效率更高。

改變四：項目工程化，結合npm直接安裝第三方庫

Vue讓前端項目更加工程化，同時也規範了前端工程師的代碼，而node和npm的加入才是vue能蓬勃發展的重要原因。

Node為Vue提供了本地server和模塊化開發的思路，npm更能安裝Vue項目需要的模塊，配合Vue使用，比如Moment.js Element ui vuex等等，這些第三方庫讓Vue有了無限的可能。

敲黑板（補充下）：傳統開發jQuery是命令式編程，現代框架開發是函數式編程。現代框架開發，可以使用Webpack（當然使用jQuery也可以使用Webpack），可以使用人家提供的現成的腳手架，比方說create-react-app，vue-cli。極大提高了開發的效率，並且可以使用最新的ES6、ES7語法進行開發，在編碼體驗上，就提高了一個檔次。

總結

知其然，知其所以然，沒有最好的框架，只有最合適的框架！