å
æ¥æä¸æä½¿ç¨ 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
https://go.microsoft.com/fwlink/?LinkId=733558// 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 ..") çæå°ã