VUE

1 项目搭建

1.1 ==注意:====预先安装nodejs==,安装VUE脚手架Vue-cli命令:

install vue-cli -g

1.2 使用命令行创建项目,vue-cli 安装webpack模块 并 初始化项目命令:

vue init webpack 
//配置一些选项:注意安装vue-router

1.3 IDEA 打开项目 Terminal输入:

C:\devspace\vueElement>npm intall

1.4 运行项目 Terminal输入:

C:\devspace\vueElement>npm run dev

2.路由设置

2.1 项目路由配置:src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router);

export default new Router({
    //取消浏览器地址 #
  mode: 'history',
    //路由配置
  routes: [
    {
      //http://www.xxx.com/login
      path: '/login',
      component: Login
    },
      //404页面 过滤器
    {
      path: '*',
      name: 'NotFound',
      component: NotFound
    }
  ]
});

3.页面传参数(页面发起传值->路由配置(props)->传递页面接收)

-页面发起传值
//使用 vue-router路由到指定页面，该方式称之为编程式导航
this.$router.push("/main/"+xxxxx);

-路由配置(props) src/router/index.js
{
    routes: [
    {
      path: '/login',
      component: Login
    },
    {
        //路由地址
      path: '/main/:username',
        //组件名称
      component: Main,
        //传值方式
      props:true,
    },
	]
}

-传递页面接收
    <el-header class="el-header" style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right:15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>{{username}}</span>
      </el-header>
              
<script>
export default {
  props:['username'],
  name: "Main"
}
</script>