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

结果如下:

vue+vscode+nodejs 开发环境搭建的更多相关文章

  1. NodeJS开发环境搭建

    原创作者: zero20121222 NodeJS开发环境搭建 1.安装NodeJS 1.编译环境 源代码编译器,通常 Unix/Linux平台都自带了C++的编译器(GCC/G++).如果没有,请通 ...

  2. vue前端+java后端 vue + vuex + koa2开发环境搭建及示例开发

    vue + vuex + koa2开发环境搭建及示例开发 https://segmentfault.com/a/1190000012918518 vue前端+java后端 https://blog.c ...

  3. windows下vue+webpack前端开发环境搭建及nginx部署

    一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...

  4. Windows 环境下vue+webpack前端开发环境搭建

    一.开发环境搭建 1.前端框架一般依赖node.js,我们首先要安装node.js. 2.由于许多npm 的源都在国外的地址,安装起来特别慢,所以我们这里利用淘宝的镜像服务器. 安装命令为:npm i ...

  5. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

    缘起 哈喽大家好,兜兜转转终于来到了Vue实战环节,前边的 6 篇关于Vue基础文章我刚刚简单看了看,感觉写的还是不行呀,不是很系统,所以大家可能看上去比较累,还是得抽时间去润润色,修改修改语句和样式 ...

  6. nodejs初探(一)nodejs开发环境搭建

    简介 JavaScript是一种运行在浏览器的脚本.Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快.易于扩展的网络应用.Node.js 使用事件 ...

  7. vue与webpack开发环境搭建:从无到有

    一个vue从无到有的搭建过程. 一.不论是webpack还是vue,最初的第一步就是安装node.js.它是基石. 从官网下载你需要的安装包:官网下载链接:http://nodejs.cn/downl ...

  8. ubuntu下nodejs开发环境搭建

    1.安装nodejs sudo apt install -y nodejs 2.更新npm到最新版本 sudo npm i -g npm 3.npm配置为淘宝镜像 sudo npm config se ...

  9. vue 开发系列(一) vue 开发环境搭建

    概要 目前前端开发技术越来越像后台开发了,有一站式的解决方案. 1.JS包的依赖管理像MAVEN. 2.JS代码编译打包. 3.组件式的开发. vue 是一个前端的一站式的前端解决方案,从项目的初始化 ...

随机推荐

  1. CentOS7 修改PATH环境变量的方法

    vim /etc/profile 添加: PATH=/root/.config/composer/vendor/bin:$PATH 保存,退出,运行: source /etc/profile 检查: ...

  2. 使用log4net记录ABP日志

    demo地址:ABP.WindowsService 该文章是系列文章 基于.NetCore和ABP框架如何让Windows服务执行Quartz定时作业 的其中一篇. 参考:https://aspnet ...

  3. Sring 的 @AliasFor 使用规则

    一.该标签存在的意义 顾名思义 @AliasFor 表示别名,它可以注解到自定义注解的两个属性上,表示这两个互为别名,也就是说这两个属性其实同一个含义.该标签存在的含义,从网上查发现有个点, 若  自 ...

  4. 全开源C++ DirectUI 界面库SOUI 3.0更新

    从2019.5.22开始,SOUI版本号更新到2.9.0.2,后面开始准备3.0的开发,历时近3个月,现在3.0的主要工作基本完成. 为了便于大家区别2.x,3.0启用了新的代码仓库:https:// ...

  5. Mac 10.14.4 编译openjdk1.9源码 及集成clion动态调试

    警告⚠️:本文耗时很长,先做好心理准备:编译openjdk源码需要很大的耐心,因为要踩很多坑,解决很多问题,本人从编译开始到结束用了两天时间,按照本篇教程踩坑会少许:谢谢观看 一.获取openjdk源 ...

  6. centos yum 安装 mariadb

    1. 在 /etc/yum.repos.d/ 下建立 MariaDB.repo,输入内容 [mariadb] name=MariaDB baseurl=http://yum.mariadb.org/1 ...

  7. 【Java例题】7.6文件题3-文本文件统计

    6.文本文件统计.已有一个文本文件文件,请统计数字.大写字母.小写字母.汉字及其它字符出现的次数:然后将这些次数由大到小写到另一个文件之中.说明:将次数为零的过滤掉排序 package chapter ...

  8. java并发编程(二)----创建并运行java线程

    实现线程的两种方式 上一节我们了解了关于线程的一些基本知识,下面我们正式进入多线程的实现环节.实现线程常用的有两种方式,一种是继承Thread类,一种是实现Runnable接口.当然还有第三种方式,那 ...

  9. egg-sequelize-ts 插件

    egg-sequelize-ts plugin 目的 (Purpose) 能让使用 typescript 编写的 egg.js 项目中能够使用 sequelize方法,并同时得到egg.js所赋予的功 ...

  10. 史上最全面的SignalR系列教程-3、SignalR 实现推送功能-集线器类实现方式

    1.概述 通过前两篇 史上最全面的SignalR系列教程-1.认识SignalR 史上最全面的SignalR系列教程-2.SignalR 实现推送功能-永久连接类实现方式 文章对SignalR的介绍, ...