前端面试项目-京东金融Vue组件化

目录

• 环境及知识准备
  • 运行环境
  • 构建环境
  • 编辑器
  • 基础知识
• 业务开发流程
• 工程构建
  • 构建工具（webpack）
    • 项目准备
    • 创建配置文件

环境及知识准备

运行环境

• nvm管理node版本为8.9.1

可能会用到的指令

查看已安装的node版本：nvm ls

安装指定版本的node：nvm install [版本号]

切换当前node的版本：nvm use [版本号]

• Git

  简易基础教程

• Chrome最新浏览器v62+

构建环境

• Webpack3.10.0

  Webpack中文文档

• npm scripts

  npm scripts 使用指南

• babel

  Babel中文官网

  ES6和Babel你不知道的事儿

编辑器

• VSCode
• ESLint

基础知识

• ES6

  http://es6-features.org/#Constans

• Sass

  https://sass.bootcss.com/

• Vue.js

  https://cn.vuejs.org/

业务开发流程

技术选型

1. 构建工具

   1. 构建工具有哪些

      gulp grunt webpack fis prepack rollup

   2. 为什么要构建工具

      资源压缩 静态资源替换 模块化处理 编译处理

   3. 我们用哪个构建工具

      webpack用作编译 npm scripts用作任务管理

2. MVVM框架选择

   Vue.js React.js Angular.js

3. 模块化设计

   css模块化设计

   JavaScript模块化设计

graph TD common.js --> public.js layout.js --> public.js public.js --> page1.js public.js --> page2.js util.js --> page2.js

代码维护及复用性设计的思考

需求变更

产品迭代

Bug定位

新功能开发

业务开发

测试验证

发布上线

工程构建

构建工具（webpack）

项目准备

1. 创建目录

2. 初始化

   通过npm init自动化创建package.json，有这个文件才能使用npm

3. 创建业务目录

   app>js>main,APP.vue **

   app>css>reset.scss

   app>views>index.html

创建配置文件

1. 创建配置文件

   webpack.config.js

2. 文件的具体配置

   基础配置：entry module plugins output

   进阶配置：resolve devtool devServer

   安装依赖
   npm install --save-dev clean-webpack-plugin@0.1.17 css-loader@0.28.7 html-loader@0.5.1 html-webpack-plugin@2.30.1 sass-loader@6.0.6 style-loader@0.19.1 vue@2.5.13 vue-loader@13.6.2 vue-router@3.0.1 vue-template-compiler@2.5.13 webpack@3.10.0 webpack-dev-server@2.9.7