前端summer-front开发系列一:前端环境准备(node.js npm vscode)

发布于:2021-05-15 00:00:35

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


安装环境: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":"666@qq.com",
"companyId":1
},{
"id":2,
"name":"zhang",
"age":20,
"phone":"18818251211",
"email":"888@qq.com",
"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 服务器环境的搭建及使用。

相关推荐

最新更新

猜你喜欢