和小白一起学习Vue—Vue学习总结篇

Vue学习总结

• 作者：小白的蟒蛇
• 小白撰写，不喜勿喷，错误之处大神请指正。

一、基础学习

1. 基本废话

• vue的学习要有最基本的前端知识基础。html、css、javascript。学习基础，不需要精深，学习基础基础基础。博主用了三天不到的时间简单过了一遍，以后学习中遇到不会的就再查文档，遇到不会的再查文档，不断下去自然而然就会了。下面提供一些学习资料直通车，可以先按照直通车的内容敲一遍代码，简单了解后直接进入Vue的学习。

• 基础学习只需要了解vue的基本语法，最好是有Es6的基础，因为vue结合Es6语法写代码更加行云流，写出的代码更加简洁明朗。

2. 路线和资料推荐

• 学习路线推荐

  • 第一条路线，也是网上公认推荐的路线：新手向：Vue 2.0 的建议学习顺序
  • 第二条路线，是相对有前端基础的：Vue学习看这篇就够
    • 这个帖子写的很全，可以快速入门，就叫官方文档的提炼版吧

• 学习资料直通车(以下是博主自己曾经学过所以推荐的)

  • Html学习直通车：Html学习
  • Css学习直通车：Css学习
  • JaveScript学习直通车：JaveScript学习
  • Es6学习直通车：Es6学习
    • 中间遇到难的不懂的就跳过，日后学习会慢慢懂的，主要是过一遍了解一下有哪些语法内容
    • 有些内容实践中不是很常用，自己看看觉得不常用的可以不学
    • 里面每章的最后会给出常用实例，这个是重点
  • Vue官方学习文档直通车：Vue.js官方文档学习
    • 遇到看不懂的就把代码敲一遍，很重要
  • Vue网易云课堂免费视频学习直通车：Vue2.0小白入门教程(最全)
    • 看视频学习，可以边看视频边看官方文档，相互结合学习的更加透彻
    • 给视频作者点个赞，视频音质和画面都很不错，我最怕就是好教程没有清音质和好画面

二、学习过程总结

1. 基本废话

• 学完上面的所有资料，就具备了利用Vue自己开发前端的能力了，写一个单页面应用程序（如：小游戏，我自己写了个魔性的点击方块，游戏鸡肋，但是对自己学习的总结）
• 学完上面的所有资料同时具备了前后端数据交互的能力了，接下来就是我在学习过程中遇到各种命令的汇总，一方面方便我日后查寻，一方面分享出来

2. 学习过程记录

• 这个过程是从脚手架直接进来的，小白会看不懂，但是可以跟着造轮子，一步一步的输入命令，体验Vue的HelloWorld，下面的记录过程在网易云那个视频里面都是有的，不喜欢看我这个就去看视频，从课时18开始。

1. 环境确认

• 博主用的Mac所以以下涉及的命令都是Mac命令，如果是Windows用户可能就需要自己看帖子了，不过有些命令是通用的，我会简单说明下，因为同为小白，尽可能的帮助小白。
• 保证安装了Node.js
  • 检查电脑是否安装：命令行 node -v
    • 命令Mac、Windows、Linux通用
    • 命令的意思是查看node.js的版本号
    • node.js官网直通车：node.js下载直通车
• 保证安装了npm
  • 检查电脑是否安装： 命令行npm -v
    • 命令Mac、Windows、Linux通用
    • 命令的意思是查看npm的版本号
• 博主用的是WebStrom集成编辑器
  • 下载链接：WebStrom

2. 开始搭架子

• 以下步骤是Mac电脑上面的步骤，windows仿照着来吧，我也不是很懂

1. sudo npm install -g @vue/cli

• 命令的意思是管理员权限全局安装Vue CLI 3，需要输入电脑登录密码
• 安装成功后可以通过vue -V来测试是否安装成功

1. 项目文件夹准备

• 桌面新建文件夹命名myproject
  • 这个文件夹是我用来写临时代码、存放临时项目的，有固定存代码文件夹或者项目文件夹的小伙伴可以不用新建这个文件夹
  • cd [刚才新建的文件夹地址]
    • 命令的意思是切换到这个新建的文件夹目录下
  • mkdir [你准备创建的前端项目名]
    • 命令的意思是创建一个文件夹
    • 我这边的项目名是my-project所以命令是mkdir my-project

1. 安装依赖
   • cd [刚才新建的项目文件夹]
     • 即cd my-project
   • vue init webpack vue-playlist
     • 创建一个基于webpack模板的新项目
     • 命令输入后会问你一些问题，第六个问题Use EsLint *****这个问题和之后的问题都选no就行
   • cd vue-playlist
     • 打开vue-playlist文件夹
   • npm install
     • 安装项目所需要的依赖
   • npm run dev
     • 运行这个项目
   • 执行结束后会提示你端口信息，浏览器打开就可以直接访问这个脚手架搭建的前端项目了。

三、开源组件推荐

• Element: element

• Avue: Avue

四、开源项目推荐

• 开源项目多看看，这是对学习知识应用。

1. 微信小程序商城（Java版）

• 微信小程序商城（Java版）
  • 师傅写的，支持一下，哈哈

2. Avue-cli

• Avue-cli
  • 这个项目很舒坦

作者：小白的蟒蛇