[TOC] ## 霸途仿慢牛cms系统 2018年8月 ### auth的认证 ``` router.beforeEach((to, from, next) => { if(!common.islogin()){ console.log('用户没有登录'); /*防止路由钩子死循环*/ if (to.path !== '/login') { next('/login') } else { next() } }else{ next(); console.log('用户已经登陆了'); }}); ``` ### vue路由返回上一页 ``` this.$router.go(-1); ``` ### 模板不生成外部标签 使用`<template>`标签 ## [知识点] 使用碰到的 ### 引入外部css文件  @符号防止报错 ``` // 现在vue已经废弃这种写法 @import"../css/index.css"; ``` ### ...运算符 ``` 上面代码中，array.push(...items)和add(...numbers)这两行，都是函数的调用，它们的都使用了扩展运算符。该运算符将一个数组，变为参数序列。 ``` ## 使用记录2 ### 定义函数库 ``` function ShopImage(){ this.config={ loadListUrl:(baseUrl+'/shop/image/loadList'), }; this.loadList=function(page){ axios.post(this.config.loadListUrl,{page:page}).then(function(response){ console.log(response); }); } } export default new ShopImage() ``` ### export 和import的用法 https://www.cnblogs.com/dupd/p/5951311.html ``` export let a=1;; //暴露普通的变量 export default {a} //定义要暴露的变量 export default x=function(){ } //暴露一个东西 , 并让他可以被任意命名 //导入普通的代码 import {a} from '' //导入普通的变量 import any12 from "./a.js" //导入 export default的内容 并可以为他取任意名字 impost 'xx.js'; //导入某个js文件 , @impost 'xx.js' //导入无视错误 ``` ## 使用记录-霸途pc商城 - 1,template里面只能有一个**最外层div** - 2,在组件里面的图片会被转化为base64,  css样式里面指定的资源会检查路径是否正确 - 3,vue程序在dev运行的时候会有路径问题 , - 4,静态文件放在**/static**目录下 asset会被视为组件依赖 - 5,vue**发布**时配置/config/index.js: assetsPublicPath的路径 , 这样才能在程序布置在子目录的时候找到资源文件 - 6,组件局部注册 ``` import PublicFooter from './PublicFooter'; components: { 'shop-public-footer':PublicFooter, 'shop-public-menu':ShopMenu } //全局注册卸载main.js里面进行注册 , ``` - 7,安装**vue-resource**插件   npm install vue-resource ``` npm install vue-resource 在main.js中 import VueResource from 'vue-resource' Vue.use(VueResource); ``` - 8,当路由参数改变, 重新加载页面数据 ``` //获取路由参数 this.$route.params.goodsid; //参数改变 ,watch: { '$route':"loadGoodsDetail" } ``` - 9, 组件变量主动渲染:[没测试] this.$set(this.$data,'goodsDetail',data.data.info); - 10, 路由参数改变后, 调用加载数据,加载完成后的监听事件, 页面数据**渲染完后**调用 ``` this.$nextTick(function () { loadGoodsDetailBanner(); }); ``` - 11, 一些东西发现 axios.js fetch.js require.js - 12: vue跳转路由 this.$router.push({path:'/goodsdetail/'+goodsId}); - 13,发布应用: npm run build - 14,代码规范报错 刷新速度慢 关闭规范检测 ``` //在项目中代开 bulid 文件夹下的 webpack.base.config.js 文件。将以下代码删掉或注销： { test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter') } }, ``` - 15, 获取dom元素上的值 元素上定义 ref='name' 憨厚程序里输入this.$refs.name.value操作dom元素 - 16,样式的作用范围 **当前页面生效** ``` <style scoped> </style> ```