vue登录部分主要是在router.js里面所有的配置路由项上面配置meta: {
requiresAuth: true
}
然后在最外层配置

router.beforeEach((to, from, next) => {
    if (to.matched.some(route => route.meta.requiresAuth)) {
        if (!getToken()) {
            next({ path: '/login' })
        } else {
            next()
        }
    } else {
        console.log(to.matched)
        next()
    }
})

登录调用接口

 async login() {
            try {
                // await等待一个异步返回的结果 如果没有await 会报user is undefined 获取不到
                let res = await http.post('/api/login', {username: this.phone, password: this.password})
                this.$store.dispatch('login', res.data.user)
                this.$toasted.success('登录成功').goAway(1500)
                wsStart()
                this.$router.replace({name: 'home'})
            } catch (error) {
                this.$toasted.error(error.message, {icon: 'error'}).goAway(2000)
            }

        }12345678910111213

这样就可以根据每个路由上面的requiresAuth属性判断没有token的时候让不让其跳转的问题 一般情况下是所有的页面在没有token的情况下就禁止跳转但是 找回密码页面 以及注册页面肯定得在没有token的情况下跳转 所以就把这两个页面的requiresAuth属性设置为false

个人理解muation 和 action的区别 muation 和 action都是改变state里面的数据 但还是 muation里面不能执行异步操作 但是 action里面可以 一般只是用muation改变数据 而比较复杂的 例如action里面可以 接收到参数后 又用这参数再次发起请求 然后在请求完成后又调用一个函数 或 别的东西 这就是异步调用

1. Vue项目开发前的准备
   首先下载node.js
   下载git
   打开码云 建项目 然后拉下来
   可以通过码云平台帮助文档来建立ssh公匙
   Vue-cli中的src文件中是项目中所有的源代码文件

2. Vue的单文件组件和路由
   当一个文件以.Vue为后缀时被称为单文件组件
   组建的模板在template中
   组件的逻辑在script中
   组件的样式在style中
   路由就是根据地址不同返回内容不同

3. Vue中如果希望css样式只对当前组件有效 需要在style标签里面加上scoped属性 但是如果当前组件的子组件是插件的话就不能更改插件
   的样式了 这个时候可以用一个标签加一个类名包裹着这个插件 例如这个类名是wrapper 插件的类名是 str 可以写成.wrapper>>>.str{样式}
   三个箭头代表样式穿透 可以对当前组件的子组件更改样式

4.                           iconfont图标在组件中的使用

• 
  

在组件中使用icon图标 在icon官网 www.iconfont.cn 选图标 下载 在文件夹中有css js iconfont.css.eot.svg.ttf.woff 是必须的
js以及其他的不是必须的
因为基本所有页面都要用 所以在main.js中引用 在页面中使用是在标签中写入class=‘iconfont’ 内容的话就打开网站选择刚才选择
的图标复制代码 注意在iconfont.css中修改下路径 就是加上./自己定义的文件夹

1.                          Vue页面中的轮播图插件

• 
  

在Vue中上github搜索vue-Awesome-swiper 这个插件可以帮我们快速构建一个轮播图
安装的时候如果想要选择版本就 npm install vue-awesome-swiper@2.6.7 --save

1. 设置宽高比例的写法是
   overflow:hidden
   width:100%
   height:0
   padding-bottom:31.25%
   这么写的意思就是高度永远是宽度的31.25% 如果直接写高度31.25%他这个相对的只是父级元素的31.25%

2.             项目初始化

• 
  

如果用Vue写移动端 在index.html在meta name=viewport里面增加 minimum-scale=1.0,maximum-scale=1.0,er-scalable=no
这样写的目的是为了防止用户用手指进行页面的缩放
然后引入 reset.css 在main.js中引入
引入border.css 专门解决移动端1像素边框的问题

1. npm install fastclick --save
   安装fastclick这个第三方模块并引入 引入之后需要在下面写fastClick.attach(document.body)
   是为了解决移动端300毫秒点击事件延迟的问题

2.              在项目中使用stylus stylus类似sass

• 
  

