文章目录
1、vue-cli 安装
win+R
输入cmd
进入命令行
命令行清屏 ds
进入e盘 e:
1、安装 node , node -v 查看安装版本
2、安装 淘宝镜像 ,cnpm -v
查看安装版本
npm install -g cnpm --registry=https://registry.npm.taobao.org
3、安装 webpack , webpack -v
查看安装版本
全局安装 webpack:
npm install --global webpack
不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本,并且在使用不同的 webpack版本的项目中,可能会导致构建失败。
cnpm install webpack -g
// 安装vue-cli脚手架 ,vue-cli -V 查看安装版本
npm install vue-cli -g
// 创建项目
vue init webpack myProject(项目工程名) //会有一些初始化设置
// 安装项目依赖
cd myProject
npm install //下载package.json中的软件包,需进入package.json的文件中中
// 安装 vue路由模块 vue-router 和网络请求模块 vue-resource
cnpm install vue-router vue-resource --save //--save 将安装的模块保存到package.json的文件中中
// 启动项目 运行开发者模式(dev)
npm run dev
2、vue-cli中配置Sass
// 安装依赖的node模块
npm install node-sass --save-dev
npm install node-loader --save-dev
// -g 的意思是将模块安装到全局; -save 的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依赖;
// -save-dev 的意思是将模块安装到项目目录下,并在package文件的devDependencies节点写入依赖
// 在webpack.base.config.js的rules:中加上
{
test:/\.scss$/,
loaderL["style","css","sass"]
}
// 在用sass的地方
<style lang="scss" type="text/css"></style>
3、路由 vue-router
参考:https://www.cnblogs.com/SamWeb/p/6610733.html
- 路由-指向的意思,一种映射(即页面上home按钮对应home内容,about按钮指向about内容),
所以页面上有两个部分:按钮部分 和 对应显示的部分;
在js中配置路由 设置(按钮和内容的)对应关系;
路由中有3个概念:route 、routes 、 router
- route - 一条路由,例如:home按钮->home内容,是一个路由route;
- routes - 一组路由,把页面里的每条路由组合起来,形成一个数组。例如:[{home按钮=>home内容},{about按钮=>about内容}]
- router - 一种机制,类似一个管理者,来管理路由;routes 只是定义了一组路由,是静止的,当点击的时候,通过router 去查找对应的内容并显示
客户端中的路由,实际是dom元素的显示和隐藏;客户端的路由有2中实现方式:基于hash 或 基于 H5 history api
1、页面实现(html文件中)
<router-link to='/home'>Home</router-link> //对应点击按钮部分,属性to 表示点击后,指向的路径
<router-view></router-view> //对应显示部分
2、js中配置路由
// 路由组routes 由 路由route组成的数组,一条路由route是一个对象,由两部分组成:路径path 和 组件component ;
// 例如{path:'/home',component:home}
export default{
// 在router-> index.js首先定义路由组routes:
const routes = [
{path:'/home',component:Home},
{path:'/about',component:About}
]
// 在router-> index.js 中创建router 对路由routes进行管理,router 由构造函数 new vueRouter()创建,接收routes参数;
const router = new vueRouter({
routes, //routes:routes, 的缩写
})
// 配置完成后,在main.js中把router 实例 注入到vue根实例中,就可以使用路由了
const app = new Vue({
el:'#app',
router,
})
}
// 执行过程:用户点击<router-link to='/pathurl'></router-link>的时候,根据to属性 指向的路径 在路由组中查找对应的组件component,
// 然后把组件渲染到<router-view></router-view>所在的地方, 这些都是基于hash实现的;
// 确保:安装了vue-router cnpm install vue-router --save
// 定义组件home.vue 和 about.vue
// 在app.vue中定义router-link 和 router-view
// 在src下创建新文件router.js 定义router,就是定义 路径 到 组件 的映射
// 在router.js文件中:引入vue 和vue-router
// import Vue from "vue";
// import VueRouter from "vue-router";
// 引入组件
// import home form './home.vue'
// import about from './about.vue'
// 告诉vue 使用VueRouter
// Vue.use(vueRouter)
// 定义路由组
// comst routes=[
// {path:'/home',component:home},
// {path:'/about',component:about}
// ]
// 实例化一个路由router
// const router = new vueRouter({
// routes,
// })
// export default router
// 把路由router注入到根实例中,在main.js中引入路由
// import Vue from 'vue'
// import App from './app.vue'
//
// import router from 'router.js'
//
// new Vue({
// el:'#app',
// router,
// render:h=>h(app)
// })
3、重定向
// 3、第一次进入页面时,路径是'/',需要给这个路径相应的配置,给这个路径'/'指向一个组件,例如组件home,
// 但是如果我们写[{path:'/',component:home},{path:'/home',component:home}]会报错,两条路径不能指向同一个组件,
// 所以我们需要《重定向》,重定向就是重新指定一个方向,例如:页面本来访问'/',我们重新指向路径'/home',相应的就会显示home组件
// vueRouter 用redirect 来定义重定向路径
exort default{
const routes = [
{path:'/',redirect:'/home'}, //重定向路径 redirect,首页时显示home路径 对应的组件
{path:'/home',component:home},
{path:'/about',component:about}
]
}
4、路由的实现
// 打开浏览器的控制台,可以看到 router-link 渲染成了a标签,to属性 渲染成了a标签的href属性
// router-view渲染成了我们定义的组件,它其实是一个占位符,他在哪,匹配路径的组件就显示在什么地方
// router-link处于选中状态时,vueRouter会自动给渲染的a标签添加一个样式类名 .router-link-active,所以尅呀修改这个类的样式来修改选中样式
// .router-link-active{color:red;}无效,需要在类名前加上a 才可以 ;未选中的router-link 要改变其样式,可以直接给他一个类名;
a.router-link-active{color:red;}
5、动态路由
// 假如需要在路径中一个动态的部分,比如路径'/user' 有不同的id,在vue-router中动态的部分 以:开头,
// 比如{path:'/user/:id',component:user} 如下,在app.vue文件中
<template>
<router-link to='/home'>home</router-link>
<router-link to='/about'>about</router-link>
<router-link to='/user/123'>用户123</router-link>
<router-link to='/user/456'>用户456</router-link>
<router-view></router-view>
</template>
// 在router.json的文件中
export default{
const router = new vueRouter({
routes:[
{path:'/',redirect:'/home'}, //redirect重定向路径
{path:'/home',component:home},
{path:'/about',coomponent:about},
{path:'/user/:id',component:user} //动态路由,路径中的动态部分以:开始 ,配置了动态id
]
})
}
// 定义user.vue组件
// 当vue-router注入到根实例中后,在组件的内部可以通过 this.$route 来获取router实例,
// this.$route有一个params属性,可以获取动态路由中的动态部分,
// params是一个对象,属性名是路径中定义的 动态部分,如path:'/user/:id' 中的动态部分id;
// 属性值是router-link中to属性中的动态部分,如 to='/user/123'中的动态部分 123;
// 使用computed属性 获得动态路由中的动态部分,如:
<template>
<div>你好 {{ userName}}, 欢迎登录</div>
</template>
<script>
export default{
name:'user',
data(){
return{
}
},
computed:{ //计算属性,
userName(){
return this.$route.params.id //获取动态路由中的动态属性id的值
}
}
}
</script>
// 由于动态路由在来回切换时,都是指向同一个组件,但vue不会销毁再创建这个组件,而是一直《复用》这个组件,因为在一个生命周期里
// 所以切换动态路由的时候无效,
// 所以我们只好在app.vue中 利用watch 来监听$route的变化,所以用监听来实现
<template>
<div>你好 {{ userName}}, 欢迎登录</div>
</template>
<script>
export default{
name:'user',
data(){
return{
userName:''
}
},
watch:{
$route(to,from){ //to 表示你要去的那个组件,from表示你从哪个组件过来的,他们也是两个对象,也有params属性
this.userName = to.params.id;
}
}
}
</script>
6、嵌套路由
// vue 提供childrens 属性,用于配置子路由。他也是一组路由,相当于routes
// 子路由在html部分不变,定义router-link标签用于导航,定义router-view用于渲染对应的组件
<router-link to='/home/apple'>apple</router-link> //to属性注意,路由进入的时候现进入home页 在进入子路由apple
<router-link to='/home/banana'>banana</router-link>
<router-view></router-view>
// router.js 中配置修改如下:
export default{
new VueRouter({ //实例化一个router
routes:[
{path:'/',redirect:'/home'},
{path:'/home',
component:home,
childrens:[
{path:'',component:apple}, //当进入home页时,子路由默认显示的组件
{path:'/apple',compontent:apple},
{path:'/banana',component:banana}
]},
{path:'/about',component:about},
{path:'/user/:id',component:user}
]
})
}
7、命名路由
// 就是给路由一个名字,加了一个name属性,例如
{
path:'/user/:id',
name:'user',
component:user
}
// 有了命名路由,router-link中的to属性就可以使用对象了,当使用对象的时候,to前面加: 表示绑定
<router-link to='/user/123'>用户123</router-link>
<router-link :to='{name:'user',params:{id:123}}'>用户123</router-link>
8、编程式导航
// 编程式导航,主要用在按钮点击上,当点击的时候 跳转到另一个组件,调用this.$router.push()的方法
// 当把router注入到根实例中后,通过,this.$router获得router
// 在方法中跳转界面并传参,在router文件下的index.js中定义路由
{
path:'/detail',
name:'detail', //命名路由,给路由起的名字,有了name 才可以给router-link的to属性使用对象
component:detail
}
// query传参
this.$router.push({
path:'/detail',
query:{
id:123,
type:'ab'
}
})
this.$route.query.id //接收参数
// 地址显示 http://expert.test.sipopsp.com/#/user/usercenter/appointDetail?orderId=27ca6deb-d244-4611-8fdd-b48948caf3b6&state=1&type=4
// params传参
this.$router.push({
name:'detail',
params:{
id:123,
type:'ab'
}
})
this.$route.params.id //接收参数
// 地址显示 http://expert.test.sipopsp.com/#/user/usercenter/appointDetail
// vue路由传参params 与 query 两种方式的区别
// 参考:https://www.cnblogs.com/lulianlian/p/7682790.html
// 用法上的区别:query要用path来引入,params要用name 来引用,接收参数的时候类似,
// 分别是this.$route.query.id 和 this.$route.params.id
// 展示上的区别:query类似于ajax中的get传参,会在浏览器地址栏中显示参数,而params类似post ,不会再地址栏中显示参数;
4、组件之间的通信
// 参考 https://segmentfault.com/a/1190000010530600
// 根据组件之间的关系:父->子 、 子->父 、非父子有所不同