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"

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

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

修改配置如下：

{

"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

3，打开cmd，执行

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

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

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

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

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

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

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

分类: vue

标签: vue, no