Vue实现前后端分离
Vue
MVVM思想
M：module 包括数据和一些基本操作
V：view 视图，页面渲染结果
VM：View-module，模型与视图间的双向操作（无需开发人员干涉）
视图和数据通过VM绑定起来，模型里有变化会自动地通过Directives填写到视图中，视图表单中添加了内容也会自动地通过DOM Listeners保存到模型中。
教程：
-
Vue: https://cn.vuejs.org/v2/guide/
-
ElementUI: https://element.eleme.cn/#/zh-CN/component/installation
安装：
直接下载并用 < script > 标签引入
或者在VScode控制台使用npm install vue导入。
- 先np init -y初始化项目，生成了一个package.json文件，说明他是一个npm管理的项目
- npm install vue，安装后在项目node_modules里既有vue
下载vsCode用于前端管理系统。在vsCode里安装插件。
Auto Close Tag
Auto Rename Tag
Chinese
ESlint
HTML CSS Support
HTML Snippets
JavaScript ES6
Live Server
open in brower
Vetur
测试：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="num">
<button v-on:click="num++">点赞</button>
<button v-on:click="cancle">取消</button>
<h1> {{name}} ,非常帅，有{{num}}个人为他点赞{{hello()}}</h1>
</div>
<!-- 导入依赖 -->
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
//1、vue声明式渲染
let vm = new Vue({ //生成vue对象
el: "#app",//绑定元素 div id="app"
data: { //封装数据
name: "张三", // 也可以使用{} //表单中可以取出
num: 1
},
methods:{ //封装方法
cancle(){
this.num -- ;
},
hello(){
return "1"
}
}
});
//2、双向绑定,模型变化，视图变化。反之亦然。
//3、事件处理
//v-xx：指令
//1、创建vue实例，关联页面的模板，将自己的数据（data）渲染到关联的模板，响应式的
//2、指令来简化对dom的一些操作。
//3、声明方法来做更复杂的操作。methods里面可以封装方法。
</script>
</body>
</html>
用VSCode打开renren-fast-vue
安装node：http://nodejs.cn/download/ 选择windows下载。下载完安装。
NPM是随同NodeJS一起安装的包管理工具，如JavaScript-NPM，java-Maven。
命令行输入node -v 检查配置好了，配置npm的镜像仓库地址，执行
node -v
npm config set registry http://registry.npm.taobao.org/
然后去VScode的终端中输入 npm install，会报错，然后进行如下操作：
首先确保安装了python3.0以上版本，并配置全局变量
其次大部分错误是报node-sass4.9.0安装失败。
执行以下步骤可以完美解决
首先把项目文件夹下的package.json里面的node-sass4.9.0改成4.9.2（不改可能也没关系，不过我改了，防止踩坑）
然后项目文件夹下打开cmd命令窗口（和Visual Studio Code的终端命令是一样的）（我在VScode中不成功，还是用cmd吧，在cmd中注意切换到renren-fast-vue项目目录）
执行：
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
等待挺长时间，执行成功看看有没有报错，如果没报错执行下面命令
npm install ，
没报错就是安装成功，然后在下面目录下使用npm run dev （运行项目）就ok了
注：这么做得原理就是先单独从淘宝镜像吧nod-sass下载下来，然后再进行编译，因为这句命令好像是不成功的，（npm config set registry http://registry.npm.taobao.org/），默认从github下载，导致报错的
如果之前安装失败的。先清理 缓存
清理缓存：npm rebuild node-sass
npm uninstall node-sass
或采用：
先把node_modules全部删除，然后再npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver，最后npm install。
浏览器输入localhost:8001 就可以看到内容了，登录admin admin
推荐阅读
-
Spring Boot + Vue 前后端分离开发之前端网络请求封装与配置
-
Z从壹开始前后端分离【 .NET Core2.0/3.0 +Vue2.0 】框架之二 || 后端项目搭建
-
从零开始搭建前后端分离的NetCore2.2（EF Core CodeFirst+Autofac）+Vue的项目框架之七使用JWT生成Token(个人见解)
-
从零开始搭建前后端分离的NetCore2.2（EF Core CodeFirst+Autofac）+Vue的项目框架之十一Swagger使用一
-
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
-
解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题
-
从零开始搭建前后端分离的NetCore2.2（EF Core CodeFirst+Autofac）+Vue的项目框架之十数据库基础方法的封装
-
微信登录的几种方式 以及在前后端分离如何实现
-
从零开始搭建前后端分离的NetCore2.2（EF Core CodeFirst+Autofac）+Vue的项目框架之九如何进行用户权限控制
-
基于Vue的前后端分离项目实践