vue-cli起步简单的项目

本周周一至周三在做简单的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

响应式
链接: 响应式.

vue-cli起步简单的项目

猜你喜欢