本周周一至周三在做简单的vue-cli起步项目。
周一根据网上博客起步成功,链接: 如何搭建一个vue项目(完整步骤).
一、 环境搭建
1.node
下载 官网 链接: 地址.
检查版本 node -v
2.全局安装 vue-cli
npm install --global vue-cli
cd 进项目目录,创建项目:vue init webpack 项目名
回车/y/上下箭头+回车
二、开发环境 vscode
将项目文件夹拖进vscode
周二开始vue项目
1.组件
2.在index.js里配置路由路径
3.父子组件
1)在父组件引入子组件
js内引入:import xxx from ‘…/xx/xxx’
js内注册:组件注册
html内使用:html内加上confirm,传给子组件值 父 -> 子
js methods内 子组件传给父组件的值 子 -> 父
2)子组件
html内点击事件
js methods内 点击按钮 通过$emit传值给父组件 子 -> 父
js props内 父组件传给子组件值 通过props接收 父 -> 子
使用路由页面跳转
第二个页面router-link to=’/xxx’
路由最简单的路由配置、
根路由-> 子路由
|
同级路由
下面展示一些 路由
。
// 页面跳转
// An highlighted block
export default new Router({
routes:[
{
path: '/',
name: 'xxx',
component: xxx
},{
path: '/first',
name: 'First',
component: First
},{
path: '/second',
name: 'Second',
component: Second
}
]})
APP.Vue
下面展示一些 内联代码片
。
// APP.VUE
//
<router-view/>;
周三 1223 页内跳转 路由嵌套
子路由
下面展示一些 内联代码片
。
// 页内跳转
// An highlighted block
{
path: '/',
name: 'Index',
component: Index,
redirect: '/home',
children:[
{
path: 'home',
name: 'home',
component:home
},{
path: 'seller',
name: 'Seller',
component: Seller
},{
path: 'rating',
name: 'Rating',
component: Rating
}
]
},
现在的思路
1.响应式layout
响应式
链接: 响应式.