新手福音!用vue-cli3从0到1做一个完整功能手机站(一)

53次阅读

共计 1426 个字符,预计需要花费 4 分钟才能阅读完成。

开篇
从今天起,小肆将和大家从头开始做一个完整的实战项目。其中遇到的每个知识点都是我们工作中常见的,这些知识点大多在网上都能找到但却没有哪个教程能都讲得到,那就由小肆来做吧。
关注”技术放肆聊“, 跟小肆一起行动起来!
在这个项目中,小肆力争做到以下几点:

应用目前最新的技术,并随时间更新。
尽量多的增加知识点。
尽量详细的讲解每个知识点,以便小伙伴们可以灵活应用到别处。
尽量做最规范的代码提交记录,以便随时可以在 github 上查询变更。
完全使用实际工作中模式。
本项目后端接口采用成熟在线 APP 的测试服务器接口。
对哪个知识点没有清楚理解,随时可以来撩我。

涉及功能

初始化:脚手架构建、git 仓库配置、git 提交规范配置、手机自适应配置。。。
用户:登录、注册、找回密码、第三方登录、个人中心。。。
新闻:滚动导航、幻灯片、文章列表、文章详情、图片懒加载。。。
课程:音频播放、视频播放、自定义播放器、播放列表。。。
社区:发帖、评论、点赞、收藏。。。
支付:虚拟货币、微信支付、支付宝支付。。
直播:视频流、礼物、弹幕。。。

功能包括以上功能又不仅限于以上功能,这个系列每篇文章都会把涉及到的功能点详细介绍清楚,并会同步到本篇。
小肆的代码并不一定是最优的解决方案,如果你有更好的方法,非常期望能与小肆联系,我会在文章中发出并标明出处
多说无益,行动起来吧!
项目初始化
本项目使用最新版本的 vue-cli 3.3 搭建。
安装 vue-cli3
sudo npm -g install @vue/cli
小肆用的 mac,所以需要添加 sudo 获取 root 权限来全局安装,win 用户可以不加 sudo。
安装成功后输入 vue - V 你会看到你安装的版本号。
创建项目
vue creat mweb 输入命令后选择手动选择功能(Manually select features) 或会看到如下界面:
在这里小肆全部选择了,选择 TS 是因为 TS 是 JS 的超集,所以初始化的时候小肆选了 TS,不过前期还是会用 JS 讲解,以便未学习 TS 的伙伴们学习,后期会全部使用 TS 重构。
这里的每个知识点之后项目实际使用我都会慢慢讲解。上图是安装过程我对每一项的选择。
最后保存了配置项目就开始安装依赖了。初始化成功后会显示如下界面。

项目预览
命令行输入 cd mweb 进入项目目录。
之后输入启动本地服务器 npm run serve
成功后能看到如下界面。
另外 vue-cli3 提供了图形化配置界面。命令行输入 vue ui 即可启动。
github 配置
项目初始化后已经有 git 的初始化配置了,这时候我们只需要把项目和 github 的远程仓库做连接就可以了。
我们首先在 github 上新建项目,得到项目地址后命令行输入以下命令:git remote add origin git@github.com:Feleti/mweb.git 因为我配置了 ssh key 所以地址以 git 开头,如果未配置的使用 https 开到的地址。
git 的使用之后我会单独出一篇文章讲解,这里就不详述了。
上传代码到远程分支:git push –set-upstream origin master 首次上传新分支输入以上命令,不是的话只要输入 git push 就可以了。
上传成功后可以在 github 上看到了。
小结
今天的内容有点少,本来计划把项目前期配置的内容都放在这篇,可无奈啊,小肆今天回家晚啦,又有点别的事耽误了,现在快 12 点了,小肆再不发文今天就发不了了,那就之后再讲吧,记得关注小肆公众号”技术放肆聊“,跟进本课程,会让你学到你想学的。

正文完
 0