1 简介

vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板；

2 vue-cli使用

2.1 安装node.js

官网node.js
安装国内node源：npm install cnpm -g
安装vue-cli，使用命令：cnpm install vue-cli -g

2.2 创建工程

随便一个目录创建文件夹：Vue
执行：vue init webpack demo01

按照提示依次输入：

? Project name demo01
? Project description A Vue.js project
? Author lwj
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no

   vue-cli · Generated "demo01".

# Project initialization finished!
# ========================

To get started:

  cd demo01
  npm install (or if using yarn: yarn)
  npm run dev
  
Documentation can be found at https://vuejs-templates.github.io/webpack

进入工程目录：cd demo01
安装所有依赖：npm install
可能需要修复：npm audit fix

2.3 运行项目

使用命令运行项目：npm run dev，访问localhost:8080

3 Webpack

3.1 前端发展流程

Webpack是一个现代JavaScript应用程序的静态模块打包器；
最早的导入js包：

<script src="m1.js"></script>
<script src="m2.js"></script>
<script src="m3.js"></script>

CommonsJS：
服务器端的NodeJS遵循CommonsJS规范，使用require来同步其他模块；
ES6 模块

import "jquery"
export function do(){}
moudle "localModule"{}

3.2 安装webpack

由于很多浏览器还不支持ES6规范，所以可以使用webpack把各种资源都当做模块来处理和使用，打包成相应的支持的版本；
安装webpack：npm install webpack -g
安装webpack-cli：npm install webpack-cli -g

3.3 使用webpack

3.3.1 新建一个工程目录

webpackTest/
├── index.html
├── modules
│   ├── hello.js
│   └── main.js
└── webpack.config.js

3.3.2 在modules下面编写js代码

创建hello.js

//暴露一个方法
exports.sayHi = function (){
    document.write("<h1>你好啊！</h1>");
};

这里定义的是一些组件的模块化代码，一般用来供别人使用，也是一些别人编写好的组件，他们使用exports暴露给使用者，使用者。

创建main.js使用组件：

var hello = require("./hello");
hello.sayHi();

这里是使用者使用别人暴露的模块，使用require拿到别人的包，然后.可以直接使用别人的组件；

3.3.3 构建打包

当使用了别人的包之后，需要把打包构建成一个可以用的一个js文件，创建webpack.config.js配置文件：

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

固定的写法，需要导出哪个组合好的js文件，并且导出到哪个位置；
在根目录下面使用命令：webpack，打包生成./dist/js/bundle.js

(()=>{var r={645:(r,t)=>{t.sayHi=function(){document.write("<h1>你好啊！</h1>")}}},t={};(fu……

生成的是一串看不懂的代码。

3.3.4 在html中使用打包生成的js代码

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

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

</body>
</html>

可以直接使用bundle.js到html文件中；

原文链接：https://blog.csdn.net/weixin_44215363/article/details/111597912