1.vue.js介绍
1）近年来前端开发趋势
- 旧浏览器逐渐淘汰，移动端需求增加
-
前端交互越来越多，功能越来越复杂
-
架构从传统的后台MVC向REST API+前端MV*迁移
2）MVVM框架
3）vue.js
什么是vue.js
它是一个轻量级MVVM框架
数据驱动+组件化的前端开发-
如何做技术选型（对比Angular React）
- vue.js更轻量，gzip20K+
Angular，56K
React，44K - vue.js更易上手，学习曲线平稳
- 借鉴了两家的优点，借鉴了angular的指令和react的组件化。
- vue.js更轻量，gzip20K+
-
vue.js核心思想
【1】数据驱动：DOM是数据的一种自然映射
数据响应原理：
数据（model）改变驱动视图（view）自动更新
数据响应原理
【2】组件化
扩展HTML元素，封装可重用的代码。
组件设计原则
页面上每个独立的可视/可交互区域视为一个组件。
每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护。
页面不过是组件的容器，组件可以嵌套自由组合形成完成页面。
2.Vue-cli开启Vue.js项目
1)Vue-cli介绍
vue-cli是帮助我们写好Vue.js基础代码的工具。
2）vue开发环境搭建
2.1）node.js及npm的安装
- 进入nodejs官网下载node https://nodejs.org/en/
下载对应版本
我下载了node8.9.3版本，包括npm 5.5.1版本
下载完成后安装该文件
安装完成
【1】打开命令行，cmd或者Windows PowerShell
【2】查看node版本
node -v
【3】更改npm默认安装路径
默认是在c:\Users\Administrator\AppData里面安装，装在c盘很乱不舒服。先修改位置。
在nodejs里面创建了两个文件夹，node_globe,node_cache作为npm默认路径。
【4】更改npm安装默认的源
npm config set registry https://registry.npm.taobao.org
npm info underscore （如果上面配置正确这个命令会有字符串response）
【5】配置系统环境变量(如果不配置，vue-cli安装好后，也不能识别vue命令)
2.2） 安装vue开发环境
【1】安装vue-cli脚本架
//-g表示安装到默认路径，就是我们上面配置的node_global中
npm install -g vue-cli
【2】安装成功后使用vue命令，可以看到如下图所示：
【3】使用vue list命令查看可以使用的模板
【4】使用vue init命令初始化一个vue工程
我的工程目录为图中所示vue目录中：
首先进入到要创建的工程所在的目录
vue init [选择的模板] [项目的名称]
【5】get start
然后执行如下命令：
cd hungry
//安装项目所需要的所有依赖包
npm install
npm run dev
3.项目文件介绍
-
用intelij IDEA打开项目（直接open）
图片.png - 目录介绍:
build和config：webpack配置相关
node_modules:通过npm install安装的依赖库
src：存放项目源码
.baberlrc文件：大多数浏览器不支持ES6，通过.baberlrc将ES6编译成ES5
.editconfig文件：编译器的配置
.eslintignore:忽略语法检查的目录文件
.eslintrc.js:eslint的配置文件
package.json:项目配置
4.intellij（webstorm）搭建vue开发环境
-
配置idea中iavascript为ES6
File-》settings
-
在plugins添加vue.js插件
-
如果一些方法下面有黄色的波浪线，错误提醒是unresolved function or method
File--》Setting--》搜索node--》点击enable--》之后如图所示
注意：如果点击enable没反应，升级idea版本（大坑）
-
配置run
这是创建好的
点击旁边的小三角，点击Edit Configration
点左边的+，选中npm，然后按下图所示配置：
点击run按钮
