Vue点餐系统流程

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等文件