vue 学习笔记1
#vue中require与import的区别
在es6之前js一直没有自己的模块语法,为了解决这种尴尬就有了require.js的出现。在es6发布之后js又引入了import的概念。
require基本用法:在导出的文件中定义 module.exports(node里的模块引用),导出的对象的类型不予限定(可以是任何类型,字符串,变量,对象,方法),在引入的文件中调用require()方法引入对象即可。
import的基本语法:导出的对象必须与模块中的值一一对应,换一种说法就是导出的对象与整个模块进行结构赋值。
#开发vue的两种方式
1、传统开发模式:基于html/css/js文件开发vue(原始,无法使用模块化语法)。
2、工程化开发模式:在webpack/vite环境下开发vue,现在的主流开发模式,可以享受webpack给前端开发带来的各种遍历(***推荐)。
#创建项目 vue create dem0
#启动项目 npm run serve
#打包项目 npm run build
#vue脚手架说明
在vue.config.js可以覆盖webpack的配置,脚手架初始化的项目目录有点复杂,有很多文件,大部分都是一些配置文件,只需要在src中进行开发。修改src目录,只保留main.js和App.vue(其中 src/main.js不动, 渲染App.vue组件),src/App.vue默认有很多的内容,可以全部删除。一个.vue文件就是一个组件,后续开发vue,所有的功能都是基于组件实现。一个单文件组件由三部分构成:
1、template(必须) 影响组件渲染的结构 (只能有一个根元素)
2、script 逻辑 js
3、style 样式
#路由说明
由于Vue在开发时对路由支持的不足,于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,实际上就是组件的切换。路由就是SPA(单页应用)的路径管理器。再通俗的说,vue-router就是我们WebApp的链接路径管理系统。
router流程图: