vue学习烦恼

（国庆）三天学习VUE框架的总结

作为一名实实在在的Java后端开发人员，涉及前端框架，着实会引来前端的小哥哥小姐姐们，锤爆。好在我是菜鸟，出发点是受了抖音的魔幻洗礼，废话不讲直接上内容！！！

• Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

（非常适合小白，动手试试）

学习vue需要去了解他的官网，小哥哥我先献上（vue官网）

1. 引入vue内库

2. 开发工具介绍 （VsCode 或者 集成的最好的开发工具 【IDEA】）

一款好的开发工具能够提高其开发效率，作为后端人员本应推荐IDEA，但是还是觉得术业有专攻，下载地址（VsCode）

3. vue的开发环境（node.js）

node.js 可能会出现版本问题，需要去做一下相关对照，一般很少出现（nodejs下载地址）

windos需要在dos环境下安装（win+r 在cmd）懂得都懂😄 命令上手 （其中引用可能会有引用其他博主的相关内容）

前端开发，少不了 node.js；Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
http://nodejs.cn/api/ 我们关注与 node.js 的 npm 功能就行； NPM 是随同 NodeJS
一起安装的包管理工具，JavaScript-NPM，Java-Maven；

1）、官网下载安装 node.js，并使用 node -v 检查版本
2）、配置 npm 使用淘宝镜像
npm config set registry http://registry.npm.taobao.org/

还有相关vue基础知识应用，建议直接去vue官网，查看相关文档

4. 模块化开发

模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先
导包。而 JS 中没有包的概念，换来的是 模块。
模块功能主要由两个命令构成：export和import。
 export命令用于规定模块的对外接口。
 import命令用于导入其他模块提供的功能。
（相关功能参照官网）

5. 进入正题vue

1、MVVM 思想  M：即 Model，模型，包括数据和一些基本操作
 V：即 View，视图，页面渲染结果  VM：即
View-Model，模型与视图间的双向操作（无需开发人员干涉） 在 MVVM 之前，开发人员从后端获取需要的数据模型，然后要通过 DOM
操作 Model 渲染 到 View 中。而后当用户操作视图，我们还需要通过 DOM 获取 View 中的数据，然后同步到 Model 中。

6.VUE 项目在VsCode创建

**执行相关命令 npm install -y

7.进阶 安装vue-cli

#在命令台输入
cnpm install vue-cli -g
#查看是否安装成功
vue list

1.2 创建 vue-cli 程序

# 这里的 myvue 是项目名称，可以根据自己的需求起名
vue init webpack myvue

8.Webpack （超级重要来了）

WebPack 是一款模块加载器兼打包工具，它能把各种资源，如 JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用。

npm install webpack -g
npm install webpack-cli -g

验证是否成功

webpack -v
webpack-cli -v

什么是Webpack

本质上，webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency
graph),其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle.
 Webpack是当下最热门的前端资源模块化管理和打包工具，它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过loader转换，任何形式的资源都可以当做模块，比如CommonsJS、AMD、ES6、
CSS、JSON、CoffeeScript、LESS等;
 伴随着移动互联网的大潮，当今越来越多的网站已经从网页模式进化到了WebApp模式。它们运行在现代浏览器里，使用HTML5、CSS3、ES6
等新的技术来开发丰富的功能，网页已经不仅仅是完成浏览器的基本需求; WebApp通常是一个SPA (单页面应用)
，每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的JS代码，这给前端的开发流程和资源组织带来了巨大挑战。
 前端开发和其他开发工作的主要区别，首先是前端基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器的，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统，这个理想中的模块化系统是前端工程师多年来一直探索的难题。

9.vue-router

Vue Router是Vue.js官方的路由管理器（路径跳转）。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有:

嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于Vue.js过渡系统的视图过渡效果 细粒度的导航控制
带有自动激活的CSS class的链接 HTML5历史模式或hash模式，在IE9中自动降级 自定义的滚动条行为

10.vue+elementUI（当前最火的一种方式，饿了么提供的，阿里也一直帮忙维护）

# 进入工程目录
cd hello-vue
# 安装 vue-router
npm install vue-router --save-dev
# 安装 element-ui
npm i element-ui -S
# 安装依赖
npm install
# 安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev	

elementUI官网地址
还有许多来不及分享，博主要干饭了！！！，可能有许多不足，大家看看了解即可，网上内容巨多，没事可以去哔哩哔哩看狂神老师介绍入门VUE

向阳而生😄lcc 干饭ing