新手福音！用vue-cli3从0到1做一个完整功能手机站（一）

stefan 发布于2019-08-23 14:43 / 3310人阅读

摘要：开篇从今天起，小肆将和大家从头开始做一个完整的实战项目。关注技术放肆聊跟小肆一起行动起来在这个项目中，小肆力争做到以下几点应用目前最新的技术，并随时间更新。

开篇

从今天起，小肆将和大家从头开始做一个完整的实战项目。其中遇到的每个知识点都是我们工作中常见的，这些知识点大多在网上都能找到但却没有哪个教程能都讲得到，那就由小肆来做吧。

关注”技术放肆聊“,跟小肆一起行动起来！

在这个项目中，小肆力争做到以下几点:

应用目前最新的技术，并随时间更新。

尽量多的增加知识点。

尽量详细的讲解每个知识点，以便小伙伴们可以灵活应用到别处。

尽量做最规范的代码提交记录，以便随时可以在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点了，小肆再不发文今天就发不了了，那就之后再讲吧，记得关注小肆公众号”技术放肆聊“，跟进本课程，会让你学到你想学的。

本系列文章目录：

用vue-cli3从0到1做一个完整功能手机站（一）

从0到1开发实战手机站（二）：Git提交规范配置

从0到1使用VUE-CLI3开发实战（三）: ES6知识储备

云服务器海外云主机从0到1搭建视频通话系统从0开始到1千万用户从云服务器搬信息到新手机上从1个想法到35万活跃用户

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101031.html

从0到1开发实战手机站（二）：Git提交规范配置

摘要：既然是实战项目，我们也得在写页面之前把相关的规范配置做好。使用来执行规范全局安装下需在前面加项目目录下执行配好后，之后用到命令时，改为使用。使用效验提交信息首先还是安装依赖也会安装但自且并不和之后的版本兼容。生活不能随意过，代码也不能随意写。前一篇文章我们已经把项目搭建好了，那是不是马上就开始写页面了呀？ NO！无论在哪家公司，都会有相应的代码规范。新入职的员工往往第一步就要接受...

nanchen2251 2019-08-23 14:44 评论0 收藏0
从0到1开发实战手机站（二）：Git提交规范配置

摘要：既然是实战项目，我们也得在写页面之前把相关的规范配置做好。使用来执行规范全局安装下需在前面加项目目录下执行配好后，之后用到命令时，改为使用。使用效验提交信息首先还是安装依赖也会安装但自且并不和之后的版本兼容。生活不能随意过，代码也不能随意写。前一篇文章我们已经把项目搭建好了，那是不是马上就开始写页面了呀？ NO！无论在哪家公司，都会有相应的代码规范。新入职的员工往往第一步就要接受...

Miracle_lihb 2019-08-16 14:28 评论0 收藏0
从0到1使用VUE-CLI3开发实战(五):模块化VUEX及使用vuetify

摘要：小肆前几天发了一篇年精品开源项目库的汇总，今天小肆要使用的是在组件中排行第三的。记得点好看呦前置阅读用从到做一个完整功能手机站一从到开发实战手机站二提交规范配置从到使用开发实战三知识储备从到使用开发实战四封装小肆前几天发了一篇2019年Vue精品开源项目库的汇总，今天小肆要使用的是在UI组件中排行第三的Vuetify。 vuetify介绍 Vuetify是一个渐进式的框架，完全根据M...

fuyi501 2019-08-23 14:58 评论0 收藏0