vue+vscode+nodejs 開發環境搭建

nodejs安裝配置

1.下載

地址：https://nodejs.org/en/

2.默認安裝

 

 

安裝完成后，執行npm -v 出現版本號則表示安裝成功。

3.配置

• 在node安裝目錄下新建兩個文件夾node_global和node_cache
• 配置npm全局模塊的存放路徑以及cache的存放路徑，執行如下命令：

npm config set prefix "D:\Program Files\nodejs\node_global"

npm config set prefix "D:\Program Files\nodejs\node_cache"

• 配置環境變量，增加變量

NODE_PATH      D:\Program Files\nodejs\node_global\node_modules

NODEJS_PATH    D:\Program Files\nodejs

PATH 追加%NODEJS_PATH%\;%NODEJS_PATH%\node_global\

• 安裝cnpm，執行如下命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

• 安裝js格式校驗插件eslint

cnpm install eslint -g

VSCode安裝配置

1.下載

地址：https://code.visualstudio.com/Download

2.默認安裝

3.插件安裝

• Auto Close Tag
• Auto Rename Tag
• Beautify
• Chinese
• CSS peek
• Document This
• ESlint
• filesize
• Gitlens-Git supercharged
• HTML CSS support
• HTML snippets
• Java Server pages
• Language Support for Java
• Live server
• open in browser
• Path Autocomplete
• Path Intellisense
• PostCSS syntax
• postcss-sugarss-language
• Vetur
• VS Code CSS Comments
• vscode-icons
• Vue 2 Snippets
• VueHelper

3.配置

修改配置如下：

{

"css.validate": false,

// "files.associations": {

// "*.css": "postcss"

// },

"emmet.includeLanguages": {

"vue-html": "html",

"javascript": "javascriptreact",

"postcss": "css"

},

"git.path":"E:/Program Files/Git/bin/git.exe",

"git.autoRepositoryDetection": false,

"workbench.iconTheme": "vscode-icons",

//自動補齊文件路徑時，帶入擴展名

"path-autocomplete.extensionOnImport": true,

// 每次保存文件（ctrl+s）時，eslint插件會自動對當前文件進行eslint語法修正！

"eslint.validate": [

"javascript",

"javascriptreact",

"html",

{

"language": "vue",

"autoFix": true

}

],

"eslint.options": {

"plugins": [

"html"

]

},

//為了符合eslint的兩個空格間隔原則

"editor.tabSize": 2,

// 啟用/禁用 HTML 標記的自動關閉。

"html.autoClosingTags": true,

// 啟用后，按下 TAB 鍵，將展開 Emmet 縮寫。

"emmet.triggerExpansionOnTab": true,

// 以像素為單位控制字號。

"editor.fontSize": 16,

"[postcss]": {},

"git.enableSmartCommit": true,

"liveServer.settings.host": "172.30.201.16",

"liveServer.settings.donotShowInfoMsg": true,

"gitlens.advanced.messages": {

"suppressShowKeyBindingsNotice": true

},

"explorer.confirmDelete": false,

"vsicons.dontShowNewVersionMessage": true

}

 

vue安裝和初始化

1.安裝

執行命令：cnpm install -g vue-cli

2.搭建vue項目並初始化

• 執行命令：vue init webpack my-project
• 根據提示輸入內容

 

 

• 使用vscode打開項目

 

 

• 右鍵項目，在終端中打開

 

 

• 移動到項目根目錄

cd ..

• 安裝依賴

cnpm install

• 啟動項目

cnpm run dev

 

結果如下：