专栏首页sringbootnpm 及vue,router,webpack安装 快速起步

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接: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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 开发文档 web.xml基本配置

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    多凡
  • SpringBoot整合mybatis一直失败差不到数据,解决方案

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    多凡
  • python 从subprocess运行的子进程中实时获取输出

    shell =false 意思是command 使用的不是linux shell指令,如果要用shell 指令如ls 要将false 变成true, 通过指...

    多凡
  • VUE-webpack

    Webpack 是一个前端资源的打包工具,它可以将js、image、css等资源当成一个模块进行打包。

    cwl_java
  • WebPack 模块化打包工具(上)

    本篇博文的内容根据 入门 Webpack,看这篇就够了 该篇文章总结而来,其代码、模块示例、功能拓展部分均有所删减,若是想了解更多关于 WebPack 的详细内...

    Nian糕
  • 构建打包工具Rollup.js入门指南

    最近在看Vue源码的时候发现一个新的打包工具Rollup.js,之前没有听说过这个工具,也不了解Rollup.js相比于常用的打包工具webpack有什么异同和...

    用户1462769
  • Webpack00-环境搭建

    https://jspang.com/posts/2017/09/16/webpack3.html#%E7%AC%AC17%E8%8A%82%EF%BC%9A%...

    专注APP开发
  • webpack2的一些使用入门

    windseek
  • Webpack 10分钟入门

    可以说现在但凡开发Single page application,webpack是一个不可或缺的工具。

    Jerry Wang
  • 前沿 | 生物神经网络与机器学习的碰撞,Nature论文提出DNA试管网络识别手写数字

    科学家们已经从 DNA 中开发出一种人工神经网络,能够识别嘈杂和高度复杂的分子信息。

    机器之心

扫码关注云+社区

领取腾讯云代金券