Vue学习记录（codewhy）——模块化开发知识、前端路由和后端路由对比、vue3的router配置方式

模块化开发

常见的模块化规范：
CommonJS AMD CMD ES6的Modules
模块化有两个核心：导入和导出

CommonJS

导出对象中定义的变量

导入

导入

导出函数、类

或者



export default
某些情况下一个模块中包含着某个功能 我们不希望给这个功能命名 而且让导入者可以自己来命名 这个时候就可以用export default

注意在同一个模块中不能出现多个export default

统一全部导入

Webpack

• 本质上来讲：是一个现代的JavaScript应用的静态模块打包工具
• 在es6之前想要进行模块化开发 就必须借助于其他的工具
• 并且在通过模块化开发完成项目后 还需要处理模块之间的各种以来 并且将其进行整合打包
• 而webpack其中一个核心就是让我们可以进行模块化开发 并且会帮助我们处理模块之间的依赖关系
• 不仅仅是JavaScript文件 css 图片 json文件等等在webpack中都可以被当作模块来使用

安装webpack必须先要安装node.js——自带了软件包管理工具npm

路由

路由表就是映射表 决定我们的数据包转向哪里

前端路由和后端路由

配置路由

vuerouter的配置方式

实现点击链接切换页面内容

终端输入 npm install vue-router@4

目录结构

index.js配置

为实现懒加载采用这种写法

以history为例配置about.vue和home.vue(类似)

main.js配置

app.vue配置