文章目录

vue-cli脚手架
- 需要的环境安装
npm命令解释
创建一个 vue-cli 应用程序
webpack的学习与使用(vue项目的执行流程)

vue-cli脚手架

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

vue-cli 会预先定义好目录结构以及基础代码。（类似于创建maven项目的时候生成的一个项目目录）可以使开发更快速！

vue-cli你就可以想象成maven就可以！它有一下功能：

统一的目录结构
本地调试
热部署
单元测试
集成打包环境

需要的环境安装

Node.js：https://nodejs.org/en/（无脑下一步即可，它会自动加载环境变量）
Git：https://git-scm.com/downloads

镜像：https://npm.taobao.org/mirrors/git-for-windows/

确认安装成功：

cmd中输入 npm -v，查看是否能够成功打印出版本号
cmd中输入 node -v，查看是否能够打印出版本号

npm是包管理工具，类似于pip。

添加淘宝镜像（cnpm）

# -g 是全局安装的意思
npm install cnpm -g

安装后的东西的存储地址： C:\Users\ASUS-PC\AppData\Roaming\npm\node_modules

但是我改了安装路径了，所以我的安装在：E:\NodeJs\node_global\node_modules

安装vue-cli：

cnpm install vue-cli -g

# 测试是否安装成功
# 查看可以基于哪些模板创建 vue 应用程序，
vue list

npm命令解释

【npm install moduleName】：安装模块到项目目录下
【npm install -g moduleName】：【-g】的意思是将模块安装到全局，具体在哪个磁盘上要看你配置文件中的安装路径。使用命令【npm config prefix】查看
【npm install --save moduleName】：【–save】的意思是将模块安装到项目目录下，并在package文件中的 dependencies 节点写入依赖。【-S】是它的缩写
【npm install -save-dev moduleName】：【–save-dev】的意思是将模块安装到项目目录下，并在 package 文件的 devDependencies 节点写入依赖，【-D】是它的缩写

创建一个 vue-cli 应用程序

使用vue-cli四个步骤创建要给vue项目

1.创建一个vue项目。随便捡一个空文件夹作为项目目录。例如我在这里建一个目录：

D:\编程项目\study\VueStudy\vue-cli-study

2.创建一个基于webpack模板的vue应用程序：（使用cmd执行命令）

# myvue 是项目名称
vue init webpack myvue

然后一路选择no即可！
在这里插入图片描述

安装失败请看这篇博客：https://www.cnblogs.com/taiyanghua0522/p/6043942.html

就是先还原初始HOST试一试

然后再执行vue init webpack myvue 命令。如下截图：
在这里插入图片描述

这样你的项目目录下就会有一个myvue的项目了！

3.依赖导入

# 进入myvue项目目录
cd myvue

# 安装依赖环境，这个是根据myvue项目目录中的package.json进行依赖安装的，所以上面要进入myvue
npm install

执行完成后目录会多很多依赖！

4.启动项目

# 运行项目，启动的是nodejs的服务器。（并不是tomcat服务器）
npm run dev

然后再通过IDEA进行打开即可进行开发。

从上述步骤可以看出它其实是类似于maven构建项目的，只不过maven是自动构建目录、自动导入依赖，不用输入指令罢了。

源码的入口：myvue/src/main.js

程序的主入口：index.html（它连接这main.js中的vue对象） 主页面不变

webpack的学习与使用(vue项目的执行流程)

webpack是一个JavaScript应用程序，作用是进行静态模块打包。当webpack进行打包时，它会递归的构建一个依赖关系图（就是谁依赖了谁，父子关系是怎样的），其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个bundle

webpack的作用：用于将ES6规范的代码降级成ES5规范的代码。原因是：现在大部分浏览器不支持ES6！

1.安装一个webpack

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

检查是否安装成功： 使用检查版本号的方式

webpack -v
wevpack-cli -v

webpack是用来打包的，所以我们在项目目录中可以在【build】目录中看到一个叫【webpack.base.config.js】的文件，这个文件是用来配置webpack这个包的。（换句话说就是webpack只是提供了相关的批处理程序，但是这个批处理程序需要你人为的配置一些信息进行对应的流程）

在这里我们通过自己写一个【webpack.config.js】来解读vue-cli创建的【webpack.base.config.js】文件！

2.解读webpack.config.js文件

entry：入口文件，指定webpack用哪个文件作为项目的入口
output：输出，指定webpack把处理完的文件放到指定的目录
module：模块，将指定的模块打进入
plungins：插件，如：热更新、代码重用等。将指定的插件打进去
resolve：设置路径指向
watch：监听，用于设置文件改动后直接打包

暴露一个方法

在module/hello.js文件中暴露一个方法

// 暴露一个方法，这个方法是hello.js中方法。如果其他地方想用必须引用
// 但是根据Commentjs规范中的原则，只有暴露的东西才能在外面引用
exports.sayHi = function () {
    
    
    document.write("<h1>Hello!</h1>")
};

引入一个模块

在module/main.js中引入一个模块（就是js脚本）

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

通过一个【script】标签也可以进行js的引用。但是这种方法并不好，因为每个js文件中的所有的全局变量、函数都会放在window对象中，这样多个文件放在一起会导致重名出现冲突！

但是使用【exports】暴露对象或方法、【require】接收模块（接收到的模块作为一个对象，模块中暴露出来的对象或方法使用点调用）这样就有效的避免了重名冲突的问题！

创建一个webpack.config.js

在module目录的父级目录建立这个文件。

module.exports = {
    
    
    // 打包后程序的入口，相当于某个java类中的main方法。一个程序只能有一个main方法
    entry: "./modules/mian.js",
    // 将打包好的程序输出到哪儿，
    output: {
    
    
        // 输出的文件名，没有会创建一个文件
        filename: "./js/bundle.js"
    }
}

使用对象【module】的方法【exports】进行设置。

3.对小demo进行打包

将终端移动到【webpack.config.js】所在的目录，然后使用【webpack】指令进行打包！
在这里插入图片描述

webpack打包成功会出现终端中的内容，并且会生成一个dist/js/bundle.js文件

4.前端入口引入

在web项目的入口文件index中引入打包好的文件就有页面以及其逻辑了（页面是由vue模板组件构成，逻辑由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>

在这里插入图片描述

从上述可以看出Vue将前端页面放在模板中，模板是由js写的。vue项目的前端页面就变成了大部分js文件，大部分vue文件，一个html文件（index入口文件）。

这类似于jsp可以由servlet替代。

将所有的js、vue文件进行打包后，直接在index文件中引入打包后的文件就可以显示了。

这就是前端模块化开发！

Vue基础(四)