npm、webpack、vue-cli 快速上手版

一、什么是Node.js 以及npm

– 简单的来说 Node.js 就是运行在服务端的JavaScript,基于Chrome V8 引擎的。
– npm 是Node.js 的包管理工具。

二、npm的安装和更新

– Node.js下载安装 Node.js 官网下载安装。npm自带的包管理工具。
– 查看安装版本信息:
  – node -v 查看Node.js 版本信息
  – npm -v 查看npm版本信息
– 更新npm到指定版本:
  – npm install npm@5.3.0 -g
  – npm install npm@latest -g 更新最新的稳定版本

三、npm 常用操作

之前我们用JQuery或者Bootstrap用cdn 或者直接手动下载并放入项目,而且要管理版本。有了npm,我们管理自己的依赖包以及版本更加简单。

  • 到自己项目目录下,进行以下命令:
  -- npm init -y    输入-y使用默认配置项 生成package.json文件。

  -- npm i jquery@0.0.0   简写install 为 i 下载依赖  不写@ 默认最新版本

  -- npm uninstall jquery  卸载依赖包

  -- npm update jquery   更新依赖包

  -- npm list  列出已安装的依赖

  -- npm install webpack --D 保存为开发环境依赖

  -- 老版本需要 --save 参数 现在不需要了

我们的项目目录下会生成一个 node_modules 目录,我们用npm下的包会在这个目录下。
我们所有的依赖信息放在package.json文件中,包括我们所有的依赖以及版本。
如果我们删掉 node_modules目录,可以使用 npm i 来下载所有依赖。

四、npm 常用配置项

当我们用npm init 的时候用了参数 -y,如果不用-y我们可以进行一些配置。

在我们的package.json文件中有很多配置项
  – name 项目名字 中间不能有空格只能用小写
  – version 项目版本
  – description 项目描述信息
  – main 项目的入口文件
  – scripts 指定命令的快捷方式 npm run test test是scripts里的键名 值为具体命令
  – author 作者
  – license 许可证
  – dependencies 生成环境依赖的包以及版本信息
  – devDependencies 开发环境的依赖**

五、webpack4

– webpack的新特性

1. webpack不在单独使用,需要webpack-cli
  – 全局安装 npm install webpack webpack-cli -g -D
  – 局部安装 npm install webpack webpack-cli -D

2. 增加了模式区分 (development, production)
  –webpack –mode development/production 进行模式切换
  – development 开发者模式 打包默认不压缩代码
  – production 生产者模式 上线时使用,压缩代码。 默认是这个模式

3. 固定入口目录为src,与入口默认文件index.js,打包后文件在新增的dist目录下
  – 当只有一个入口文件也就是src/index.js时,无需增加webpack.config.js

4. 多入口以及多出口

– vue-cli

1. vue-cli是官方提供的快速构建这个单页面应用的脚手架。

根据官方文档中的构件流程:
  – 前提是已经安装了node.js 否则npm都用不了
  – 1,使用npm全局安装vue-cli
      npm install -g vue-cli
  – 2, 安装完成后在自己的工作空间里
      vue init webpack vue-demo
    输入命令后进入安装阶段,需要用户输入一些信息 这里省略了…..
  – 3,切换到我们的项目目录下
      cd vue-demo
      npm run dev

2. 目录结构:

— build 里面是一些操作文件,使用npm run * 时其实执行的就是这里的文件
— config 配置文件,执行文件需要的配置信息
— src 资源文件 所有的组件以及所有的图片 都在这个文件夹下
— node_modules 项目依赖包
— static 静态资源
— package.json 依赖包的json文件

    原文作者:SlashBoyMr_wang
    原文地址: https://www.jianshu.com/p/5ffb47dbd23d
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