vue+vscode+nodejs 开发环境搭建-蒲公英云

参考文献 vue+vscode+nodejs 开发环境搭建 - Desperador - 博客园

nodejs 指定全局安装路径和缓存路径 - Curedfisher - 博客园

安装配置nodejs并创建Vue项目

vscode下载地址：

Documentation for Visual Studio Code

nodejs**安装配置**

1.**下载**

地址： 下载 | Node.js

Node.js 官方网站下载：Node.js

2.**默认安装**

安装完成后，执行npm -v 出现版本号则表示安装成功。

打开cmd，分别输入node –v和 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” (错误)

npm config set prefix “D:\Program Files\nodejs\node_global”

npm config set cache “D:\Program Files\nodejs\node_cache”

npm config set prefix “C:\workspace_software\vscode\nodejs\node_global”

npm config set cache “C:\workspace_software\vscode\nodejs\node_cache”

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfMjczMjcyNjE_size_20_color_FFFFFF_t_70_g_se_x_16

配置环境变量，增加变量

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

NODEJS_PATH D:\Program Files\nodejs

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

在cmd命令下执行 npm install webpack -g ，安装成功后可以看到webpack已经安装到自己设置的node_global目录下。

国内直接使用npm 的官方镜像是非常慢的，网上很多使用cnpm来代替npm的方法，但是这样很多时候需要使用cnpm命令。我们可以设置把npm的镜像源设置为淘宝的，以后就可以直接使用npm命令了，其实本质上是一样的。

安装cnpm，执行如下命令：

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

# 配置镜像站

npm config set registry=http://registry.npm.taobao.org

# 检查一下镜像站是否正常

npm config get registry

然后就可以用 cnpm install express -g 进行拉包了，和npm一样。 npm用国外的比较慢

安装js格式校验插件eslint

cnpm install eslint -g ，和npm一样。

然后就可以用 cnpm install express -g 进行拉包了，和npm一样。

全局安装vue-cli工具

cnpm install webpack -g

cnpm install vue-cli –g

三、创建Vue项目

1、使用vue初始化基于webpack的新项目：vue init webpack vue_demo，初始化过程中会有一些选项，可以按照自己的需求进行选择。

2、创建完成后进入Vue项目目录：cd vue_demo

3、执行命令：npm install （cnpm install）

4、启动：npm run dev （cnpm run dev）

5、浏览器中访问: http://localhost:8080/ 可以看到效果。

VSCode**安装配置**

1.**下载**

地址：Download Visual Studio Code - Mac, Linux, Windows

2.**默认安装 zip解压即可使用**

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.**配置**

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfMjczMjcyNjE_size_20_color_FFFFFF_t_70_g_se_x_16 1

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfMjczMjcyNjE_size_20_color_FFFFFF_t_70_g_se_x_16 2

修改配置如下：

{

“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

}

{
"css.validate": false,
// "files.associations": {
// "*.css": "postcss"
// },
"emmet.includeLanguages": {
"vue-html": "html",
"javascript": "javascriptreact",
"postcss": "css"
},
"git.path":"C:/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

结果如下：

参考文献

node安装后的设置(node_global和node_cache) - windows_scorpio_meng的博客-CSDN博客_node_global

之前安装node后就进行了demo的测试和学习，从网上拉取包的有时候不知道放在什么地方了，c盘也有，当前项目目录也有，挺乱的。

使用npm安装模块分为本地安装和全局安装。

本地安装：npm install express 会安装到当前项目

全局安装：npm install express -g 会安装到指定的目录(node_global)

另外，如果没有设置全局目录node_global，那么全局安装的文件将会保存到 C:\Users\hades\AppData\Roaming\npm (hases是自己设置的计算机名字)

所以，安装好node后，要设置一下node_global和node_cache(node缓存文件夹)

1，在node安装目录创建node_global和node_cache文件夹

2，设置环境变量：

用户变量设置：将用户变量中 PATH 的值改成 D:\Program Files\nodejs\node_global，没有PATH，可以直接添加。

系统变量设置：添加变量 NODE_PATH 值为：D:\Program Files\nodejs\node_modules

70 1

3，打开cmd，执行

npm config set prefix “D:\Program Files\nodejs\node_global”

npm config set cache “D:\Program Files\nodejs\node_cache”

70 2

4，执行npm install express -g 后，查看node_global 文件夹，如果执行命令出错，请以管理员身份运行cmd。

70 3

5，有时候用npm拉取包可能会很慢，可以用淘宝npm镜像代替npm进行拉包，就像github和gitee

执行：$ npm install -g cnpm —registry=https://registry.npm.taobao.org

然后就可以用 cnpm install express -g 进行拉包了，和npm一样。

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfMjczMjcyNjE_size_20_color_FFFFFF_t_70_g_se_x_16 3
————————————————
版权声明：本文为CSDN博主「scorpio_meng」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/scorpio\_meng/article/details/83314675