一.前端工程化

1.支持环境 node.js

node.js是JavaScript的解释器

用于后端大的开发,作为前端工具的支持环境

2.NPM包管理工具

包管理工具

集成在node.js中,不需要单独下载

前端的一切资源都可以通过npm下载,包括前端工具,前端资源

npm install 包名			本地安装(本项目目录)	资源类

npm install -g  包名		全局安装(命令行工具)
注:install可以简写为i

npm uninstall 包名		本地删除
npm uninstall -g 包名		全局删除

项目初始化
npm init
创建一个package.json  里面是对项目的描述,指定

项目中的node.moudules 目录 不需要上传
直接运行npm install  自动安装项目所有的依赖(前提要有package.json)

npm install 包 --save 下载包的同时，加入到package.json中的 `dependencies`
npm install 包 --save-dev 下载包的同时，加入到package.json中的 `devDependencies`  开发阶段的依赖

3 模块化工具

• webpack
• Browserify

把前端所有的资源当做模块，向引入模块一样去使用

4 自动化工具

集成各种应用：代码压缩、图片压缩、编译sass…

• grunt
• gulp
• webpack

二. Vue生成器

集成了webpack、以及其他各种需要的工具

2.1 安装

npm install -g @vue/cli   安装3.x
npm install -g vue/cli  安装的2.x

2.2 使用

vue create 项目名称   自动生成项目的目录

2.3 包含的东西

webpack  
babel   把ES6编译成ES5
eslint  代码语法规范
TypeScript   负责把TypeScript编译成JavaScript
Router(vue-router Vue全家桶成员)   路由
Vuex(Vue全家桶成员)     vue状态管理 
CSS Pre-processors    CSS预处理 会让你再次选择器(SASS、LESS、Stylus...)
Linter / Formatter   语法检查
Unit Testing      单元测试
E2E Testing      端到端测试

2.4 命令

npm run serve  临时编译，创建临时服务器  loacalhost:8080
npm run build  编译，生成dist目录

三. 前端的集成环境 WebStorm

四.项目目录结构

|- node.modules
|- public
	|- index.html
	|- assess				静态文件,图片,字体
|- src
	|- components			普通组件(局部)
		|- HelloWorld.vue
	|- views				页面组件
		|- Home.vue
		|- About.vue
	|- main.js				入口文件
	|- App.vue				总体结构组件
	|- router.js			路由设置
	|- store.js				状态管理
|- pageage.json

Vue全家桶

vue				本身
vue-router		路由
vuex			状态管理
vue-ssr			服务端渲染
element-ui 		vue样式组件库