用vue写项目main.js 中的一些设置

import Vue from ‘vue‘;
import $ from ‘webpack-zepto‘;
import VueRouter from ‘vue-router‘;
import filters from ‘./filters‘;
import routes from ‘./routers‘;
import Alert from ‘./libs/alert‘;
import store from ‘./vuex/user‘;
import FastClick from ‘fastclick‘;
Vue.use(VueRouter);
Vue.use(Alert);

  routes ,Vue, VueRouter,store  都是跟vue vuex 和vuerouter 有关的 $是为了进行类似jquery的操作引进的库  FastClick解决移动端点击300ms延迟的问题  直接FastClick.attach(document.body)   alert是当有error时电脑弹出的信息的设置

const router = new VueRouter({
    mode: ‘history‘,
    routes
})router.beforeEach((to, from, next) => {  if (to.matched.some((record) => {    return record.meta.requiresAuth   }) {      if (store.state.userInfo.userId) {        next()      } else {        next({          path: ‘/login‘,         query: {redirect: to.fullpath}        })       }    }else {      next()    }})

  router的初始化 mode为history 当路径改变时不会重新加载    router.beforeEach((to, from, next) {})实现的逻辑是 当record.meta.requiresAuth为true时 如果已经登陆 直接next()

如果没登陆 去登陆页面  为false时直接登陆

// 如果sessionStorage 储存了user 则通过vuex 赋值给userInfo
if (window.sessionStorage.user) {
    store.dispatch(‘setUserInfo‘, JSON.parse(window.sessionStorage.user));
}

  利用sessionStorage存储登陆信息 通过store执行setUserInfo action 分发用户信息

  

时间: 2024-08-29 15:00:07

用vue写项目main.js 中的一些设置的相关文章

LostRoutes项目日志——在main.js中添加多分辨率适配

初始的Cocos2d-JS项目中的main.js代码的内容为: /** * A brief explanation for "project.json": * Here is the content of project.json file, this is the global configuration for your game, you can modify it to customize some behavior. * The detail of each field is

Vue入口文件main.js

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /

vue3.0在main.js中引入.scss文件报错

写入.scss文件在mian.js中 import './styles/index.scss'后出现上图报错 解决方案: 在vue.config.js文件中添加以下代码 module.exports = { css: { loaderOptions: { sass: { data: `@import "@/style/index.scss";` } } } } 原文地址:https://www.cnblogs.com/jmwei/p/10196554.html

Vue工程化入口文件main.js中Vue.config.productionTip = false含义

阻止启动生产消息,常用作指令.通俗理解为消息提示的环境配置. 阻止启动生产消息 這又是什麽意思? 看下效果 (1)Vue.config.productionTip = false (2)Vue.config.productionTip = true 感覺多了一行信息 小结: 开发环境下,Vue 会提供很多警告来帮你对付常见的错误与陷阱.而在生产环境下,这些警告语句却没有用,反而会增加应用的体积.此外,有些警告检查还有一些小的运行时开销,这在生产环境模式下是可以避免的.(摘于官网说明) 大概意思应

如何在main.js中改变vuex中的值?

做登录权限控制的时候, 我通过全局路由守卫来去做权限判断,这样的话可能需要在整个项目加载的初期去做一些诸如 接口请求. vuex修改 之类的问题 其实非常简单,直接如图: 应该就没问题了 此外还可以参考一下:https://www.cnblogs.com/stella1024/p/10563091.html 研究一下vue中各文件的加载顺序 原文地址:https://www.cnblogs.com/wangtong111/p/11819153.html

JS中Date时间设置溢出问题

在采购商财务电子钱包中提供了可查询最近一个月数据的功能:该功能会使用JS Date类型计算新的日期. 这里有一点需要注意:在设置日期时,date.setMonth(m);//m is from 0 to 11. 这里如果当前日期时2015年3月31日,date.setMonth(1);得到的结果是2015年3月3日. 对于最近一个月的定义如下: 1.上月无当日的(3月31日,2月无31日.闰年2月29也在考虑范围内)最近一个月为:当月1日~当前日. 2.其余(上月有当日) 最近一个月为:上月当日

Vue main.js 文件中全局组件注册部分

main.js中修改如下: 首字母替换成大写,加上小写字母v开头. import components from './components/' //加载公共组件 Object.keys(components).forEach((key) => { var name = key.replace(/(\w)/, (v) => v.toUpperCase()) Vue.component('v'+name, components[key]) }) 原文地址:https://www.cnblogs.

实例成员:计算属性 监听属性以及vue的项目开发

6)字符串补充 双引号: "前缀" + 变量 + "后缀" 单引号: '前缀' + 变量 + '后缀' 反引号: `前缀$(变量)后缀` ps:在反引号中可以用$()来包裹变量,实现字符串的拼接 7)实例成员:计算属性 监听属性 计算属性: ? 1)计算属性其实就是vue中的方法属性,方法名可以作为属性来使用,属性值就是方法的返回值 ? 2) 在computed中声明的方法属性,不能在data中重复声明,比data中声明的属性要多出些逻辑的的地方 ? 3)方法属性自

第四篇:Vue的项目开发

安装Vue的脚手架cli环境 1)官网下载并安装node,附带npm https://nodejs.org/zh-cn/ node环境: 可以解释执行js语言 提供了npm应用商城,可以为node环境安装其他插件 提供了socket,可以提供npm命令来启动socket 2)换源:将npm欢迎为cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 3)安装vue脚手架 cnpm install -g @vue/cl