近期接触了下前端项目，记录下学习过程。
近几年前端发展的迅猛，各种框架层出不穷，vue react angular ，各种第三方组件
原来会点js，jQuery 前后端一个人全搞定了，现在前后端分离，后端主要提供接口，前端主要负责交互
对于个人来说会更专注自己的业务，当然对于企业来说会多了一个人力成本。
编辑器
一般都使用VSCode ,下载地址 https://code.visualstudio.com/ 非常简洁，可以灵活安装一些插件。
- Vetur —— 语法高亮、智能感知、Emmet等
- EsLint—— 语法纠错
- Auto Close Tag —— 自动闭合HTML/XML标签
- Auto Rename Tag —— 自动完成另一侧标签的同步修改
- Path Intellisense —— 自动路劲补全
- HTML CSS Support —— 让 html 标签上写class 智能提示当前项目所支持的样式
- Vue 2 Snippets ——vue的语法提示
node安装
下载地址：http://nodejs.cn/download/
安装步骤很简单，只要一路“next”就可以了。
安装完成后，打开命令行工具输入命令node -v，如下图，如果出现对应版本号，就说明安装成功了。
npm包管理器，是集成在node中的，所以，直接输入npm -v就会如下图所示，显示出npm的版本信息
yarn 安装
听同事介绍说yarn比npm 快很多，也比较稳定，所以直接安装yarn
进入终端用npm安装yarn
npm install -g yarn
切换淘宝镜像（可以切换本公司的镜像）
yarn config set registry https://registry.npm.taobao.org
下载项目，并启动
//下载项目 git clone git@xxxx //安装依赖 yarn // 启动项目 yarn serve
项目的结构介绍
- public：存放静态文件
- src：源码文件，开发就在此目录下
- .gitignore：git的配置文件
- babel.config.js：babel的配置文件，在创建项目的时候采用的脚手架为bable
- package-lock.json：定义了依赖库的下载位置，保证了在项目迁移部署环境的一致性。
- package.json：定义了该项目依赖的类库
yarn和npm命令对比
初始化 yarn init npm init 安装依赖 yarn install 或者 yarn npm install pnpm install 新增依赖 yarn add element-ui npm install element-ui --save pnpm i element-ui 删除依赖 yarn remove element-ui npm uninstall element-ui --save … 更新依赖 yarn upgrade npm update pnpm update
更多命令查看：https://yarn.bootcss.com/
这样环境基本就搭建好了。
后面有时间再说说语法。
没接触之前感觉不会用，未知领域总是觉得好厉害好高深的样子，环境搭建好，了解下基本语法基本就能上手项目了。
先迈出第一步。
相关链接：