浅浅Vue2-vue-cli

79 阅读2分钟

什么是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,方便复用和维护。

image.png

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 项目名(不能用中文)

image.png

image.png 这里选择V3还是v2 在使用vue3的时候我们有Vite这款工具,但是也可以使用脚手架搭建。 image.png

选择ESLint 配置规范 image.png 选择校验代码的时机

image.png

image.png

image.png

image.png

我们在拉完别人的代码之后,第一件要做的事就是 下载依赖,然后跑起来。