npm, webpack, vue-cli, vue-x, axios

1,什么是node.js,以及npm

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

2,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 来下载所有依赖.

3,npm常用配置

当我们用npm init的时候用了参数-y, 如果不用-y我们可以进行一些配置,在我们的package.json文件中有很多配置项

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

4,webpack3

webpack:是一个模块打包器,他将根据模块的依赖关系静态分析,然后将这些模块按照指定的规则生产成静态资源,

4.1,安装和配置

webpack是跑在Node.js环境下的,所以确定有node环境

安装方式:

npm install webpack- g 全局安装
webpack<要打包文件><打包后文件>全局这种方式进行打包
npm install webpack 在自己的项目下npm init后再下载webpack这就是局部安装
node_modules/.bin/webpack<要打包文件><打包后文件>项目里要打包文件是入口文件
路径太长太烦可以自定义命令在package.json中文件的scripts下面定义

4.2,entry和output

entry是入口文件,output是出口文件,我们可以把命令写在webpack.config.js中

module.export = {
    // 所有的入口文件
    entry: {
         home: './main.js', 
         login: './login.js',
    }, 
    // 出口文件  
    output: {
         filename: '[name].bundle.js',
         path: __dirname + '/dist',
    }       
}
// backage.json  下的scripts
scripts: {
     "pack": "node_moudles/.bin/webpack --watch"
}

//  运行命令
npm  run pack

5,webpack4

webpack的新特性

5.1,webpack不在单独使用,需要webpack-cli

全局安装 npm install webpack webpack-cli-g-D
局部安装 npm install webpack webpack-cli- D

5.2,增加区分模式(development, production)

webpack mode development/production进行模式切换
development开发者模式,打包默认不压缩代码
production 生产者模式上线时使用,压缩代码,默认是这个模式

5.3,固定入口目录为src,与入口默认文件index.js,打包后文件在新增的dist目录下

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

6,Vue-cli

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

6.1,目录结构

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

7,Vue-cli配置jquery,bootstrap

7.1,下载安装

npm install jquery
npm install bootstrap

7.2,修改build/webpackage.base.conf.js

const webpack = require('webpack')
// 在module.exports里添加插件
plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery",
      // Popper: ['popper.js', 'default']
    })
],
//  *******下面是如果手动下载bootstrap用的*******
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      // 如果是手动下载的bootstrap需要添加这个配置
      // 'assets': path.resolve(__dirname, '../src/assets'),
      // 'jquery': 'jquery/src/jquery'
    }
  },

View Code