谷粒学院day04笔记

前端开发2

1. NPM

img

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 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调用方法

    img

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

    img

    img

4. webpack 合并工具

4.1 webpack是什么

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

img

4.2 webpack安装

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

4.3 webpack具体操作

img

img

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

img

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 (入口文件)

img

5.3 程序员只需要做的事

  1. 定义请求方法和路径
  2. 写路由
  3. 页面调用
posted @ 2023-02-23 21:48  积极向上的徐先生  阅读(46)  评论(0编辑  收藏  举报