创建vue项目

1. 创建项目，testvue为项目名称

vue init webpack testvue

前三个为项目名称，描述和作者，第四步选择框起来的，后面的一路选择no

2. 进入项目，安装相关组件，并启动测试

# 安装路由
npm install vue-router --save-dev
# 安装axios，跨域请求
npm install axios -S
# 安装element-plus
npm install element-plus --save
npm install element-ui -S
# 安装sass加载器
npm install sass-loader node-sass --save-dev
# 安装依赖
npm install
# 启动测试
npm run dev

3. 创建views：展示模板视图和router：路由
   
   index.js内容

import Vue from 'vue'
import VueRouter from "vue-router";

// 导入相关组件页面
import Main from "../views/Main";
import Login from "../views/Login";
import Form from "../components/Form";

// 子路由
import List from "../views/user/List";
import Profile from "../views/user/Profile";

// 配置加载
Vue.use(VueRouter);

// 配置路由规则
export default new VueRouter({
  mode: 'history', // 配置访问链接不带#号
  routes: [
    {
      path: '/login',
      component: Login
    }, {
      path: '/main',
      component: Main,
      children: [ // 子路由，当前页面显示别的页面内容
        {
          path: '/user/profile',
          component: Profile
        }, {
          path: '/user/list',
          component: List
        }
      ]
    }, {
      path: '/form',
      component: Form
    }
  ]
});

4. main.js添加相关组件

import Vue from 'vue'
import App from './App'
import router from './router'

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(router);
Vue.use(Element);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

5. App.vue展示相关组件页面，主要就是router-view

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
  
export default {
  name: 'App'
}
</script>

6. 参数传递
   第一种

• a、主页面链接跳转页面携带参数

          <el-menu-item>
            <router-link :to="{name:'c',params:{a:2,b:3}}">文件列表</router-link>
          </el-menu-item>
          <el-menu-item>
            <router-link :to="{name: 'abc', params:{id:1}}">用户列表</router-link>
          </el-menu-item>

• b、路由页面配置参数接收

 {
      path: '/main',
      component: Main,
      children: [ // 子路由
        {
          path: '/user/profile/:a/:b',
          name: 'c',
          component: Profile
        }, {
          path: '/user/list/:id',
          name: 'abc',
          component: List
        }
      ]
    },

• c、展示页面使用参数

<template>
  <h1>profile文件列表呀
    {{$route.params.a}}
    {{$route.params.b}}
  </h1>
</template>
<template>
  <div>
    {{$route.params.id}}
    <h1>list哈哈哈哈哈</h1>
  </div>
</template>

第二种：使用prop形式

• a、主页面链接跳转页面携带参数

          <el-menu-item>
            <router-link :to="{name: 'ccc', params:{auto:23,params2:22}}">参数练习</router-link>
          </el-menu-item>

• b、路由页面配置参数接收和增加prop配置

{
      path: '/params/:auto/:params2',
      component: Params,
      name: 'ccc',
      props: true
    }

c、展示页面使用参数

<template>
  <div>
    <h1>aaaaaaaaaaaaaaa</h1>
    {{auto}}
    {{params2}}
  </div>
</template>

<script>
    export default {
        props: ['auto','params2'],
        name: "Params"
    }
</script>

解决部署vue项目样式错乱问题

main.js中把引用样式放在最前面./APP’和’./router’放在element css的后面，router放到最后
还有就是每个vue组件里的style要加scoped,这很关键，起到css不被组件之间重叠的作用

import Vue from 'vue'

// 先引入第三方组件
import Element from "element-ui";
import 'element-ui/lib/theme-chalk/index.css';

// 后引入router
import App from './App'
import router from './router'
import axios from "axios";