vue+vscode+nodejs开发环境搭建nodejs安装配置
1.下载
地址：
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=
安装js格式校验插件eslint
cnpm install eslint -g
VSCode安装配置
1.下载
地址：
2.默认安装
3.插件安装
editorjsAuto 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/",
"git.autoRepositoryDetection": false,
"workbench.iconTheme": "vscode-icons",
//⾃动补齐⽂件路径时，带⼊扩展名
"sionOnImport": 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 缩写。"iggerExpansionOnTab": true,
// 以像素为单位控制字号。
"editor.fontSize": 16,
"[postcss]": {},
"ableSmartCommit": true, "liveServer.settings.host": "172.30.201.16", "liveServer.settings.donotShowInfoMsg": true, "ssages": { "suppressShowKeyBindingsNotice": true
},
"firmDelete": 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
结果如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。