vue脚手架

标签：vue component user router path 脚手架 路由

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

基于node的环境

创建复杂vue项目的模板

安装

1. nodejs安装

2. 脚手架全局安装

npm i -g @vue/cli

3. 检测是否安装成功

   vue-V

创建项目

切换到根目录/项目需要所在目录

cd/

创建一个myvue项目

vue create myvue

运行项目

切换到项目目录

cd myvue

运行项目

npm run serve

.vue文件

1. vue组件
2. 复习vue的语法
3. 加载提示组件

什么时候用props

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

什么时候用data

当数据需要修改的时候

能用props解决就用props

spa

singlePageApplication

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

优点

1. 资源公用
2. 前后端分离
3. 页面切换流畅

缺点

1. 对SEO搜索引擎不友好

原理

地址改变

不刷新页面

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

Hash路由

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

window.onhashchange

历史记录路由

H5新增特性

history.onpopstate

Vue路由

内置组件App.vue

router-link

改变地址栏，改变hash值的

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) 前进一步

标签：vue,component,user,router,path,脚手架,路由
From： https://www.cnblogs.com/aureazjl/p/16782710.html