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