前端开发一份学习线路图
一．常用开发工具介绍 推荐使用 VSCode
1.WebStorm
2.HbuilderX
3.VSCode
4.Sublime Text
二．HTML+CSS 部分
1. HTML 是一种标记语言，能够实现 Web 页面并在浏览器中显示。
2. CSS 是网页外观的重要一点，CSS 可以帮助把网页外观做得更加美观。
三．HTML5+CSS3
HTML+CSS进阶版
四．JavaScript
五．Vue
1.官方文档：http://vuejs.org/v2/guide/syntax.html
2.中文文档: https://cn.vuejs.org/v2/guide/syntax.html
六．Vue 脚手架
1.Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。
2.命令行操作步骤
•npm install -g @vue/cli 安装3.x版本的vue脚手架
•vue -V 测试是否安装成功
•vue create 项目名 （注意不要用中文和特殊字符）
•cd 项目名
•npm run serve
七．Node
1.nodejs安装和环境配置
2.官方下载地址: https://nodejs.org/en/ 下载LTS版本（长期稳定版本）
3.测试是否安装成功
node -v 查看node的版本
npm -v 查看npm的版本(新版的node安装自带安装npm)
八．Git
1.最详细图文安装教程 https://www.cnblogs.com/52xiaobu/p/14083995.html
2.git clone 远端地址
3.切换到开发分支进行开发
4.git pull 拉取远端代码
5.git push 提交本地代码
九．项目开发流程
1.git clone 远端代码
当我们克隆一个新的项目到本地时，需要执行 npm install 命令来安装项目所需的依赖文件。当执行该命令时，就会根据 package.json 文件中的配置信息来自动下载所需的模块，也就是配置项目所需的运行和开发环境。
2.启动项目 npm run serve
十. 项目结构
- node_modules：npm 加载的项目所需要的各种依赖模块。
- src：这里是我们开发的主要目录（源码），基本上要做的事情都在这个目录里面，里面包含了几个目录及文件：
1、assets:放置一些图片(会根据图片大小分类进行base64命名还是其他方式命名)，如logo等；
2、components:目录里放的是一个个的组件文件；
3、App.vue：项目入口组件（跟组件），我们也可以将组件写这里，而不使用components目录。主要作用就是将我们自己定义的组件通过它与页面建立联系进行渲染，这里面的必不可少。
4、main.js ：项目的核心文件（整个项目的入口js）引入依赖包、默认页面样式等（项目运行后会在index.html中形成一个app.js文件）。
5、router/index.js：配置路由的地方 - static：静态资源目录(会原分不动的对文件进行处理)，如图片、字体等。
- config：配置路径、端口号等一些信息，我们刚开始学习的时候选择默认配置。
- package.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。（大概版本）
package-lock.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。（具体版本）
README.md：项目的说明文件。
webpack.config.js：webpack的配置文件，例：把.vue的文件打包成浏览器能读懂的文件。
.babelrc:是检测es6语法的配置文件，例：适配哪些浏览器的限制
.gitignore:上传到服务器忽略哪些文件的配置（比如模拟本地数据mock不让他在get提交/打包上线的时候忽略不使用可在这里配置）
.postcssrc.js:前缀的配置 （css转化的配置）
.editorconfig:对代码进行规范，例：root是否进行检测，代码尾部是否换行，缩行前面几个空格...（建议定义这个规范）
.eslintrc.js:配置eslint语法规则（在这里面的rules属性中配置让哪个语法规则失效）
.eslintignore:忽略eslint对项目某些文件的语法规则的检查
十一. 页面组件库 Ant Design of Vue ：https://1x.antdv.com/docs/vue/introduce-cn/
简单记录工作中项目用到的东西，小白入门也不是一天两天的事，具体内容还是要花时间详细去学习！
