概要
Vue.js 是一套构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue 学习起来非常简单，易于上手，且便于与第三方库或既有项目整合。另一方面，当vue与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。本文参考相关网文，也采用 Vue 2.1.8 版本来阐述，官方最新稳定版本：2.6.12。
其中，渐进式代表的含义是：主张最少。每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。
vue常用的网站：
vue官方文档：https://cn.vuejs.org/v2/guide/
vue资源精选：http://vue.awesometiny.com/
vue GitHub地址：https://github.com/vuejs/vue
基于vue和element构建的后台前端解决方案：https://panjiachen.github.io/vue-element-admin-site/zh/
架构
1）前后端分离总架构图
2）前端架构设计图
3）MVVM架构模式
MVVM 由 Model,View,ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
结合view来看，Vue.js 可以说是MVVM 架构的最佳实践，是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。专注于 MVVM 中的 ViewModel，不仅做到了数据双向绑定，而且也是一款相对比较轻量级的JS 库，API 简洁；
另，由于vue的双向数据绑定特性以及技术的成形，实现了项目的热加载，可实现页面代码改完能立即在浏览器方面进行效果展示，提高开发效率；
4）vue的双向数据绑定的原理
Vue.js 是采用 Object.defineProperty 的 getter 和 setter，并结合观察者模式来实现数据绑定的。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。
说明：
Observer 数据监听器： 能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者，内部采用Object.defineProperty的getter和setter来实现。
Compile 指令解析器： 它的作用对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。
Watcher 订阅者： 作为连接 Observer 和 Compile 的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数。
Dep 消息订阅器： 内部维护了一个数组，用来收集订阅者（Watcher），数据变动触发notify 函数，再调用订阅者的 update 方法。
5）url到页面显示的过程
项目目录结构
├── build # 构建相关
├── static # 静态资源
│ │── img # 图片
│ │── favicon.ico # favicon图标
│ └── index.html # html模板
│ │── Tinymce # 富文本
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件
│ ├── directive # 全局指令
│ ├── icons # 项目所有 svg icons
│ ├── lang # 国际化 language
│ ├── layout # 全局 layout
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法
│ ├── views # views 所有页面
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等
│ └── permission.js # 权限管理
├── tests # 测试
├── .env.xxx # 环境变量配置
├── .eslintrc.js # eslint 配置项
├── .gitignore # git 配置项
├── .babelrc # babel-loader 配置
├── .travis.yml # 自动化CI配置
├── vue.config.js # vue-cli 配置
└── package.json # package.json
上面为常见的目录结构，在实际开发过程中，会因为项目的差异，有所不同；
1）build——[webpack配置]
build文件主要是webpack的配置，主要启动文件是dev-server.js，当我们输入npm run dev首先启动的就是dev-server.js，它会去检查node及npm版本，加载配置文件，启动服务。
2）config——[vue项目配置]
config文件主要是项目相关配置，我们常用的就是当端口冲突时配置监听端口，打包输出路径及命名等
3）index.html——[主页]
index.html如其他html一样，但一般只定义一个空的根节点，在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充
4）App.vue——[根组件]
【template】
其中模板只能包含一个父节点，也就是说顶层的div只能有一个（例如下图，父节点为#app的div，其没有兄弟节点）
是子路由视图，后面的路由页面都显示在此处
打一个比喻吧,类似于一个插槽，跳转某个路由时，该路由下的页面就插在这个插槽中渲染显示
5）main.js——[入口文件]
main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例，下图中的
components:{App}就是引入的根组件App.vue
后期还可以引入插件，当然首先得安装插件。
.vue文件的基本模板:
Vue 的安装与使用
1、windows 环境
1）安装javascript运行环境node.js
2）安装Nodejs下的包管理器，打开windows命令窗口，执行安装：
npm install -g cnpm --registry=https://registry.npm.taobao.org
3）安装vue-cli脚手架构建工具，在cmd，执行：cnpm install -g vue-cli
4）安装完成后，cmd输入vue，验证vue已成功安装：
5）cmd内，cd 到vue的安装的路径“，然后输入：vue init webpack 项目名，创建项目：
6）cd到安装好的项目文件夹，输入：npm run dev，运行项目
7）浏览器输入：http://localhost:8080,验证运行效果
8）构架项目案例（来源网络）：
案例一：
开发工具使用的是 HBuilder，先创建一个 web 项目
在 js 下创建 app.js，在 css 下创建 style.css，如下：
编写index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>VueLearn-cnblogs/xpwi</title>
<!--引入自定义的样式-->
<link rel="stylesheet" href="css/style.css" />
<!--引入 vue 核心 js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--vue-app 是根容器，定义一个 id，然后在 js 里操作-->
<div id="vue-app">
<!--name 具体的值是在 js 中定义的，{
{
}}不会显示在页面上 -->
<h2>{
{
name}}</h2>
</div>
<!--引入自己的 js，注意必须写在 body 标签里最后，因为必须先加载你的整个 HTML DOM，才回去执行 vue 实例-->
<script type="text/javascript" src="js/app.js" ></script>
</body>
</html>
编写app.js 代码：
/实例化 vue 对象
new Vue({
//注意代码格式
//el：element 需要获取的元素，一定是 html 中的根容器元素
el:"#vue-app",
data:{
name:"CSDN"
}
});
浏览器访问验证：
案例二：
1）app.js 文件代码：
//实例化 vue 对象
new Vue({
//注意代码格式
//el：element 需要获取的元素，一定是 html 中的根容器元素
el:"#vue-app",
data:{
name:"***"
},
//存储自己的方法
methods:{
welcome: function(){
alert(" welcome to learn with me!");
},
good: function(time){
alert("Good " + time + " " + this.name + "!" )
}
}
});
//实例化 vue 对象
new Vue({
//注意代码格式
//el：element 需要获取的元素，一定是 html 中的根容器元素
el:"#vue-app",
data:{
name:"***",
blogUrl:"https://www.cnblogs.com/xpwi",
csdnUrl:"https://blog.csdn.net/qq_40147863",
/*定义 html 代码块，在 html标签中绑定获取
【特别注意】：单引号和双引号交替使用，不然都不知道怎么蹦的
*/
csdnHtml:"<a href='https://blog.csdn.net/qq_40147863'>CSDN 地址</a>",
},
//存储自己的方法
methods:{
welcome: function(){
alert(" welcome to learn with me!");
},
good: function(time){
alert("Good " + time + " " + this.name + "!" )
}
}
});
2）html文件代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>VueLearn-cnblogs/xpwi</title>
<!--引入自定义的样式-->
<link rel="stylesheet" href="css/style.css" />
<!--引入 vue 核心 js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--vue-app 是根容器，定义一个 id，然后在 js 里操作-->
<div id="vue-app">
<!--welcome 具体的值是在 js 中定义的-->
{
{
welcome()}}
<!--方法传参数-->
{
{
good("afternoon")}}
</div>
<!--引入自己的 js，注意必须写在 body 标签里最后，因为必须先加载你的整个 HTML DOM，才回去执行 vue 实例-->
<script type="text/javascript" src="js/app.js" ></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>VueLearn-cnblogs/xpwi</title>
<!--引入自定义的样式-->
<link rel="stylesheet" href="css/style.css" />
<!--引入 vue 核心 js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--vue-app 是根容器，定义一个 id，然后在 js 里操作-->
<div id="vue-app">
<!-- v-bind 是 vue 中给标签属性绑定 js 中定义的值 -->
<a v-bind:href="blogUrl">博客园地址</a>
<br />
<input type="text" v-bind:value="name" />
<br />
<!--v-html 是拿 js 中的数据然后将字符串转换成 html 代码-->
<p v-html="csdnHtml"></p>
</div>
<!--引入自己的 js，注意必须写在 body 标签里最后，因为必须先加载你的整个 HTML DOM，才回去执行 vue 实例-->
<script type="text/javascript" src="js/app.js" ></script>
</body>
</html>
3）效果：
2、Linux环境：
Vue项目通常通过webpack工具来构建，而webpack命令的执行是依赖node.js的环境的，所以首先要安装node.js。node.js的官方地址为：https://nodejs.org/en/download/，下载相应版本。
1）下载Nodejs软件
或直接运行：wget https://nodejs.org/download/release/v9.11.2/node-v9.11.2-linux-x64.tar.xz
2）创建Nodejs目录，执行：#mkdir -p /usr/lib/nodejs/，完成后将下载Node包解压到 新建目录，执行：
tar -xf node-v9.11.2-linux-x64.tar.xz -C /usr/lib/nodejs/
mv node-v9.11.2-linux-x64/ node-v9.11.2
cd nodejs-v9.11.2
./bin/node -v // 验证当前版本，如果新安装的话就不用了
ln -s /app/software/nodejs/bin/npm /usr/local/bin/
ln -s /app/software/nodejs/bin/node /usr/local/bin/
rm -f /usr/local/bin/node
ln -s /usr/lib/nodejs/node-v9.11.2/bin/node /usr/local/bin/
./node -v //再次验证nodejs
返回v9.11.2即表示成功
3）cnpm的安装
安装完node之后，npm包含的很多依赖包也需要一起安装，但这些安装包的下载地址在国外的服务器上，但淘宝对npm的做了镜像服务器，下面执行，利用此安装cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v //验证
rm -f /usr/local/bin/cnpm //如果有旧环境
ln -s /usr/lib/nodejs/node-v9.11.2/bin/cnpm /usr/local/bin/cnpm
cnpm -v //再次验证
4）vue-cli的安装：
vue-cli是vue官方提供的一个命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。
npm install -g vue-cli //安装vue工具
rm -f /usr/local/bin/vue
ln -s /usr/lib/nodejs/node-v9.11.2/bin/vue /usr/local/bin/vue
5）新建一个Vue项目：
新建一个项目文件夹，命名为 vue-demo，执行：
cd ./vue-demo
vue init webpack vue-demo //初始化，完成后项目目录结构如下：
npm run dev
cnpm install //装载
cnpm run dev //运行
6）待启动后，浏览器访问http:\localhost:8080
7）网页测试：
npm install -g http-server //安装http-server
http-server //启动
浏览器访问上述url，查看效果。
参考链接：https://blog.csdn.net/dingpeiqiang/article/details/87829886?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-2&spm=1001.2101.3001.4242
https://www.cnblogs.com/xpwi/p/9911541.html