入门Vue2 08 了解Vue-cli和Webpack

牟泉禹[Dark Cat]

已于 2022-07-29 13:33:14 修改

阅读量266

点赞数

分类专栏：学习笔记文章标签： webpack vue.js 前端

于 2022-07-28 17:56:15 首次发布

BY-牟泉禹/MuQuanyu

本文链接：https://blog.csdn.net/qq_52606908/article/details/126036908

版权

学习笔记专栏收录该内容

387 篇文章 11 订阅

订阅专栏

8.1 Vue-cli

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

安装 Node.js

无脑下一步即可。

控制台下输入 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 程序

最好用命令行 vue init 模板名字项目名字

当它提示我们安装 vue-router 的时候我们输入 No 再回车，然后如果出现下图的选择，直接选择第一个即可。

初学者，最好全是 No。
初始化并运行

cd myvue
cnpm install
cnpm run dev

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

在这里插入图片描述

8.2 Webpack

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

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

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

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

require 和 import 的区别

安装 Webpack

npm install webpack -g
npm install webpack-cli -g

在这里插入图片描述

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

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

比如说暴露多个方法

// 暴露方法

exports.hello = function (){
    document.write("<h1>hello ES6</h1>");
}

exports.fuck = function (){
    document.write("<h1>fuck ES6</h1>");
}

在这里插入图片描述

这个时候我们在需要引入这个模块的地方引入它就可以了。

let o = require("./hello");

o.hello();

o.fuck();

在这里插入图片描述

使用 webpack 打包

module.exports = {
    entry: './modules/main.js',
    output: {
        filename: "./js/bundle.js"
    }
}

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

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

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

在这里插入图片描述

输入：set-ExecutionPolicy RemoteSigned 然后输入 y 回车即可。

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

在这里插入图片描述

使用 webpack 打包后的那个 js 文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

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