• Vue2 08 了解Vue-cli和Webpack

    8.1 Vue-cli

    Vue-cli 是官方提供的一个脚手架（提取出来的一个项目模板，比如说 ssm 的程序，我们写的时候，肯定要先搭建好 项目的模板，基本的开发环境。而这个模板就是 脚手架！哪怕是 我们的 maven 模板的程序 也算是个脚手架。）

    1. 安装 Node.js
      在这里插入图片描述

    无脑下一步即可。

    1. 控制台下 输入 npm install cnpm -g 全局安装 cnpm 即 淘宝镜像加速。

    如果出现了 如下的问题，则 要去 改 文件的内容。

    在这里插入图片描述
    在这里插入图片描述
    找到那2个文件里面的prefix -g替换为prefix --location=global

    安装完事后，可以在 npm 目录下 找到 cnpm文件夹。

    在这里插入图片描述
    3. 安装 vue-cli

    cnpm install vue-cli -g

    在这里插入图片描述
    vue list 来查看可以基于哪些模板来创建 vue 应用程序，我们通常使用 webpack。

    在这里插入图片描述
    这样的话，就代表 我们 安装的没问题，已经成功了！

    8.2 第一个 Vue-cli 程序

    1. 最好用 命令行 vue init 模板名字 项目名字
      在这里插入图片描述
      当它 提示我们 安装 vue-router 的时候 我们输入 No 再回车，然后如果出现下图的 选择，直接 选择 第一个即可。
      在这里插入图片描述
      初学者，最好 全是 No。
      在这里插入图片描述
    2. 初始化 并 运行
    cd myvue
cnpm install
cnpm run dev

    • 1
    • 2
    • 3

    如果 提示 我们修复，那咱们 就修复 npm audit fix

    在这里插入图片描述
    在这里插入图片描述

    8.2 Webpack

    Webpack 其实就是个 打包工具，就跟 那个 maven 一样。只是 应用于 前端。

    那么它打包的是啥呢？答：前端的逻辑代码，可以被称为后端语言的，也就 js 了吧。那肯定打包的是 一堆 js 文件呀。

    为什么是一堆js文件呢？ 答：因为 ES6 支持 模块化开发了，export 和 require 呀。所以 可能 会有一堆 js 文件 配合在一起使用！放到 一个 文件目录下。这个时候 webpack 其实 打包的就是这个目录。

    export：暴露/导出接口，而且 里面的 内容，只属于 当前这个 作用域。

    require 和 import 的区别

    1. 安装 Webpack
    npm install webpack -g
npm install webpack-cli -g

    • 1
    • 2

    在这里插入图片描述
    在这里插入图片描述

    1. 简单 体验下 ES6 的模块化开发

    ES6 标准认为，每个 js 文件 都是 一个 模块。只是 看我们 想不想暴露 里面的内容。

    • 比如说暴露 多个方法
    // 暴露方法

exports.hello = function (){
    document.write("
    hello ES6
    "    );
}

exports.fuck = function (){
    document.write("
    fuck ES6
    "    );
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    在这里插入图片描述

    • 这个时候 我们在需要 引入 这个 模块 的 地方引入它就可以了。
    let o = require("./hello");

o.hello();

o.fuck();

    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述

    • 使用 webpack 打包
    module.exports = {
    entry: './modules/main.js',
    output: {
        filename: "./js/bundle.js"
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    我们 要知道 一个 js 的整合包，肯定 会有一个 主 js 文件，这个 主 js 文件。就是 我们的 打包入口。

    然后打包后，我们 肯定 要使用呀，就要有一个 输出的 一个 js 文件的地方。

    若遇到以下的情况，请 参照 下面的解决方案。

    在这里插入图片描述
    在这里插入图片描述
    输入：set-ExecutionPolicy RemoteSigned 然后 输入 y 回车即可。

    在控制台位置 直接 输入 ：webpack

    在这里插入图片描述

    1. 使用 webpack 打包后的 那个 js 文件。
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<script src="./dist/js/bundle.js">script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    在这里插入图片描述
    webpack --watch ：可以实现热部署，原理是 监听变化。就是开个线程监听你是否改变了 入口位置的一些文件。

  • 相关阅读:
    网上PHP+Redis分布式锁的实现都有问题
    【PHPCUSTOM】打包PHP程序为EXE
    华为OD 机智的外卖员（100分）【java】A卷+B卷
    k8s存储：卷、持久卷、存储类
    Ubuntu乌班图安装VIM文本编辑器工具
    5.1.5 配置root用户SSH免密码登录
    YOLO物体检测-系列教程5：YOLOV3源码解读2之 模型创建函数
    Centos7上使用yum安装mysql8.x
    vue工程化开发和脚手架
    3DEXPERIENCE许可合规性：确保企业设计流程的合法与安全
  • 原文地址：https://blog.csdn.net/qq_52606908/article/details/126036908