vue练手项目推荐

大家好,这里是因为奇怪的原因稍微有点不开心的雪之樱,今天写这个博客除了想分享学完vue的api后该怎么实战,另一方面就是想想看看写写博客能不能转移注意力开心一点orz.....对了,虽然标题是叫vue,但是你把vue换成react,也都是适用的,那开始正文吧。

练手项目的意义是什么呢,如果你学完了vue的大部分API,学会了vue-cli,vuex,router这些,那么你需要一个项目来练习这些知识,并且掌握一个项目的大致开发思路,都说学以致用,这里就是致用的过程。

练手项目嘛,既然能叫项目,那肯定不能是整个demo就差不多了,至少也要整个看起来大点的东西。我现在能想到的基本途径,总结起来就3条。

第一个是,如果你是在校学生,可以参加一些校内团队,只要你们有一个想法,想开发点什么,那么只要需要一个前端,一个后台,或者一个前端和一个爬虫老哥,就能很容易一起开发一个算的上是项目的项目。我的第一个vue项目也是来源于此,一个仿微信UI的Vue单页面应用,这个虽然在现在我看来也就一般的项目,但对那时的我来说,有着非凡的意义。如果你有这个途径,请务必好好珍惜,因为团队开发和单人开发真的感觉不一样,而且.....不用操心跨域问题。

顺带一提,也许你会疑惑为什么前端非要有个后台或者是爬虫老哥来搭配,那是因为现在的开发,主要是以后台的数据为主体,前端只负责页面渲染的,也就是说,项目的重点是数据,如果没有数据,前端基本啥也干不了。当然,你问有么有以前端为重点的开发,其实有的,比如腾讯文档,这种算是前端为重心(吧)。不过技术水平要求比较高,不过也可以试试,万一成了呢233。

第二个途径是,看看实战视频,我比较推荐的是慕课网,虽然上面的网课价格都挺贵orz,但是大部分质量还是对得起价格的,你只要搜vue,就有不少开发xx应用的视频出来了,对着视频打一遍,然后自己再重新写一遍,也能达到不错的练习效果。不过如果你没钱,或者不确定这个价格值不值得,你可以直接复制课程的标题,然后百度一下,基本能找到网络上的盗版视频,不过这是下计,毕竟好视频还是要支持一下的,也许你可以找到工作再来补票233。

第三个途径是找网络上的开放API或者被爬下来的API,有哪些开放的API我就不列举了,就放两个链接吧

  1. 知乎:vue新手项目推荐
  2. vue练习API推荐

开放的API挺多的,随便选一个觉得适合自己的就OK。我在这里安利一个接口,玩安卓的开放API,这个是在线网站,如果你看过我的其他文章,或许知道我以前是写安卓的,我的第一个比较大型而完善的项目就是玩安卓app,我觉得这个接口还是不错的,大而全,而且使用简单,文档也讲人话,我觉得新手对着这个网站(接口),抄个一模一样效果的网站,也足够作为锻炼了,当然........这个接口是有跨域问题的,需要配置下本地代理。(可能需要点webpack知识)

用vue-cli新建项目,路由不要用history模式,选用hash模式,然后在项目根目录下新建一个vue.config.js文件,这个文件的配置会被webpack打包时自动加载,你可以点这里看文档,然后在里面添加下面的内容

module.exports = {
    devServer: {
        proxy : {
            "/" : {
                target : "https://wanandroid.com",
                changeOrigin: true,
                ws : true
            },
        }
    }
};

然后axios的baseURL不要配置任何东西,直接留空

import axios from "axios";
const instance  = axios.create({
    // 不要写baseURL
    baseURL : "",
    timeout : 3000
});


export default instance;

然后在代码中,直接向域名后的地址发请求,因为如果不加域名,默认是向同一个源(就是当前网站的源)发请求,举个例子

// 如果要访问这个地址,https://www.wanandroid.com/article/list/0/json
// 代码中的写法
axios.get("/article/list/0/json").then((res) => {
    console.log(res);
})
// 这条请求会先发到http://localhost:8080/article/list/0/json,然后由本地服务器转发到https://wanandroid.com/article/list/0/json

这里配置了一个代理,所有请求路径中带"/"的请求,都会被代理到https://wanandroid.com这个域上,如果你访问http:localhost:8080/user/login接口,他就会自动把请求转移到https://wanandroid.com/user/login上,但是浏览器以为你访问的是 http:localhost:8080/user/login,所以就不存在跨域问题,但是你可以在js中拿到接口数据。

注意,实际做项目时不要用"/"作为路径,因为任何的请求都是带"/"的,就可能导致意想不到的结果,但在这里为什么我会这么用呢,是因为这个项目中访问的也就只有这个域下的API,而且在hash模式下,这个proxy有一个很神奇的特点(测试了一个下午测试出来的),似乎它加载资源的逻辑是,先通过原地址访问一次资源,只有访问不到时,才会进行代理,就是说,如果http://localhost:8080/js/app.js和https://wanandroid.com/js/app.js都存在,加载的资源是 http://localhost:8080/js/app.js,而在history模式下,好像规则不大一样。但我没有测试。当然你如果实在不放心,你可以用比较特殊的路径,玩安卓的接口大多有"/json"这个路径,你就可以这样写

module.exports = {
    devServer: {
        proxy : {
            "/json" : {
                target : "https://wanandroid.com",
                changeOrigin: true,
                ws : true
            },
        }
    }
};

这样就不会有奇怪的冲突问题,不过要注意是,如果你用了history模式,路由中就不能有"/json"了,因为也有可能导致冲突而导致把资源请求代理到其他地方。

配置好的项目的百度云下载链接

链接:https://pan.baidu.com/s/12vEZiLs6OAsb7bt04Zkcpw 提取码:5dac

以上,这就是我推荐的全部方式啦,希望能帮到你。

点赞
  1. 风-陌说道:
    Google Chrome Windows 10

    大佬我想改和你交换友链
    FengMo:
    名字:FengMo
    网址:https://mo66.cn/
    头像:https://img.mo66.cn/images/2020/02/12/mo66.cn-Head-portrait.png
    简介:记录生活点滴

    1. SakuraSnow说道:
      Opera Windows Vista

      已经添加惹

发表评论

昵称和uid可以选填一个,填邮箱必填(留言回复后将会发邮件给你)
tips:输入uid可以快速获得你的昵称和头像