npm+webpack+vue-cli快速上手

发表于 | 分类于
字数统计: 1.6k | 阅读时长 ≈ 6

Node.js npm

什么是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 开发环境的依赖

webpack3

webpack是什么

webpack是一个模块打包器，它将根据模块的依赖关系进行静态分析，

然后将这些模块按照指定的规则生成静态资源。

那么，我们为什么要用这个东西呢~~因为前端的包袱太多，历史遗留问题太重

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

##安装和配置
    webpack是跑在Node.js环境下的，所以确定自己有node环境。

安装方式：

　　-- npm install webpack -g  全局安装

　　-- webpack  <要打包文件>  <打包后文件>     全局这种方式进行打包

　　-- npm install webpack   在自己的项目下 npm init 后在下载webpack 这就是局部安装

　　-- node_modules/.bin/webpack <要打包文件>  <打包后文件>   项目里要打包文件是入口文件

　　-- 路径太长 太烦 可以自定义命令  在package.json 文件的 scripts下面自定义

## entry 和 output
    entry 入口文件  output 出口文件

    上面我们自定义命令的时候 命令太长了~~而且我们命令太多的时候我们需要每次都自定义多条命令~~

    我们可以把命令写在webpack.config.js文件中~~
>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

# 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，多入口以及多出口
>webpack.config.js　
entry: {
    // 多入口
    a: "./src/js/index.js",
    b: "./src/js/index2.js",
}
output: {
    // 多出口
    path: path.resolve(__dirname, 'dist'),
    filename: './js/[name].bundle.js'
}

# 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

## 目录结构：

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

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

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

　　-- node_modules  项目依赖包

　　-- static 静态资源

　　-- package.json   依赖包的json文件

其实这里面命令很多~我们在后续项目中应用到再说

vue-cli配置JQuery、bootstrap

第一步 下载安装

　　– npm install jquery

　　– npm install bootstrap

第二步 修改build/webpack.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’
}
},

修改配置文件

第三步 修改主程序的js文件 main.js

import $ from ‘jquery’
import ‘bootstrap/dist/css/bootstrap.min.css’
import ‘bootstrap/dist/js/bootstrap.min.js’

vue-cli 3.0

第一步 下载vue-cli 3.0

　　– npm install -g @vue/cli

　　– 报错 npm error 可以运行下面命令

　　　　– npm cache clean –force && npm cache verify

第二步 创建项目

　　– vue create xxxx

　　之后会出现很多选项，我们可以根据自己的习惯去选择~~

第三步 目录结构以及配置文件

　　– vue-cli3 目录更加简单

　　– 我们手动在项目根目录下创建 vue.config.js 里面写vue的配置信息

vue-cli3 配置jQuery、bootstrap

　　– 跟vue-cli2一样的配置，手动创建一个webpack.base.conf.js

感谢您的支持！学如逆水行舟，不进则退！