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
