vue相关（一）--简介、框架模型

一、简介
Vue 框架
一、什么是 Vue . js
前端三大主流框架之一：Angular . js 、 React . js 、 Vue . js
1、简单小巧
使用 gzip 压缩之后，有20kb左右
2、自动进行响应式更新
需要关注前端业务逻辑，无需操作 DOM
3、高级特性
解耦视图与数据
可复用组件
前端路由
状态管理
虛拟 DOM

二、MVVM模型
M，模型，从后端获取的数据。
V，视图，界面展示。
VM，视图模型，核心控制。
M<- ->VM< -->V
三、安装

1、创建前端 Vue 工程
安装 Node . js
https://nodejs.org/dist/v10.16.3/node-v10.16.3-x64.msi
node - v
npm - v
使用淘宝 npm 镜像源
npm install - g cnpm -registry=https://registry. npm.taobao.org
2、安装 vue - cli 脚手架
使用 npm
npm install - g @vue /cli
使用淘宝 npm 镜像源
cnpm install -g @vue / cli
3、使用 vs code 或 WebStorm 创建工程项目。建议安装 git 进行源码管理，版本控制。
＃创建项目 vue create 项目名＃如果使用 GitBash winpty vue . cmd create 项目名
＃或者创建默认工程目录
vue create 项目名 --default
最好是对应项目下，cmd，然后执行命令
vue create vue_test 默认即可
我是直接下载的webstorm软件，激活码激活后使用。

安装OK后，直接打开webstorm所在路径，cmd继续vue create vue project
选择默认自动安装，安装完毕，会生成一个vueproject项目。
webstorm打开vue project项目(不要去自己新建vue.js)，其中，node modules 是项目所需的包都在里面，public是不需要优化的，src是需要优化压缩的的集中一起，子目录有logo；组件（可以随时被调用，类似于python中的模块），app.vue是根主组件，最高级别；main.js为入口文件；

前端工程化、组件化
MVVM模型，重新类比着被定义了。
组件由components中App.vue

第一部分template 模板，展示给用户看，相当于MVVM中的V，（在父组件中给子组件传值）。
第二部分script脚本（导入子组件，定义组件名称，声明子组件），相当于M。
第三部分style（造型），装饰等。

webstorm中运行vue项目：右上角configuration，点击+，选择npm，name取一个名字，script给一个参数serve，点击OK，这个参数是根据package. json中scripts下的serve。接着正常运行编辑器中的绿三角，刷新网址就能看见界面了。

cmd运行项目：cnpm run serve