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

多凡

发布于 2019-11-01 09:10:30

9530

发布于 2019-11-01 09:10:30

文章被收录于专栏：sringboot

本文链接：https://blog.csdn.net/weixin_44580977/article/details/100808338

1.安装npm

官网安装 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 进行初始化初始化结果显示如下即可

安装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">
    <!--router-link来指定跳转的路径-->
    <span><router-link to="/login">登录</router-link></span>
    <span><router-link to="/register">注册</router-link></span>
    <hr/>
    <div>
        <!--vue-router的锚点-->
        <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中能看到新安装的：安装完成在

因为入口在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即可。

打包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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019/09/13 ，如有侵权请联系 cloudcommunity@tencent.com 删除

webpack