一.Before
目的：熟悉一些基本概念，开发流程，常用组件，快速的上手写项目，先run起来
产出：一个模拟购物车的小模块
二.项目的搭建
1.下载安装node.js
https://nodejs.org/en/
选择 LTS(长期支持的版本) 版本，下载安装(一直点下一步)
安装完毕之后，在命令行下验证是否安装成功：输入nmp，显示如下就表示安装成功
2.安装cnpm （在天朝你懂的）
npm install -g cnpm --registry=https://registry.npm.taobao.org
3.安装 vue-cli (一个命令行工具，可用于快速搭建大型单页应用)
cnpm install -g vue-cli
4.新建一个项目
先创建一个你心仪的文件夹，然后在该文件夹下打开命令行
vue init webpack 你的项目名
这里会询问你安装一些组件，暂时我们只安装vue-router
5.安装项目的依赖包
加入刚刚创建项目的根目录，在根目录下打开命令行
cnpm install
6.打开项目测试一下（如果端口被占用可以在根目录下config/index.js中修改dev对象的port属性）
npm run dev
7. 项目结构的说明
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- static // 静态文件，比如一些图片，json数据等
| |-- data // 群聊分析得到的数据用于数据可视化
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- favicon.ico
|-- index.html // 入口页面
|-- package.json // 项目基本信息
三.基本知识
1.概念：数据驱动的组件式编程
传统的前端开发模式：
拼界面->找到dom节点->修改属性->检测是否有其他影响的节点->根据刚刚修改的dom节点更新自己的状态
数据驱动 :
只要专注于数据的状态,无需理会UI更新问题 , 不管是样式还是内容,可见性还是切换class，都只需更改数据
{{ msg }}
2.组件式编程
1.如下图所示，如搭积木一样一个个组装组件，就形成了我们整个应用
2.组件之间的通信，一句话，父组件通过prop把值传给子组件，子组件用
props演示
$emit,$on演示
总数：{{ total }}
子组件触发事件携带的数据,子组件当前的count值: {{ payload }}
3.插槽(内容分发)
将父组件的内容加到子组件里面叫内容分发
3.一些常用指令
（1）v-text: 用于更新绑定元素中的内容，类似于jQuery的text()方法
（2）v-html: 用于更新绑定元素中的html内容，类似于jQuery的html()方法
（3）v-if: 用于根据表达式的值的真假条件渲染元素
（4）v-show: 用于根据表达式的值的真假条件显示隐藏元素，切换元素的 display CSS 属性
（5）v-for: 用于遍历数据渲染元素或模板
（6）v-on: 用于在元素上绑定事件，可以简写为@，例如
（5）v-bind:用于在元素上绑定属性，例如class或者style,可以简写为 :class :style
v-show和v-if的区别，v-show只是控制标签显示隐藏，而v-if通过逻辑判断控制输出，优先使用v-if
if演示
if content
elseif content
else content
aaaaaaa
v-for 用于遍历数组，对象
遍历数组
{{fruit}}
遍历对象
v-model 用于绑定表单元素
v-on 用于绑定事件 可以简写为@
v-html 渲染html代码
{{ htmlTxt }}
v-bind 用户绑定元素的属性(class,style等) 可以简写为 :
文字
4.计算属性&监听器&方法&过滤器
1.计算属性：如果在模板里面存在复杂的运算，例如
{{ message.replace('AAA','').reverse()}}
建议用计算属性处理
computed:{
procMessage(){
return message.replace('AAA','').reverse();
}
}
//而在模板上则替换为
{{ procMessage }}
2.侦听器（watch）
例如数据a改变后其他数据（例如数据b）需要跟着改变，则我们就用watch里面侦听数据a
watch {
// 传入的newValue 则是改完的值
a(newValue){
this.b = '123'
}
}
3.过滤器，顾名思义，主要 是用于文本的格式化，只能用于{{ }} 和 v-bind
{{ message | removeA | removeB }}
或者
filters:{
removeA(val){
return val.replace('AAA','')
},
removeB(val){
return val.replace('BBB','')
}
}
4.方法methods
methods:{
func(){
alert('clicked')
}
}
5.需要注意的点：
1.计算属性与方法的异同就是，计算属性只要依赖不发生改变，他就直接返回之前计算的结果，不重新计算， 而方法每一次都会运行一次
2.侦听器一般来说处理耗资源的操作，比如异步请求，建议优先考虑使用计算属性来处理
6.代码示例
{{ fullName | removeIllegalChar }}
5组件的组合，插槽(slot)
1.内容分发
父组件将内容
2.单个插槽
除非子组件模板包含至少一个
最初在
3.具名插槽
4.作用域插槽
四.实战
1.安装引入element-ui
命令行安装
npm install element-ui -S
引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import Vue from 'vue'
Vue.use(ElementUI)
2.编写一个简单的登录功能
1.在components创建一个Login.vue
2.先搭建一个单页面组件的框架,
写html代码，注意template标签内一定要有一个html标签包裹所写的内容，例如下面的例子就用
编写脚本
样式
用element-ui组件先编写一个基本的页面
Ray商城登录
登录
3.我们给form，两个input框绑定数据，给表单控件绑定用v-model
在data方法里面，同样也要创建数据模型
loginForm: {
username: '',
password: '',
}
4.表单验证
element-ui 里面有表单校验的例子
在data() 里面加上这个loginRules，用于表单验证
loginRules: {
username: [
{
required: true,
message: "请输入用户名",
trigger: "blur"
}
],
password: [
{
required: true,
message: '请输入密码',
trigger: 'blur'
}
]
}
与组件的绑定
5.请求远程服务器登录
请求服务器要用axios
npm install axios --save
在src目录下创建utils文件夹，然后创建request.js文件
//直接引入
import axios from 'axios'
//因为axios默认发的是json格式数据，我们要做表单提交，需要更改axios配置
// 引入 Qs是为了把json格式，转为formdata 的数据格式
import Qs from 'Qs'
const service = axios.create({
baseURL: 'api',
timeout: 1000,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
transformRequest: [function (data) {
// 对 data 进行任意转换处理
return Qs.stringify(data);
}],
});
创建好request.js的工具类后，建议在src下创建apis文件夹，用于处理服务器请求
在apis下创建login.js，用于定义登录所需的请求服务器接口
import request from '@/utils/request'
export function loginReq(username,password) {
return request.post('/login.json',{
loginName: username,
loginPassword: password
})
}
创建好了之后，可以在Login.vue上调用loginReq接口
//先引入接口
import { loginReq } from '@/apis/Login'
//在methods加上处理方法
methods: {
handleLogin (){
this.$refs.loginForm.validate((valid) => {
if(valid){
loginReq(this.loginForm.username,this.loginForm.password).then((res) => {
console.log(res.data.status);
})
}else{
console.log('用户名或密码错误')
}
})
}
}
//在el-button 加上点击效果
登录
6.登录错误处理
可以用element-ui直接弹出消息提示
this.$message.error("用户名或密码错误");
7.跳转
登录成功之后，需要马上跳转到个人首页
this.$router.push({
name: "Home",
params: {
username: this.loginForm.username
}
});
8.处理跨域，在config/index.js中的dev对象加上
proxyTable: {
'/api/**': {
target: 'http://127.0.0.1:6600/',
changeOrigin: true, //改变源
pathRewrite: {
'^/api': '/'
}
},
}
五.项目打包与后端整合
1.项目打包
打开config文件夹下index.js，修改build 对象的属性assetsPublicPath，改为
assetsPublicPath: './',
dev.env.js 和 prod.env.js 分别对应的是开发环境和生产环境的配置, 可以分别在这两个文件夹添加BASE_API 属性，表示请求服务器的前缀，而生产环境下直接设置为'"/"'就可以了，因为打包后是直接放在服务器下的，跟服务器相同域名
'use strict'
module.exports = {
NODE_ENV: '"production"',
BASE_API: '"/"'
}
在终端输入
npm run build
等运行完成如果出现
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
表示编译成功,在根目录的dist文件夹下，则是编译好的文件
2.集成到Spring boot
把dist下面的所有文件，包括static文件夹 和 index.html 直接扔到 spring boot项目中resources的static文件夹中
重启项目，就完成了