Vue学习之环境准备

Vue学习之环境准备

Node

• Node是什么

  • Node.js 就是运行在服务端的 JavaScript

• 为什么要学习Node

  • Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台
  • Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行
    Javascript的速度非常快，性能非常好
  • Vue.js可以运行在node上，实现前后端分离

• Node安装

  • 下载对应我们系统的node版本

    • https://nodejs.org/en/download/

  • 选择安装的目录，其他默认即可

  • 安装完，在命令提示符下输入

    node -v
    

    查看安装的node版本

NPM

• 什么是NPM

• npm全称Node Package Manager，他是node包管理和分发工具。其实我们可以把NPM
  理解为前端的Maven

• 为什么要学习NPM

• 通过npm 可以很方便地下载js库，管理前端工程

• NPM安装

• node.js已经集成了npm工具，在命令提示符输入 npm -v 可查看当前npm版
  本

• NPM的相关知识概念普及

• package.json文件，这个是包的配置文件，相当于maven的pom.xml
  我们之后也可以根据需要进行修改

• 本地安装和全局安装

• 区别

  • 本地安装是只做用于该目录下，全局安装是所有的都可以使用

• 本地安装（以安装express模块为例）

  • npm install express
    

• 安装好后的目录
  
  -

• node_modules文件夹用于存放下载的js库（相当于maven的本地仓库）

• package-lock.json是当 node_modules 或 package.json 发生变化时自动生成的文件。
  这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依
  赖，而忽略项目开发过程中有些依赖已经发生的更新

  • 全局安装

    • 查看全局目录所在

      • npm root ‐g
        

    • 全局安装（以jquery为例）

      • npm install jquery ‐g
        

      • 特别注意（以jquery为例）

        • 如果jquery目录下的node_modules没有了，只有package.json情况

          • 进入目录（package.json所在的目录）输入命令

          • npm install
            

            • npm会自动下载package.json中依赖的js库

  • 国内镜像（加快库的下载）

    • 为什么使用淘宝镜像

      • 有时我们使用npm下载资源会很慢，所以我们可以安装一个cnmp(淘宝镜像)来加快下载
        速度

    • 设置成淘宝镜像

      • 安装切换npm镜像的工具–nrm

        • npm install nrm -g
          

          • 

      • 然后通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库：

        • 

      • 通过nrm use taobao来指定要使用的镜像源

        • 

      • 然后通过nrm test npm来测试速度

        • 
          • 用来比较哪个仓库比较快

    • 注意

      • 为什么不使用cnpm
        • 有教程推荐大家使用cnpm命令，但是使用发现cnpm有时会有bug，不推荐
        • 安装完成请一定要重启下电脑！！！

  • npm常用的命令介绍

    • 运行工程

      • npm run dev
        

    • 编译工程

      • npm run build
        

        • 编译后的代码会放在dist文件夹
          • 

  Webpack

  • 什么是Webpack

    • Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分
      析，然后将这些模块按照指定的规则生成对应的静态资源
      • 
        • 从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静
          态文件，减少了页面的请求

  • 为什么要用webpacck

    • webpack是一个打包工具，可以帮你把你的项目这里的项目其实就是指通过模块化开发的项目 打包为简洁版的浏览器可识别的静态资源

  • webpack和npm的关系

    • webpack是npm生态中的一个模块，我们可以通过全局安装webpack来使用webpack对项目进行打包；
    • webpack的运行依赖于node的环境，没有node是不能打包的，但是webpack打包后的项目本身只是前端静态资源和后台没有关系，也就是说不依赖与node，只要有后台能力的都可以部署项目
    • npm是于Node社区中产生的，是nodejs的官方包管理工具，当你下载安装好node的时候，npm cli 就自动安装好了
    • 正是因为npm的包管理，使得项目可以模块化的开发，而模块化的开发带来的这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别，而手动处理又是非常繁琐的，这就是webpack工具存在的意义

  • web的安装

    • 全局安装

      • npm install webpack ‐g
        npm install webpack‐cli ‐g
        

      • 检测安装完成

        • 查看webpack版本

          • webpack ‐v
            

    • 安装style-loader和 css-loader

      • 原因

        • Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用
          loader 进行转换

      • 安装

        • npm install style-loader css-loader --save-dev
          

        • Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用
          loader 进行转换
        • 报错 Unexpected end of JSON input while parsing near '…engines":{“node”:">= ’ npm install
          • npm cache clean --force
          • npm install style-loader css-loader --save-dev