1.安装nodejs服务器。
java
项目可以运行在
tomcat
服务器，开始完成前后端完全分离。前端有自己独立的工程。我们需
要把前端独立的工程运行起来。
---
运行在
nodejs
服务器下。
理解为
tomcat
服务器
安装成功后在命令窗口查看
1.1 安装npm
java
项目需要依赖
jar
，安装
maven
。 前端项目需要依赖第三方的插件。比如
axios elementui
echarts
前端也需要一个管理组件的软件。
npm.
如果
package.json
文件 类似于
pom.xml
文件。
npm
通过该文件
package.json
文件安装依赖的插件。
如果安装了
node
默认 安装了
npm.
验证
:
npm -v
2. 安装vue cli的脚手架
帮你创建前端项目工程。它的安装需要依赖上面的npm
2.1 安装vue cli
npm install -g @vue/cli
-g: global
全局
验证是否安装成功
:
vue --version
3. 使用vuecli搭建vue前端项目
第一种使用命令
: vue create
第二种使用图形化界面：
vue ui
3.1 安装相应的插件--elementui
安装插件有两种方式
:
第一种使用命令
: npm i element-ui -S
第二种使用图形化
:
2.2 安装axios依赖
发送异步请求的。
第一种命令
: npm i -S axios
第二种图形化
:
如下
4. 使用客户端软件打开vue工程
vscode [
专业的前端工具
]
webstorm [idea
团队开发的软件
--
只要会使用
idea
那么也会使用该工具
]
hbuilder [
适合前端
]
在
webstorm
中启动该项目
vue
原理
5. 组件化开发
组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构 [html] 、样式 [css] 、行为[js] 。好处：便于维护，利于复用 → 提升开发效率。组件分类：普通组件、根组件。比如：下面这个页面，可以把所有的代码都写在一个页面中，但是这样显得代码比较混乱，难易维护。咱们可以按模块进行组件划分
6. 根组件 App.vue
1.
根组件介绍
整个应用最上层的组件，包裹所有普通小组件
2.
组件是由三部分构成
三部分构成
template
：结构 （有且只能一个根元素）
script: js
逻辑
style
： 样式
(
可支持
less
，需要装包
)
让组件支持
less
（
1
）
style
标签，
lang="less"
开启
less
功能
（
2
） 装包
: yarn add less less-loader -D
或者
npm i less less-loader -D
7. 普通组件的注册使用
普通组件的注册有两种方式。
（
1
）局部注册：
（
2
）全局注册
普通组件的注册使用
-
局部注册
1.
特点：
只能在注册的组件内使用
2.
步骤：
1.
创建
.vue
文件（三个组成部分）
2.
在使用的组件内先导入再注册，最后使用
3.
使用方式：
当成
html
标签使用即可
<
组件名
></
组件名
>
4.
注意：
组件名规范
—>
大驼峰命名法， 如
AAAHeader
5.
语法：
// 导入需要注册的组件
// import 组件对象 from '.vue文件路径'
import AAAHeader from './components/AAAHeader'
export default {• // 局部注册
components: {
'组件名': 组件对象,
AAAHeader:AAAHeader,
AAAHeader
}
}
普通组件的注册使用
-
全局注册
1.
特点：
全局注册的组件，在项目的
任何组件
中都能使用
2.
步骤
1.
创建
.vue
组件（三个组成部分）
2.
main.js
中进行全局注册
3.
使用方式
当成
HTML
标签直接使用
<
组件名
></
组件名
>
4.
注意
组件名规范
—>
大驼峰命名法， 如
AAAHeader
5.
语法
Vue.component('
组件名
',
组件对象
)
8. 组件通信
1.
什么是组件通信？
组件通信，就是指
组件与组件
之间的
数据传递
组件的数据是独立的，无法直接访问其他组件的数据。
想使用其他组件的数据，就需要组件通信
2.
组件之间如何通信
3.
组件关系分类
1.
父子关系
2.
非父子关系
5.
父子通信流程
1.
父组件通过
props
将数据传递给子组件
[
重点
]
2.
子组件利用
$emit
通知父组件修改更新
6.
父向子通信代码示例
父组件通过
props
将数据传递给子组件
父组件
App.vue
父向子传值步骤
1.
给子组件以添加属性的方式传值
2.
子组件内部通过
props
接收
3.
模板中直接使用
props
接收的值
9.路由介绍
9.1.思考
单页面应用程序，之所以开发效率高，性能好，用户体验好
最大的原因就是：
页面按需更新
比如当点击【发现音乐】和【关注】时，
只是更新下面部分内容
，对于头部是不更新的
要按需更新，首先就需要明确：
访问路径
和
组件
的对应关系！
0.
子组件向父组件传值
1.
什么是路由
2.
如何配置路由
3.
路由传参
4.
前端访问后端代码
5
访问路径 和 组件的对应关系如何确定呢？
路由
路由
:
就是路径和组件建立关联关系的过程。
9.2 vue中如何使用路径
我们刚才演示了路由的基本使用。
---
通过在地址栏输入路由地址，在根据路由配置找到对应的组
件，并渲染该组件。
（
1
）第一种
:
声明式路径
<router-link to="/login">登录</router-link>
（
2
）第二种
:
编码式路径
methods:{
my(){
//路由跳转---编码式路由
this.$router.push("/register")
}
}9.3. 路由传递
9.3.1 声明路由--查询参数
类似于之前
路由也是这种模式
对应的组件接受查询参数。
this.$route.query.
参数名
9.3.2 声明路由--动态路由参数
2.
路由配置时
: { path="/
路由路径
/:
参数名
"}
3.
相应的组件中接受参数值
this.$route.params.
参数名
9.3.3 查询参数和动态路由参数
1.
查询参数传参
(
比较适合传
多个参数
)
1.
跳转：
to="/path?
参数名
=
值
&
参数名
2=
值
"
2.
获取：
this.$route.query.
参数名
2.
动态路由传参
(
优雅简洁
，传单个参数比较方便
)
1.
配置动态路由：
path: "/path/:
参数名
"
2.
跳转：
to="/path/
参数值
"
3.
获取：
this.$route.params.
参数名
<router-link to="/login">
登录
</router-link>
1
methods:{
my(){
//
路由跳转
---
编码式路由
this.$router.push("/register")
}
}
const originalPush = VueRouter.prototype.push
//
修改原型对象中的
push
方法
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
5
注意：动态路由也可以传多个参数，但一般只传一个
准备传递参数
---
查询参数和动态路由参数
9.3.4 编码路由--查询参数
my(){
//路由跳转---编码式路由
//简写版:
//this.$router.push("/my?name=ldh&age=18")
//完整版
this.$router.push({
path: "/my",
query:{
name:"张嘉琪",
age:88
},
})
}
接受：
created() {
this.name=this.$route.query.name;
this.age=this.$route.query.age;
}9.3.5 编码路由--动态路由参数
//动态路由参数--简介版
// this.$router.push("/my/zcj")
this.$router.push(
{
// path:"/my", //表示路由的path的值
name:"My", //表示路由的名称
params:{
key:"wzy"
}
}
)
//path不能和params配合使用。 name可以和params配合使用
接受参数
//create()
created() {
this.name=this.$route.params.key;
// this.name=this.$route.query.name;
// this.age=this.$route.query.age;
}当出现NavigationDuplicated: Avoided redundant navigation to current location: "/register".问题时
解决方案
: /router/index.js
添加如下代码
Vue-Router3.0
const originalPush = VueRouter.prototype.push
//修改原型对象中的push方法
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
