VUE - 基础知识及环境配置
vue的概况及核心思想：
vue本身并不是一个框架：
vue结合周边生态，可以构成一个灵活的、渐进式的框架
声明式的渲染 → 组件系统 → 客户端路由 → 大规模状态管理 → 构建工具
vue的核心思想：
数据驱动、组件化
通过mvvm的数据绑定实现自动同步
DOM → VUE → 原生JS对象
vue实现数据绑定的原理：
//题目：在input中输入文字，在下面自动把文字显示出来 <p><input type="text" id="username"/></p> <p><span id="showname"></span></p> //传统做法： document.getElementById("username").addEventListener("keyup",function(){ document.getElementById("showname").innerText = event.target.value; }); //数据绑定做法： var obj = {}; Object.defineProperty(obj,"canshu",{ set:function(val){ document.getElementById("showname").innerText = val; } }); document.getElementById("username").addEventListener("keyup",function(){ obj.canshu = event.target.value; }); //这是因为：obj的属性"canshu"被赋值时，会自动触发 Object.defineProperty 里的set方法
//vue就是利用这个属性实现了数据绑定
vue与react的对比：
vue的特点：
模板和渲染函数的弹性选择
简单的语法及项目创建
更快的渲染速度和更小的体积
reace的特点：
跟适合大型应用和更好的可测试性
同时适用于web端和原生app
更大的生态圈带来更多支持的工具
两者的相同点：
都利用虚拟DOM实现快速渲染
轻量级
响应式组件
服务端渲染
易于集成路由工具、打包工具、状态管理工具
都有优秀的支持和社区
vue的环境搭建：
在多页应用中使用vue：
//直接引入法 <script src="https://unpkg.com/vue@2.3.3/dist/vue.min.js"></script> <p id="testEl">{{message}}</p> <script type="text/javascript"> new Vue({ el : "#testEl", data:{ message:"显示这行字" } }); </script> //npm安装法（在这之前要配置好node环境才行哦） 命令：cd 项目文件夹 命令：npm install vue --save-dev 这样就在项目目录下安装了vue，然后就和上面的用法完全相同啦 <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script> <p id="testEl">{{message}}</p> <script type="text/javascript"> new Vue({ el : "#testEl", data:{ message:"显示这行字" } }); </script>
利用vue-cli构建SPA应用：
//全局安装vue-cli 命令：npm install -g vue-cli //构建webpack-simple项目 命令：vue init webpack-simple 项目名 随后：根据需要填写项目梗概，就可以自动生成啦 //构建webpack项目 命令：vue init webpack 项目名 随后：根据需要填写项目梗概，就可以自动生成啦 //安装项目依赖 命令：npm install 随后：会自动下载项目的所有依赖，下载完成后会在项目文件夹中出现 node_modules //项目运行 命令：在READ.md中会写该项目的运行命令，通常是 npm run dev 随后：项目启动成功后就可以通过默认端口访问啦 //项目终止 命令：control + c
vue-cli脚手架中的文件简介：
重点关注，其他的知道就行啦
build文件夹//这次打包的配置所在的文件夹 build.js//构建生产包 check-versions.js logo.png utils.js//工具输出的配置 vue-loader.conf.js webpack.base.conf.js//打包的核心配置 webpack.dev.conf.js//开发版本的配置（继承base） webpack.prod.conf.js//生产版本的配置（继承base） config文件夹//打包对应的配置 dev.env.js index.js//也是打包配置，其实可以和webpack.base.conf.js合并成一个 prod.env.js src文件夹//项目源码 assets文件夹 components文件夹 router文件夹 App.vue//入口组件 main.js//项目入口文件 static文件夹//静态资源 .gitkeep .babelrc//ES6解析配置 .editorconfig//编辑器配置 .gitignore//git忽略配置，在这里配置的文件不会被提交到git上 .postcssrc.js//HTML添加前缀的配置 index.html//单页面的入口 package-lock.json package.json//项目基本配置 scripts（项目运行命令） dependencies（项目依赖库） devDependencies（开发依赖库） engines（开发引擎版本） browserslist（支持的浏览器版本） README.md//项目说明
