1、该前提是你已经搭建好vue-cli脚手架,开始创建一个新项目,输入 vue init webpack demo(demo是自定义项目名)。

2、cd demo 进入项目安装依赖

3、在已经创建的项目结构里面会多出一个node_modules的文件夹,这就是刚才安装的所有依赖

4、此时项目构建完成,输入npm run dev运行项目

5、搭建jsonserver(先下载  https://github.com/typicode/json-server)

6、Json server 安装命令:

  cnpm install -g json-server

7、查看结果  json-server -v

  结果如图即安装完成

8、启动jsonserver : json-server --watch db.json

登录localhost:3000

9、测试自己的数据,可以打开db.json修改

10、可以修改package.json的启动方式

11、启动:   npm run json:server

创建vue项目并搭建JSONSERVER的更多相关文章

  1. VUE,基于vue-cli搭建创建vue项目

    前提:必须安装node.js,官方地址:https://nodejs.org/en/ 然后安装vue-cli 安装方式:cmd命令行安装:打开cmd命令符输入进行全局安装脚手架:npm install ...

  2. Vue2+Webpack创建vue项目

    相比较AngularJS和ReactJS,VueJS一直以轻量级,易上手称道.MVVM的开发模式也使前端从原先的DOM中解放出来,我们在不需要在维护视图和数据的统一上花大量时间,只需要关注于data的 ...

  3. day66_10_10,vue项目环境搭建

    一.下载. 首先去官网查看网址. 下载vue环境之前需要先下载node,使用应用商城npm下载,可以将其下载源改成cnpm: """ node ~~ python:nod ...

  4. Vue 项目环境搭建

    Vue项目环境搭建 ''' 1) 安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 换源安装cnpm >: npm install -g cnp ...

  5. 如何创建vue项目

    Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...

  6. vue项目环境搭建与组件介绍

    Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...

  7. 《Asp.Net Core3 + Vue3入坑教程》 - Vue 1.使用vue-cli创建vue项目

    简介 <Asp.Net Core3 + Vue3入坑教程> 此教程适合新手入门或者前后端分离尝试者.可以根据图文一步一步进操作编码也可以选择直接查看源码.每一篇文章都有对应的源码 目录 & ...

  8. 使用cnpm创建vue项目(含离线安装)

    # 全局安装淘宝cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org #升级 npm cnpm install npm ...

  9. 使用vue-cli创建vue项目

    vue-cli是官方发布的vue.js项目脚手架工具,使用它可以快速创建vue项目,github地址:https://github.com/vuejs/vue-cli 1.安装vue-cli //设置 ...

  10. 通过脚手架创建Vue项目

    第一步 准备工作 1.下载安装Node.js 验证是否安装的方法,在命令行输入node -v 2.安装Vue 在命令行输入npm install -g @vue/cli 查看Vue版本号 npm vu ...

随机推荐

  1. sFlow-RT监控设备教程

    1.前言 sflow-rt网站国内无法访问,这里使用蓝奏云下载 2.下载源码 https://lvpeiming.lanzoup.com/imRxy10was0h密码:5rxk 3.开启sFlow-R ...

  2. java解析CSV文件(zipFiles 打成压缩包 exportObeEventDataExcel 前端页面响应)

    JAR包及代码17:39:09 <!-- https://mvnrepository.com/artifact/com.opencsv/opencsv --> <dependency ...

  3. 使用C#的窗体显示与隐藏动画效果方案 - 开源研究系列文章

    今天继续研究C#的WinForm的显示动画效果. 上次我们实现了无边框窗体的显示动画效果(见博文:基于C#的无边框窗体动画效果的完美解决方案 - 开源研究系列文章 ),这次介绍的是未在任务栏托盘中窗体 ...

  4. mysql拓展

    事务定义 就是将一组SQL语句放在同一批次内去执行 如果一个sql语句出错,则改批次内的所有sql都将被取消执行 (1)原子性 一个事务要么全部提交成功,要么全部失败回滚,不能只执行其中的一部分操作, ...

  5. 春秋云镜像-CVE-2022-0788

    准备: 攻击机:win10. 靶机:春秋云镜像-CVE-2022-0788. 写这个的时候在网上想查找下该漏洞的利用方式,没有找到相关的资料,因此记录下自己通过这个靶场的poc与exp. curl ' ...

  6. ChatGPT大师班 从入门到精通 视频教程 完整版

    本内容收集于:AIGC从入门到精通教程汇总 课程截图 课程目录 01.先导课:工具篇----ChatGPT平替解决方案及汉化教程.mp4 02.第1课:AIGC时代的到来.mp4 03.第2课:认识C ...

  7. AI绘图开源工具Stable Diffusion WebUI前端API对接

    背景 本文主要介绍 AI 绘图开源工具 Stable Diffusion WebUI 的 API 开启和基本调用方法,通过本文的阅读,你将了解到 stable-diffusion-webui 的基本介 ...

  8. 如何通过拼多多订单API接口获取订单详情

    要获取拼多多订单详情,可以使用以下接口: 1. API名称:pdd.order.detail.get 接口说明:此接口用于查询某个订单的详情信息. API文档地址:前往注册 调用该接口需要提供以下参数 ...

  9. 正则表达式快速入门二 :python re module 常用API介绍

    python regex module re 使用 reference regex module in python import re re.search re.search(regex, subj ...

  10. Kafka与RabbitMQ

    一.什么是kafka,什么是rabbit   Kafka是由Scala语言开发的一种分布式流处理框架,主要用于处理活跃的流式数据,以及大数据量的数据处理.它采用发布-订阅模型,支持消息的批量处理,数据 ...