什么是Vue?
Vue(读音 /vjuː/,类似于 view)是一套用于构建用户界面的渐进式JavaScript框架。
那什么又是渐进式呢?
逐渐增强,可以在项目中使用vue的一部分功能,也可以使用Vue的全家桶来管理整个项目。
前端框架与库的区别:
- 库是方法的集合,使用库的时候,很自由,只要调用库提供的各种各样的方法就行,也可以不用其他的一些方法
- 使用框架的时候,需要按照框架的规则写代码,限制会非常多,但同时框架的功能也很强大,可以极大的提升开发的效率。
Vue参考了MVVM的框架
-
MVVM思想:一种软件架构模式,决定了写代码的方式。
- M:model数据模型(ajax获取到的数据)
- V:view视图(页面)
- VM:ViewModel 视图模型
-
MVVM通过
数据双向绑定让数据自动地双向同步 不在需要操作DOM- V(修改视图) -> M(数据自动同步)
- M(修改数据) -> V(视图自动同步)
vue 组件化思想 一个页面拆成多个小组件 每个组件都包含自己的html+css+js,方便复用和维护。
Vue中通过数据来来驱动视图,不需要再去操作DOM了,直接操作数据就行了。 在在Vue2中我们常用的开发方式是在webpack环境中开发Vue,下面说下Vue-cli.
vue-cli的使用
vue-cli也叫vue脚手架,vue-cli是vue官方提供的一个全局命令工具,这个命令可以帮助我们快速的创建一个vue项目的基础架子。
- 全局安装命令
npm install -g @vue/cli
# OR
yarn global add @vue/cli
- 查看版本
vue
vue --version
- 初始化一个vue项目
vue create 项目名(不能用中文)
- 启动项目
yarn serve
yarn build
也可以自定义配置
vue create 项目名(不能用中文)
这里选择V3还是v2 在使用vue3的时候我们有Vite这款工具,但是也可以使用脚手架搭建。
选择ESLint 配置规范
选择校验代码的时机
我们在拉完别人的代码之后,第一件要做的事就是 下载依赖,然后跑起来。