Vue基本概念一、什么是Vue vue 是渐进式 javascript 框架，一套拥有自己规则的语法什么是渐进式？

一、什么是Vue

vue 是渐进式 javascript 框架，一套拥有自己规则的语法

什么是渐进式？

渐进式就是逐步使用，集成更多的功能

什么是库和框架？

库是方法的集合，而框架是一套拥有自己规则的语法

二、Vue/cli--脚手架

@vue/cli是Vue官方提供的一个全局模块包(得到vue命令)，此包用于床架脚手架项目

脚手架是为了保证各施工过程顺利进行而搭设的工作平台

1、脚手架的优点：

开箱即用
0配置webpack

- babel 支持
- css，less支持
- 开发服务器支持

2、如何安装搭建脚手架

全局安装命令

npm install -g @vue/cli
or
yarn global add @vue/cli

查看vue脚手架版本：vue -V

3、如何利用脚手架创建项目

终端命令：vue create 项目名

注意：项目名不能有大写字母，中文和特殊符号

4、利用脚手架创建的项目目录

vuecil-demo        # 项目目录
├── node_modules # 项目依赖的第三方包
├── public       # 静态文件目录
├── favicon.ico# 浏览器小图标
└── index.html # 单页面的html文件(网页浏览的是它)
├── src          # 业务文件夹
├── assets     # 静态资源
└── logo.png # vue的logo图片
├── components # 组件目录
└── HelloWorld.vue # 欢迎页面vue代码文件 
├── App.vue    # 整个应用的根组件
└── main.js    # 入口js文件
├── .gitignore   # git提交忽略配置
├── babel.config.js  # babel配置
├── package.json  # 依赖包列表
├── README.md    # 项目说明
	└── yarn.lock    # 项目包版本锁定和缓存地址

主要文件及含义：

node_modules下都是下载的第三方包
public/index.html – 浏览器运行的网页
src/main.js – webpack打包的入口文件
src/App.vue – vue项目入口页面
package.json – 依赖包列表文件

main.js 和 App.vue，以及 index.html 作用和关系?

main.js：项目打包主要入口 --- Vue初始化
App.vue：Vue页面主要入口
index.html：浏览器运行的文件
main.js ==> App.vue ==> index.html

vue项目架构

项目入口, 以及代码执行顺序和引入关系

5、vue配置文件

vue项目中没有webpack.config.js文件，因为@vue/cli用的vue.config.js

/* 覆盖webpack的配置 */
module.exports = {
  devServer: { // 自定义服务配置
    host: 'location'
    open: true, // 自动打开浏览器
    port: 3000
  }
}

6、vue文件的格式

Vue 推荐采用 .vue 文件来开发项目

vue文件中分为三个模块

template模块：html模板（用来生成虚拟dom结构）

- template里只能有一个根标签

script模块：编写js业务代码
style模块：编写css样式，标签上加入scoped属性，保证样式只针对当前template内标签生效

- 也能设置css、less、sass语法格式

单vue文件的好处，独立作用域互相不影响

<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
  <div>欢迎使用vue</div>
</template>

<!-- js相关 -->
<script>
export default {
  name: 'App'
}
</script>

<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style lang='css' scoped>
</style>

三、eslint代码检查工具

1、什么是eslint

eslint 是一款检测代码格式规范的工具

在团队协作开发前期：统一设置好代码编写格式与规范。

在开发中，代码编写格式不对时会报错提醒

1、如何配置eslint

// 在vue.config.js配置文件中配置
module.exports = {
  lintOnSave: false,	// 关闭eslint 检查
}

四、Vue -- MVVM设计模式

1、什么是设计模式？

设计模式：是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计总结的经验

大白话：设计模式是对一般问题的通用解决方案

2、MVVM是什么？

概念：MVVM（模型，视图，视图模型双向关联额一种设计模式）

作用：减少DOM操作，提高开发效率

MVVM，一种软件架构模式，决定了写代码的思想和层次

- M：model数据模型（data里定义）
- V：view视图（html界面）
- VM：VIewModel视图模型（vue.js源码）

MVVM通过数据双向绑定让数据自动的双向同步，不在需要操作DOM

- V（修改视图） ==> M（数据自动同步）
- M（修改数据）==> V（视图自动同步）

总结：vue源码内采用MVVM设计模式思想，内部帮你操作DOM，不需要开发者在手动操作DOM了，主要通过数据驱动视图的开发思想来编写代码，大大提高了开发效率

五、扩展

1、vue-devtools

vue-devtools：是官方提供的一款Vue调试插件

安装到Chrome浏览器上的插件

使用教程自行百度

Vue基本概念