vue脚手架的安装使用/路由

和蔼的阿木木o

已于 2022-10-16 22:57:03 修改

阅读量555

点赞数 1

分类专栏： vue js 文章标签： vue.js 前端 javascript

于 2022-10-11 20:15:05 首次发布

本文链接：https://blog.csdn.net/m0_59642141/article/details/127244002

版权

js 同时被 2 个专栏收录

52 篇文章 1 订阅

订阅专栏

vue

19 篇文章 0 订阅

订阅专栏

vue脚手架

基于node的环境，创建复杂vue项目的模板

1.安装

首先进行 nodejs安装
脚手架全局安装
npm i -g @vue/cli
检测是否安装成功
vue -V

创建项目

切换到根目录/项目需要所在目录
cd /
创建一个myvue项目
vue create myvue
创建步骤

sass安装

1. 创建项目的时候安装
1. 已经有项目了
  ----cd 项目目录
  npm i sass sass-loader -D
  npm run serve

less安装

<style lang="less">
npm i less less-loader -D
npm run serve

运行项目

切换到项目目录
cd myvue
运行项目
npm run serve

什么时候用props

当数据不需要修改，且需要从父组件获取

什么时候用data

当数据需要修改的时候
能用props解决就用props

vue路由

单词

Router 路由
path 路径
meta 元信息
component 组件
beforeEach 离开每一个

SPA

singlePageApplication一个网站的所有一碗面都集成在一个html文件里面，通过切换div模拟页面的切换

优点

资源共用
前后端分离
页面切换流畅

缺点

对SEO搜索引擎不友好

原理

地址改变
不刷新页面
监听地址栏变化实现页面局部更新

Hash路由

锚点（hash）变化不会刷新页面
window.onhashchange

历史记录路由

H5 新增特性
history.onpopstate

内置组件App.vue

改变地址栏，改变hash值的
router-link
存放页面
router-view

路由配置

在/router/index.js里配置
{ path:"/", //配置的地址 component:HomeView //配置的页面组件 }

普通配置

{path:"/user", name:"user", component:()=>import(xxx) }

传参配置

{ path:"/produce/:id", name:"", component:()=>import(xxx) }

子路由配置

{
path:"/admin",
 name:"admin",
 component:()=>import(xxx)
 children:[
   {path:"dash",component:yyy},
   {path:"dash",component:zzz},
   //重定向
   {path:'',redirect:'dash'}
  ]
  }

404配置

1. 配置在最后面
2. path值为*
{ path:"*", component:NoMatch }

路由的别名

{ path:"/", alias:["/index","/main"] }

$route当前路由信息

name 名称
params 路由参数
path 路径
fullPath全路径
query查询参数
hash哈希
meta 元信息

路由组件

切换路由
router-link
to属性改变地址栏
to="/user"
:to="'/user'"
:to="{name:'user',params:{},query:{}}"
:to="{path:''/produce/123'}"
router-view存放路由
router-link to 跳转

编程跳转$router

.push("/") 跳转并添加一个历史记录
.replace("/") 跳转替换（不留当前历史记录
.back() 返回
.forward() 前进
.go(-1) 返回一步
.go(1) 前进一步

导航守卫

组件内部
- 进入前 (特别强调，没有this)
  beforeRouteEnter(to,from,next){}
- 更新前
  beforeRouteUpdate(to,from,next){}
  produce/abc =>produce/123
- 离开前
  beforeRouteLeave(to,from,next){}
路由独享
beforeEnter
全局守卫
- 全局前置守卫
  router.beforeEach((to,from,next)=>{ })
  有next ，next必须被执行
- 全局后置守卫
  router.afterEach((to,from)=>{ })

plugin弹框插件

1.插件是一个对象，必须实现install办法
2.插件需要在vue文件中使用vue.use(插件)
3.插件方法
vue.extend(.vue文件) //继承.vue文件的构造函数
instance.$mount(dom) //手动挂载
instance.$el //实例的真实dom
Vue.protoytpe.$toast = Toast //将插件挂载到全局的（(所有组件的实例都将拥有插件的方法和属性)

Notify 通知插件

js //保存一致
.vue
template ==> <div class="notify">ffmsgl</div>
js
data
msg通知的内容
color文本的颜色
bgColor背景颜色
methods
success(msg) //成功提示
warn(msg) //警告
danger(msg) //危险警告
show(msg,bgColor,color) //显示
hide() //隐藏