Vue点餐系统流程

雨点打透心脏的1/2处 2022-12-15 03:48 129阅读 0赞

## Vue点餐系统流程 ##

`App.vue`组件

<template>
    <div class="app-box">
    	<router-view/>
    </div>
    </template>
    
    <script>
    //导入需要keep-alive 也就是不需要重新的组件的一级路由数组
    import keepAliveRoutes from "./router/keepAliveRoutes"
    export default { 
      name:"App",
      data(){ 
        return { 
          keepAliveRoutes
        }
      }
    }
    </script>
    <style lang="scss" >
    //样式位置
     *{ 
       margin:0;
       padding:0;
       list-style:none;
     }
     html,body,.app-box{ 
       width:100%;
       height: 100%;
     }
    </style>

Vue脚手架默认开启热模块替换

> 路由全部写在router文件下面的index,js里面

#### `router` 下面的index.js ####

import Vue from "vue";
    import VueRouter from "vue-router";
    //此处导入所有组件 格式
    import 组件名 from "路径"
    //在webpack下vue脚手架下面，它加载路由的时候要执行下面的一个代码，或者叫加载第三方插件的时候，要执行下面代码
    Vue.use(VueRouter);
    const router =new VueRouter({ 
    	mode:"hash",   //哈希模式
    	routes:[
    		{ 
    		path:"路由路径"  //因为是一级路由加“/”
    		name:"路由名"
    		component:组件名
    		}
     	]
    })

*  组件全部写在`view`文件夹里面 然后导入到vue组件

视图子组件`view`

#### `view`文件 ####

<template>
    </template>
    
    <script>
    export default { 
      name:"Home",
      data(){ 
        return { 
        }
      }
    }
    </script>
    <style lang="scss" scoped>
    //样式位置
    </style>

公共组件全部写在`components`这个文件夹当中  
写法与视图子组件一样，需要插入的地方记得使用插槽`slot`  
最重要一点每创建一个公共组件的时候，记得将他在`main.js`下面注册全局组件写法如下

import PageView(组件名) from "组件路径"  //首先导入组件
    Vue.component("page-view",PageView);//注册全局组件（注册后的标签名，组件名）将某某组件注册成一个标签

需要导入全局css时候直接在main.js 下面导入，因为首先加载的是main.js 然后才到App.vue，再到views 下面的子视图

#### `main.js` ####

文件入口，下面有常用的插件

//导入node_moudles 的vue
    import Vue from 'vue'
    //导入了一个app的文件，那么webpack一定有一个loader去处理这个文件
    import App from './App.vue'
    //导入了当前./router/index.js,只是如果你导入的是index，则可以省略后面的
    import router from './router'
    //他是vuex的东西，导入了./store/index.js
    import store from './store'
    import "./assets/css/iconfont.css"
    //如果Vue是在生产环境下面，则不提示相关的代码信息
    Vue.config.productionTip = false
    import PageView from "./components/PageView.vue"
    Vue.component("page-view", PageView)
    import PageHeader from "./components/PageHeader.vue"
    Vue.component("page-header", PageHeader)
    
    //配置axios请求工具
    import axios from "axios";
    const axiosIntance = axios.create({ 
      baseURL: "http://www.softeem.top:8080"
    });
    //配置请求拦截器
    axiosIntance.interceptors.response.use(resp => { 
      // console.log(resp);
      if (resp.data.code == 1) { 
        return Promise.resolve(resp.data)
      }
      else { 
        alert("服务器数据错误")
        return Promise.reject(resp.data)
      }
    
    }, error => { 
      alert("请求错误")
      return Promise.reject(error.response.status)
    })
    
    Vue.prototype.$http = axiosIntance;
    
    //配置表单验证插件
    import Vuerify from 'vuerify';
    Vue.use(Vuerify)
    
    
    //配置图片懒加载
    import VueLazyload from "vue-lazyload";
    /* import errorImg from "./assets/img/error.jpg" import loading from "./assets/img/loading.gif" Vue.use(VueLazyload, { preLoad: 1.3, error: errorImg, //error代表图片加载失败的时候，这里不能直接给路径，先导入下面loading也一样 loading: loading, attempt: 1 //加载失败再尝试一次 }) */
    Vue.use(VueLazyload, { 
      preLoad: 1.3,
      loading: require("./assets/img/loading.gif"),  //error代表图片加载失败的时候，这里不能直接给路径，先导入下面loading也一样
      error: require("./assets/img/error.jpg"),
      attempt: 1    //加载失败再尝试一次
    })
    
    //加载消息提示插件
    import Message from "vue-m-message";
    import 'vue-m-message/dist/index.css';
    Vue.use(Message,{ name:"msg"}) //我如果要调用这个插件，就要使用this.$msg
    
    new Vue({ 
      router,   //加载路由 
      store,    //Vuex的配置 $store取全局变量
      render: h => h(App)   //渲染，把app这个组件渲染到#app的div里面
    }).$mount('#app')

#### 定义全局变量的地方`store` ####

import Vue from 'vue'
    import Vuex from 'vuex'
    import createPersistedState from "vuex-persistedstate"
    //全局状态管理
    Vue.use(Vuex)
    
    const store= new Vuex.Store({ 
      // 全局变量
      state: { 
        imgURL:"路由前缀",
        //保存登录以后的用户信息
        userInfo:null
      },
      //锦衣卫，东厂(比喻)
      mutations: { 
        setUserInfo(state,userInfo){ 
          state.userInfo=userInfo;
        }
      },
      //近身太监
      actions: { 
        setUserInfo({ commit},userInfo){ 
          commit("setUserInfo",userInfo)
        }
      },
      modules: { 
      },
      plugins:[
        //vue中的state持久化的插件
        //默认careae里面
        createPersistedState({ 
          storage:window.sessionStorage
        })
      
      ]
    })
    export default store;

#### `components`全局组件 ####

下面常写入公共组件

#### `assets`公共文件夹 ####

里面常放入公共css，img，scss等文件