html5 vue开发json.server/vue.cli/vuerouter安装方法

Json.serve/vue.cli是什么？

Json.server:

当后端没有接口的时候，Json.server工具会帮我们自动生成一个后端接口

vue.cli是一个工程化开发帮助我们管理项目的工具：
例如：webpack环境中开发vue

vuerouter.是什么？

vuerouter是一个帮助vue建立组件和网页之间的映射：
简单的说就是给不同的组件在网页中加链接

例如：/#input/,/#thead/等网页路径

---

前言：

提示：Vue开发中这两样组件是必不可少的，当然在这之前我们的yarn和npm基于node的安装也是不不可少的

1.Vuecli的安装

命令如下（示例）：yarn global add @vue/cli 或者 npm i @vue/cli -g

创建项目：vue create Project项目名

运行使用：yarn serve 或者 npm run serve

2.Json-server的安装

命令如下（示例）：yarn global add json-server 或者 npm i json-server -g

建立根文件目录：新建一个db目录，将资料index.json移入到db目录

运行使用：进入db目录执行命令启动后端接口服务 json-server index.json

访问接口：http://localhost:3000/cart

3.Vuerouter的安装

命令如下（下载）：yarn add  vue-router@3.6ue.5

引入代码

import VueRouter from 'vue-router'

//install
Vue.use(VueRouter)
//create
const router=new Vue(VueRouter)
 //inject
new Vue({
render:h => h(App),
router,
}).$mount('#app')

注：vue router需要在项目路径下进行下载也就是vue.config.js文件目录下进行下载和安装

引入需要在main.js下引入