vue点餐系统

1 脚手架安装

npm install -g vue-cli
vue init webpack-simple pizzaApp//简易版的启动
npm install 安装所有模块

7个组件

组件名一般大写
Home.vue
Header.vue
About文件夹//涉及多级路由
Admin.vue
Login.vue
Register.vue
Menu.vue

1搭建导航页面

所有组件共用一个导航页面

1. bootstrap的css链接拷贝到title下 ？
   坑 https://blog.youkuaiyun.com/xif3681/article/details/81482227
2. 使用 bootstrap 的class模板
   快速入门 -components -navBar
   写navBar 仿照实例
   注意给Header起一个别名，
   components：{
   headerNav：Header}
   3添加svg 使用某网站的svg即可

2. 路由的使用

导入路由
安装路由
Vue.use(VueRouter)
配置路由
const routes = {
{path:’/’,component:Header},
{}
const router = new VueRouter({
routes,
mode:‘history’
})

注册路由
new Vue({
router
})
使用router-link代替a

1.路由知识

1. router-link改成div 使用tag=‘div’
2. to可以绑定:to
3. path=’*’,匹配所有路径 优先级低 redirect=‘/’
4. 路由名字
5. 路由跳转的其他方式push go(-1) replace
   Q 1：5中的区别
   Q 2: 3中redirect换成 compent：组件 ，会如何

3主页编写

1. 样式