前端工程化

指的是在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。

组成：

• JS、CSS的模块化
• UI结构、样式和行为的组件化
• 目录结构、编码和接口的规范化
• 构建、部署和测试的自动化

实现方法

Vue工程化项目中可通过vue-cli来实现。

• Vue-cli：用于快速生成vue的项目模板。

Vue组件库Element

• 组件库Element

Vue路由

• Vue Router: 是vue的官方路由。

打包部署

• 打包：使用命令yarn run build运行打包，会生成dist目录
• 部署：
  • Nginx: 将静态资源部署到nginx服务器。
  • 将dist目录下的文件复制到nginx安装目录的html目录下
  • 启动nginx服务器(默认占用了80端口，可在nginx.conf中修改。netstat -ano | findStr 80命令可以查看是谁占用了80端口)
  • 访问资源：http://localhost:80