npm install stylus --save
npm install stylus-loader --save
然后重新启动项目 npm run start
如果一个样式被频繁引用 可以创建一个文件 然后写一个$变量名:样式 例如：red
然后在需要的style样式中引入 样式中引如样式需要用@import 路径

1.              在项目中修改路径简写

• 
  

如果一个文件被频繁引用 想要给这个文件起一个别名 就如同@=src 找到bulid下的webpack.base.conf.js目录下找resolve
例如’styles’: resolve(‘src/assets/styles’) 如果报错重新启动npm ru

1. 在父组件中引入子组件 首先 import 名称 from 路径
   然后注册 最后在div模板中使用 <名称></名称>

2.            在组建中平铺图标 图标超过一定数量可以实现轮播

• 
  

首先把 swiper组件中的 swiper标签 还有swiper-slide标签包裹着图标就可以了
但是如果直接循环数据 多余的应该在第二页的图标会被隐藏起来的
可以用computed这个计算属性把数组中的数据进行拆分 例如 当前页面只能存放八条数据 那就把数组中的数据进行拆分成两个
二维数组 二维数组的下标对应应该显示在哪一页
computed:{
pages (){
//首先定义一个空数组
const pages = []
//然后循环遍历iconList里面的数据 其中item指每项数据 index指数据下标
this.iconList.forEach((item,index)=>{
//如果数据小于八条 那么就都在第一页 大于八的在第二页
const page = Math.float(index/8)
//假设iconList里面有三个数据 index就是2 2/8就是0 就是第0页
if(!pages[page]){
pages[page] = []
}
pages[page].push[item]
})
return pages
}
}

1. 每个组件都需要请求数据 不能每个子组件发送一个 要在父组件中发送一个 然后把数据传给子组件
   把静态文件放在static文件夹中才可以被访问 可以直接在地址栏中输入路径打印出static文件中的内容
   其他的文件夹下加载不出来
   但是如果在开发环境下在ajax请求中写上本地文件的路径 转到生产环境下还需要把路径换成/api/这样是有风险的
   所以可以通过Vue中的转发机制 把所有对api的请求转发给本地路径static/mock文件夹中(这个文件夹是自定义的) 这样在开发环境下就可以使用本地的静态资源了
   具体更改需要在 config>index.js>proxyTable:{
   ‘/api’:{
   target:‘http://localhost:8080’,
   paghRewrite:{
   ‘^/api’:’/static/mock’
   }
   }
   }
   改动完配置项文件需要重启服务器
   获取到数据后传递给子组件

2. 城市选择页面的路由配置
   首先进入router文件中配置路由路径对应的路由 然后在想跳转的区域外面套一个router-link to='路径’因为这个路径跟组件配置过了所以点击的时候都会跳到对应的组件中 路由文件中只要配置过的路由 在其他组件中都可以用 在路由组件中配置的meta可以在组件中用this.$route.meta查看

3. 扩展运算符详解
   https://www.cnblogs.com/chrischjh/p/4848934.html

4. Vue中的mixins是为了复用组件 而产生的一个混合插件

5. vue-loader 是可以将Vue文件转为js模块的
   详情可参考https://blog.csdn.net/weixin_38788947/article/details/76718402

18.Vue中的tab切换
https://www.jb51.net/article/122451.htm
is就是为了解决有些元素内部不能使用自定义组件的问题 例如ul下一定要跟li
is的话 等于的就是已经注册完成的组件 :is后跟变量 这个变量就代表那个组件
20.幸运大转盘https://www.github.com/landluck/lucky_wheel s代码具体的运行我会在github上写出来
21.在写一个项目比较复杂的时候 如果里面用到的 getter muation action比较多 可以把他们几个拆分成不同的js文件夹
22.vue中封装的js如果在组件中使用 先在main.js中引入 引入完成后如果是vue的直接用vue.user() 如果不是专门给vue使用的 就把其绑在vue的原型链上以供子组件调用

23.vue里面聊天发送表情 或者评论发送表情https://github.com/jkchao/vue-emoji

作者：前端阿龙

链接：https://blog.csdn.net/weixin_42790916/article/details/83387218

来源：CSDN
著作权归作者所有，转载请联系作者获得授权，切勿私自转载。