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文件

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容