前端工程化

1 支持环境

node.js Javascript的解释器

用于后端开发，以及作为前端工具的支持环境

2 工具

2.1 NPM 包管理工具

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

前端的一切资源都可以通过npm下载

npm install 包名        本地安装（本地项目目录）

npm install -g 包名     全局安装

npm uninstall 包名      删除本地的包

npm uninstall -g 包名   删除全局的包

项目初始化

npm init 创建一个package.json（对项目的描述，指定依赖）

npm install 包名 --save 下载包的同时，加入package.json中dependcies（项目依赖）

npm install 包名 --sav--dev 下载包的同时，加入package.json中devdependcies（开发阶段的依赖）

项目中的node.modules目录 不需要上传 ---> 运行npm install（自动安装项目所有的依赖，前提是存在package.json）

2.2 模块化工具

• webpack

• Browserify

把前端所有的资源当作模块去用（通过引入模块的方式使用）

2.3 自动化工具

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

• grunt

• gulp

• webpa

3 Vue生成器

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

3.1 安装

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

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

npm cache clean --force 安装失败，清缓存

3.2 使用

vue ui 启动GUI界面
# cmd
vue create 项目名称 自动生成项目目录

3.3 包含的东西

​ webpack

​ babel 把ES6编译成ES5

​ eslint 代码语法规范

​ TypeScript 负责把TypeScript编译成JavaScript

​ Router(vue-router) 路由

​ Vuex vue状态管理

​ CSS Pre-processors CSS预处理 （sass,less）

​ Linter / Formatter 语法检测

​ Unit Test 单元测试

​ E2E Testing 端到端测试

3.4 命令

npm run serve 临时编译，创建临时服务器 localhost:8080

npm run build 编译，生成dist目录

4 前端的集成环境 WebStorm

5 项目目录结构

|- public

​ 　　|- index.html

​　　|- assets 静态文件、图片、字体

|-src

​　　|-components 局部组件

　　　　|- Hello.vue

　　|-views 页面组件

​　　　　|- Home.vue

​　　　　|- About.vue

​　　|-main.js 入口

　　|-App.vue 总体结构组件

　　|-router.js 路由设置

　　|-store.js 状态管理

|-pageage.json

6 Vue全家桶

vue 本身

vue-router 路由

vuex 状态管理

vue-ssr 服务端渲染

element-ui vue样式组件库