npm 及vue，router，webpack安装快速起步

Love The Way You Lie 2024-04-18 23:15 76阅读 0赞

### 1.安装npm ###

官网安装 [https://nodejs.org/en/download/][https_nodejs.org_en_download]  
安装完成后控制台 node -v 出现版本信息

npm默认的仓库地址是在国外网站，速度较慢，建议大家设置到淘宝镜像。但是切换镜像是比较麻烦的。推荐一款切换镜像的工具：nrm  
命令行输入这个代表全局安装 npm install nrm -g  
然后通过`nrm ls`命令查看npm的仓库列表,带\*的就是当前选中的镜像仓库：  
通过`nrm use taobao`来指定要使用的镜像源：  
然后通过`nrm test npm`来测试速度：

注意：

*  有教程推荐大家使用cnpm命令，但是使用发现cnpm有时会有bug，不推荐。
 *  安装完成请一定要重启下电脑！！！
 *  安装完成请一定要重启下电脑！！！
 *  安装完成请一定要重启下电脑！！！

### 2.安装vue ###

先输入：`npm init -y` 进行初始化  
初始化结果显示如下即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDk3Nw_size_16_color_FFFFFF_t_70]  
安装Vue，输入命令：`npm install vue --save`  
然后就会在目录发现一个node\_modules目录，并且在下面有一个vue目录。  
node\_modules是通过npm安装的所有模块的默认位置。  
引入 vue 依赖

### 3.安装路由 vue-router ###

使用vue-router和vue可以非常方便的实现 复杂单页应用的动态路由功能。  
官网：https://router.vuejs.org/zh-cn/  
使用npm安装：`npm install vue-router --save`  
引入依赖

### 4.安装webpack ###

Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。  
中文官方网站：https://www.webpackjs.com/

##### 为什么需要打包？ #####

*  将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
 *  将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
 *  将代码打包的同时进行混淆，提高代码的安全性。

##### 学习Webpack，你需要先理解四个**核心概念**： #####

*  入口(entry)
    
    webpack打包的启点，可以有一个或多个，一般是js文件。webpack会从启点文件开始，寻找启点直接或间接依赖的其它所有的依赖，包括JS、CSS、图片资源等，作为将来打包的原始数据
 *  输出(output)
    
    出口一般包含两个属性：path和filename。用来告诉webpack打包的目标文件夹，以及文件的名称。目的地也可以有多个。
 *  加载器（loader）
    
    webpack本身只识别Js文件，如果要加载非JS文件，必须指定一些额外的加载器（loader），例如css-loader。然后将这些文件转为webpack能处理的有效模块，最后利用webpack的打包能力去处理。
 *  插件(plugins)
    
    插件可以扩展webpack的功能，让webpack不仅仅是完成打包，甚至各种更复杂的功能，或者是对打包功能进行优化、压缩，提高效率。

##### 安装 webpack #####

webpack支持全局安装和本地安装，官方推荐是本地安装，我们按照官方的来。  
输入命令：`npm install webpack webpack-cli --save-dev`  
安装完成此时，我们注意下项目中文件夹下，会有一个package.json文件。  
webpack.config.js配置文件中就是要指定上面说的四个核心概念，入口、出口、加载器、插件。

将index.html 中的js代码 全部放到main.js里去，主要是路由。

入口文件示例

// 使用es6的语法导入js模块
    import Vue from '../node_modules/vue/dist/vue';
    import VueRouter from '../node_modules/vue-router/dist/vue-router'
    import loginForm from './js/login'
    import registerForm from './js/register'
    //要用import，就必须在login.js 里添加export到处语句export default loginForm;
    Vue.use(VueRouter)
    
    // 创建VueRouter对象
    const router = new VueRouter({ 
        routes:[ // 编写多个路由规则
            { 
                path:"/login", // 请求路径
                component:loginForm // 组件名称
            },
            { path:"/register",component:registerForm},
        ]
    })
    var vm = new Vue({ 
        el:"#app",
        components:{ // 引用登录和注册组件
            loginForm,
            registerForm
        },
        router
    })

我们在webpack.config.js中添加以下内容：

module.exports={ 
        entry:'./src/main.js',  //指定打包的入口文件
    }

