学习Vue之旅：Day3——认识文件、引入组件库，写实例

目录

一、组件 vs  框架

 二、webpack

三、脚手架创建项目之后，项目的目录文件都是啥？

四、在 main.js里面  引入 element ui

五、一个“后台管理”实例

①先创建好目录：

 ②删除app.vue里不需要的内容。留下：​

③编写路由： 

⑤写login文件夹里面的index.vue:

⑥单个html页面，可以理解为就是下面这个App.vue。这里的决定了展示模块。 

⑦ export default命令 是什么？

⑧NavMenu 导航菜单： 

⑨为导航栏设置跳转路径（修改index），实现点击-跳转

⑩多级路由：children:[  ]，因为各个模块，最终都是展示在home的index.vue中，所以各个vue，最终都写在 /home的 children里面。

 到此，导航以及导航的页面之间的跳转已经做完。

---

一、组件 vs  框架

组件 vs  框架 的区别，可以参考：  https://zhuanlan.zhihu.com/p/98682826 

组件：就像一个个小的单位，多个组件可以组合成组件库，方便调用和复用，组件间也可以嵌套，小组件组合成大组件。

模块：就像是独立的功能和项目（如淘宝：注册、登录、购物、直播...），可以调用组件来组成模块，多个模块可以组合成业务框架。

 二、webpack

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

三、脚手架创建项目之后，项目的目录文件都是啥？

从别人那里下载项目，发现里面没有node_modules，因为里面的结构非常复杂，而且它的作用

只是用来存放依赖包，所以一般不建议上传——>所以下载时候，发现老大给的项目里没有。

解决方法： npm i  安装即可。（i：就是install的意思）

 

 

如果想要添加一些特定的文件来配置信息：

 

四、在 main.js里面  引入 element ui

 下载完之后，重新启动项目