vue第五天的路由脚手架简单项目的学习

vue create 03.manager
cnpm i bootstrap --save
npm install --save jquery popper.js
npm run serve

image.png

image.png

image.png

image.png

vue路由的步骤

1, vue create 03.manager

3 cnpm i bootstrap --save

2 npm install --save jquery popper.js

4 npm run serve

5,整合路由 生态系统-

cnpm install vue-router --save

1,安装路由包

在vue的官网

image.png

image.png

2导入包 在main.js中导入包

image.png

3,

image.png

4,模板里面放

image.png

5,

image.png

6

image.png

7,A%

image.png

image.png

8,moni

完整的步骤

1,在bootstrap组件里面找导航栏和左边的列表组

导航栏去掉不用的,下面用栅格做,

2,先写路由

image.png

3,写完会报错

image.png

3,安装路由安装的网址https://router.vuejs.org/installation.html

image.png

4,安装路由的命令在终端里面网速慢可以加个c

npm install vue-router

cnpm install vue-router

安装完成

image.png

5,引入到main,.js中

如果在工程化中使用就要引入后面的文件

image.png

image.png

6报错更多

image.png

7接着写下面的部分

image.png

错误解除

image.png

8写组件

image.png

9写路由的规则

image.png

image.png

10路由的规则好了

image.png

11整体结构

image.png

12开始增删改查的步骤json-server

一个命令解决增删改查的步骤,不需要数据库,数据直接存在于json文件里
官网:https://github.com/typicode/json-server
某个人写的博客教程:https://www.cnblogs.com/fly_dragon/p/9150732.html

13装包

image.png

命令:
npm install -g json-server
如果网速慢或者用下面命令
cnpm install -g json-server
启动json服务器

image.png

新建一个db,json文件
db.json文件的内容

{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}

启动json服务器在新建的db.json文件夹下面右键打开终端
json-server --watch db.json

image.png

自己修改一些数据

image.png

image.png

在postmen中http://localhost:3000/hreo

image.png