Vue 001

 

1. MVVM思想

• M：即Model，模型，包括数据和一些基本操作
• V：即View，视图，页面染结果
• VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）

在MWM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。

而MVWM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：

• 只要我们Model发生了改变，View上自然就会表现出来。
• 当用户修改了View，Model中的数据也会跟着改变。

把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上。

Vue（读音/jus/，类似于view）是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

使用npm来初始化项目

文件夹增加一个package.json代表是一个npm来管理的项目

D:\work20\vue0615>npm init -y
Wrote to D:\work20\vue0615\package.json:

{
  "name": "vue0615",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

D:\work20\vue0615>npm install vue
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN vue0615@1.0.0 No description
npm WARN vue0615@1.0.0 No repository field.

+ vue@2.6.11
added 1 package from 1 contributor in 2.865s

npm install vue来安装依赖

2. 指令

3. 计算属性和侦听器

4. 组件化

5. 生命周期钩子函数

6. vue模块化开发

6.1 npm install webpack -g    

全局安装webpack

6.2 npm install -g @vue/cli-init    

全局安装vue脚手架

6.3 初始化vue项目

vue init webpack appname :vue脚手架使用webpack模块初始化 一个appname项目

 

npm install webpack -g

npm install -g @vue/cli-init

vue init webpack vue0616

 搭建vue的模块化开发环境，出错

配置环境变量  C:\Users\zx\AppData\Roaming\npm

发现在此路径下没有vue.cmd

 然后再次执行   vue init webpack vue0616

 

注：

参考

1. vue init webpack 报错 vue不是内部命令

2. 'vue' 不是内部或外部命令，也不是可运行的程序 或批处理文件。

6.4 启动vue项目

项目的package.json中有scripts,代表我们能运行的命令

npm start =npm run dev :启动项目

npm run build: 将项目打包