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

node.js和npm

npm的安装和更新

Node.js下载安装，npm自带的包管理工具。

查看安装版本信息：

　　node -v 查看node.js版本信息

　　npm -v 查看npm版本信息

更新npm到指定版本：

　　npm install npm@5.3.0 -g  （install可以简写为i，-g是安装为全局模式下）

　　npm i npm@latest -g 更新最新的稳定版本

npm 常用操作

进入项目目录下，进行一下的命令：

　　npm init -y 输入-y使用默认配置项，生成package.json文件。管理目前所在的文件目录

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

　　npm uninstall jQuery 卸载依赖包

　　npm update jQuery 更新依赖包

　　npm list 列出已安装的依赖

　　npm i 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里的键名   值为具体命令

webpack4

webpack的新特性

1，webpack不在单独使用，需要webpack-cli

　　全局安装 npm i webpack webpack-cli -g

　　局部安装 npm i webpack webpack-cli -D

2，增加了模式区分（development，production）

　　webpack --mode development/production 进行模式切换

　　development开发者模式 打包默认不压缩代码

　　production 生产者模式上线时使用，压缩代码。默认是这个模式

3，固定入口目录为src，与入口默认文件index.js，出口文件在新增的dist目录下main.js

　　当只有一个入口文件也就是src/index.js时，无需增加webpack.config.js

vue-cli

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

根据官方文档中的构件流程：

　　前提是已经安装了node.js否则npm都用不了

　　1，使用npm全局安装vue-cli

　　　　npm i -g vue-cli

　　2，安装完成后在自己的工作空间里

　　　　vue init webpack wjs   （这里的wjs是创建的项目名称）

　　3，切换到我们的项目目录下

　　　　cd wjs

　　　　npm run dev

目录结构：

　　build里面是一些操作文件，使用npm run * 时其实执行的就是这里的文件

　　config配置文件，执行文件需要的配置信息

　　src资源文件，所有的组件以及所有的图片都在这个文件夹下

　　node_modules 项目依赖包

　　static 静态资源

　　package.json  依赖包的json文件