编写webpack.config.js，添加出口配置：

module.exports={ 
        entry:'./src/main.js',  //指定打包的入口文件
        output:{ 
            // path: 输出的目录，__dirname是相对于webpack.config.js配置文件的绝对路径
            path : __dirname+'/dist',  
            filename:'build.js'	 //输出的js文件名
        }
    }

index.html文件内容

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Loginandregister</title>
    </head>
    <body>
    <div id="app">
        
        <span><router-link to="/login">登录</router-link></span>
        <span><router-link to="/register">注册</router-link></span>
        <hr/>
        <div>
            
            <router-view></router-view>
        </div>
    </div>
    <script src="../dist/build.js"></script>
    </body>
    </html>

执行打包 npx webpack --config webpack.config.js  
打包完成在dist内有build.js文件，可以在index.html里引入即可。  
因为我们打包的只是js文件

安装 css 加载器 ，因为webpack只支持js加载  
npm install style-loader css-loader --save-dev  
此时，在package.json中能看到新安装的：安装完成在  
![在这里插入图片描述][20190913191021204.png]  
因为入口在main.js，因此css文件也要在这里引入。依然使用ES6 的模块语法：  
import ‘./css/main.css’  
在webpack.config.js添加加载器

module.exports = { 
        entry: './src/main.js',  //指定打包的入口文件
        output: { 
            path: __dirname + '/dist', // 注意：__dirname表示webpack.config.js所在目录的绝对路径
            filename: 'build.js'  //输出文件
        },
        module: { 
            rules: [
                { 
                    test: /\.css$/, // 通过正则表达式匹配所有以.css后缀的文件
                    use: [ // 要使用的加载器，这两个顺序一定不要乱
                        'style-loader',
                        'css-loader'
                    ]
                }
            ]
        }
    }

重新打包  
再次输入打包指令：\`npx webpack --config webpack.config.js

我们每次使用npm安装，都会在package.json中留下痕迹，事实上，package.json中不仅可以记录安装的内容，还可编写脚本，让我们运行命令更加快捷。

我们可以把webpack的命令编入其中：以后，如果要打包，就可以直接输入：`npm run build`即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDk3Nw_size_16_color_FFFFFF_t_70 1]

#### 打包html ####

之前打包除了html文件外其他们都被打包了，当在线上部署时，我们还得自己复制HTML到dist，然后手动添加生成的js到HTML中，这非常不友好。  
webpack中的一个插件：html-webpack-plugin，可以解决这个问题。  
1）安装插件：`npm install --save-dev html-webpack-plugin`  
需要在webpack.config.js中添加插件：

const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = { 
        entry: './src/main.js',  //指定打包的入口文件
        output: { 
            path: __dirname + '/dist',  // 注意：__dirname表示webpack.config.js所在目录的绝对路径
            filename: 'build.js'		   //输出文件
        },
        module: { 
            rules: [
                { 
                    test: /\.css$/, // 通过正则表达式匹配所有以.css后缀的文件
                    use: [ // 要使用的加载器，这两个顺序一定不要乱
                        'style-loader',
                        'css-loader'
                    ]
                }
            ]
        },
        plugins:[
            new HtmlWebpackPlugin({ 
                title: '首页',  //生成的页面标题<head><title>首页</title></head>
                filename: 'index.html', // dist目录下生成的文件名
                template: './src/index.html' // 我们原来的index.html，作为模板
            })
        ]
    }

2）将原来HTML中的引入js代码删除  
3）再次打包：`npm run build`

### 热更新web服务 ###

安装插件 npm install webpack-dev-server --save-dev  
package.json中配置script  
“scripts”: \{  
“dev”: “webpack-dev-server --inline --hot --open --port 8080 --host 127.0.0.1”  
\},  
–inline：自动刷新

–hot：热加载

–port：指定端口

–open：自动在默认浏览器打开

–host：可以指定服务器的 ip，不指定则为127.0.0.1

[https_nodejs.org_en_download]: https://nodejs.org/en/download/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDk3Nw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/329b20080436421fa449bee942944ce6.png
[20190913191021204.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/f0424c1e4fd94680bd9213cab53e3a5c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDk3Nw_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/f9532918f56c4925a8d29d8a3502d20a.png