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 odejs ode_global"

npm config set prefix "D:Program Files odejs ode_cache"

• 配置环境变量，增加变量

NODE_PATH      D:Program Files odejs ode_global ode_modules

NODEJS_PATH    D:Program Files odejs

PATH 追加%NODEJS_PATH%;%NODEJS_PATH% ode_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

 

结果如下：