谷粒学院day04笔记

前端开发2

1. NPM

1.1 npm是什么

1. 后端开发中，maven构建项目，管理jar依赖，联网下载依赖
2. npm类似于前端的maven，管理js依赖，联网下载js依赖

1.2 npm安装

1. nodejs会默认把npm带上 npm -v

1.3 npm具体操作

1. npm项目初始化前端项目
   npm init -y -> package.json (类似于后端的pom.xml文件)

2. npm下载js依赖

   • 配置npm镜像：https://npm.taobao.org/ 保证下载更快

   npm config set registry https://registry.npm.taobao.org
   

   • npm install 依赖名称@版本号

     package.json文件中的dependencies属性，会记录下载的依赖

     package.lock.json文件，记录下载的依赖的版本号(锁定当前版本号)

     node_modules文件夹，存放下载的依赖

3. 根据package.json文件下载依赖

   • npm install

4. 删除依赖

   • npm uninstall 依赖名称

5. 安装插件

   • 当前环境
     npm install -D 依赖名称
   • 全局安装
     npm install -g 依赖名称

2. babel

2.1 babel是什么

babel转码器，把es6转换成es5，因为es6代码浏览器兼容器很差，但开发简单，而es5代码浏览器兼容性很好，所以使用babel转码器把es6转换成es5

2.2 babel安装

1. npm install --global babel-cli
2. babel --version

2.3 babel具体操作

1. 创建es6文件，使用es6语法

       // 转码前
       // 定义数据
       let input = [1, 2, 3]
       // 将数组的每个元素 +1
       input = input.map(item => item + 1)
       console.log(input)
   

2. 创建babel配置文件.babelrc

       {
           "presets": ["env"]
           "plugins": []
       }
   

3. 安装es2015的转码器

       npm install --save-dev babel-preset-env
   

4. 执行转码

      #1.根据文件转换
       babel src/index.js -o dist/index.js
      #2.根据目录转换
       babel src -d dist
   

3. 模块化(重点)

3.1 后端模块化

后端开发接口时，=开发controller service mapper , controller注入service，service注入mapper，mapper调用数据库=，在后端中，=类与类之间=的调用称为模块化

3.2 前端模块化

=JS与JS之间=的调用称为模块化

3.3 模块化背景

德国人 vs 印度拉网线

1. 项目越来越大，代码越来越多，=维护性越来越差=，所以需要模块化，把代码分成多个模块，每个模块负责一个功能，=维护性更好=，更容易定位

3.4 es5实现模块化

1. es5 01.js 定义加减方法， 02.js调用方法

   

2. es6 01.js 定义加减方法， 02.js调用方法

   

   

4. webpack 合并工具

4.1 webpack是什么

webpack是一个前端资源加载/打包工具，可以把js、css、图片等资源进行合并，压缩，打包成一个文件，减少http请求，提高页面加载速度。

4.2 webpack安装

1. npm install --global webpack webpack-cli
2. webpack --version

4.3 webpack具体操作

5. 搭建项目前端页面开发环境

5.1 预备环境

1. 选取模版框架(不是从0开始)
   • vue-admin-template
   • vue-element-admin
   • element-admin
   • vue-element-admin-te
2. 完成依赖安装
3. 启动下载好依赖的项目

5.2 项目结构

1. 入口

   两个地方：1. index.html（无具体内容） 2. src--》main.js

2. 页面框架，基于两种技术实现出来的

   vue-admin-template模版

   1. element-ui
   2. vue

3. 目录结构

• build （构建，创建，项目编译）放项目构建的脚本文件，比如webpack配置文件

• config （配置）放项目的配置文件

  • index.js （项目的主配置文件）
  • dev.env.js （开发环境的配置文件）
    • npm install dev;
    • 接口地址，可修改访问后端接口地址；
    • useESLint: false,是否使用eslint校验代码

• src （源代码）

  • api （接口）定义调用方法
  • assets （静态资源）比如css js文件
  • components （组件）插件
  • directive （指令）
  • filters （过滤器）
  • icons （图标）默认图标
  • lang （国际化）
  • mock （模拟数据）
  • router （路由）菜单
  • store （vuex）脚本文件
  • styles （样式）
  • utils （工具）
  • views （页面）具体页面
  • App.vue （根组件）
  • main.js （入口文件）

5.3 程序员只需要做的事

1. 定义请求方法和路径
2. 写路由
3. 页面调用