前端summer-front开发系列一：前端环境准备（node.js npm vscode）

写在前面: 作者是个后端开发人员，为了体验下前后端分离开发模式下，前端是如何工作的，同时为了锻炼全栈能力，特此研究了相关内容。内容有点肤浅，着重在实践上，为了体现前后端整体开发环境。

安装环境：win7 64位系统

安装内容：

1. Node.js 安装配置我的前端第一篇文章，可供参考，本篇不再介绍

2. vs-code 安装使用
2.1 进入vscode下载页面

下载压缩版(纯粹个人分格，下载安装版也可以)，解压缩后到解压是指定的vscode根目录，找到可执行文件双击启动。

打开后如下图

选择 File -> Open Folder... 选择要导入的项目，（作者是用vue-cli 创建了个工程，然后集成了element ui，这个放到后面介绍）

安装插件，暂时先安装3个，如果需要安装其他的可以在搜索框中搜索，在右边安装或者取消安装
vetur:vue语法高亮显示 eslint:语法错误检查 debugger for chrome:调试用的

File -> Preferences -> Settings 每个功能模块下面都有个对应的settings.json配置文件，可以对vscode自带功能及安装的插件进行配置
Terminal -> New Terminal 开启一个终端可以执行npm命令。
现在差不多就先捣鼓了这些东西，其他的插件/功能等具体用的时候在去琢磨。

3. json-server 搭建
全局安装json-server，在上一步打开的vscode终端执行 cnpm i -g json-server，(也可以在cmd里面运行)。
运行json-server --watch db.json 。package.json在全局插件安装目录下，不方便把json-server当成独立服务使用，也不方便个性化配置
本地安装json-server
新建文件夹json-server，将终端切到json-server目录，执行cnpm init 初始化package.json
然后执行 npm install json-server --save-dev
编辑package.json 文件内容如下

{
  "name": "json-server",
  "version": "1.0.0",
  "description": "json server",
  "main": "index.js",
  "scripts": {
	"json-server": "json-server --watch db.json"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "json-server": "^0.15.1"
  }
}

编辑测试数据db.json，内容如下

{
  "users":[{
	"id":1,
	"name":"wang",
	"age":18,
	"phone":"18818251210",
	"email":"[email protected]",
	"companyId":1
  },{
	"id":2,
	"name":"zhang",
	"age":20,
	"phone":"18818251211",
	"email":"[email protected]",
	"companyId":2
  }],
  "companies":[{
	"id":1,
	"name":"Apple",
	"remark":"apple is good"
  },{
	"id":2,
	"name":"Inter",
	"remark":"inter is good too"
  }]
}

启动json-server npm/cnpm run json-server (json-server时在package.json里配置的)

打开浏览器输入localhost:3000看下效果

可以看到在db.json里配置的数据users和companies了。同时可以知道，json-server支持http全套方法，完美支持微服务风格的各种接口crud操作。
前端开发环境至此结束，附上json-server开源链接。更多详细内容可参考开源项目介绍

总结：本文简单介绍了前端独立开发环境必须的几个元素，node js运行环境，vscode开发环境及json-server 服务器环境的搭建及使用。

前端summer-front开发系列一：前端环境准备（node.js npm vscode）

猜你喜欢