vue-1

具体内容

组件的基础

创建一个组件

使用组件

html --》组件 名字.vue

脚手架 vue-cli node 服务器 一路next

使用npm cnpm

创建项目

注意：以下全篇写的(c)npm代表可以使用npm或者cnpm命令

Ⅰ.使用npm命令或者cnpm命令创建

安装node（步骤省略，一路next即可）

安装成功以后执行命令：node -v

出现如下界面即为安装成功

1.安装淘宝镜像

为了创建项目的时候快一点可以安装中国的镜像网站

g = global

npm node服务器中自带的命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完以后 使用npm命令或者是cnpm命令

2.安装vue-cli

cnpm install -g vue-cli

3.安装webpack

cnpm install webpack -g

4.安装打包的客户端 (c)npm install webpack-cli -g

cnpm install webpack-cli -g

创建项目

npm uninstall vue-cli

npm install @vue-cli

启动的命令：

路由

安装路由

(c)npm install vue-router --save-dev 保存到开发配置里面（执行命令的时候一点过需要在当前的工作空间下）

安装失败的时候使用cnmp命令

使用路由

创建router文件夹 /下面又一个 index.js的文件

a.导入路由（router/index.js页面）

import Vue from 'vue'

import VueRouter from 'vue-router'

//使用路由

 Vue.use(VueRouter);

b.定义组件使用组件

import index from '../src/components/index'

import con from '../src/components/content'

//暴露路由

export default new VueRouter({

//定义路由的规则

//定义路由的规则

  routes:[

    ///定义路由的规则

    {

      path:"/index",

      name:"index",

      component:index

  },{

    path:"/con",

      name:"con",

    component:con

    }

  ]

})

在组件里面配置路由的链接

<router-link to="/index">首页</router-link>

<router-view></router-view> 组件存放的位置

加入elementui

(c)npm install element-ui -S

如果项目运行时候有问题就使用如下命令:

安装elementui命令:

(c)npm install element-ui -S

使用elementui

在main.js里面加入如下代码：

import ElementUI from 'element-ui';

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

使用elementui布局

上下右布局效果如图

想要实现点击左边导航栏在右边区域显示的话需要使用嵌套路由，

嵌套路由

嵌套路由在使用的时候只需要多加一个children属性即可，设置的嵌套路由的代码如下图

更改代码结构

设置完路由以后更改代码的结构，将app.vue里面设置为承载route内容的容器

页面布局的代码

让左边的导航栏的route遵循router的定义原则

主要代码如下：

<template>

  <el-container>

    <el-aside width="200px">

       <!--左边-->

      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">

        <el-radio-button :label="false">展开</el-radio-button>

        <el-radio-button :label="true">收起</el-radio-button>

      </el-radio-group>

      <el-menu default-active="1-4-1"

               class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"

               :collapse="isCollapse"

               :router="true"

      >

        <el-submenu index="1">

          <template slot="title">

            <i class="el-icon-location"></i>

            <span slot="title">导航一</span>

          </template>

          <el-menu-item-group>

            <span slot="title">分组一</span>

            <el-menu-item index="1-1"  :route="{name:'Index'}">选项1</el-menu-item>

            <el-menu-item index="1-2" >选项2</el-menu-item>

          </el-menu-item-group>

          <el-menu-item-group title="分组2">

            <el-menu-item index="1-3" :route="{name:'sec'}">选项3</el-menu-item>

          </el-menu-item-group>

          <el-submenu index="1-4">

            <span slot="title">选项4</span>

            <el-menu-item index="1-4-1" :route="{name:'sec'}">设置</el-menu-item>

          </el-submenu>

        </el-submenu>

        <el-menu-item index="2">

          <i class="el-icon-menu"></i>

          <span slot="title">导航二</span>

        </el-menu-item>

        <el-menu-item index="3" disabled>

          <i class="el-icon-document"></i>

          <span slot="title">导航三</span>

        </el-menu-item>

        <el-menu-item index="4">

          <i class="el-icon-setting"></i>

          <span slot="title">导航四</span>

        </el-menu-item>

      </el-menu>

      <!--左边结束-->

​

    </el-aside>

    <el-container>

      <el-header>

​

        <el-row style="margin: 10px 15px">

​

        <div @click="jumpTo('/ttt')"><span style="color: #555;font-size: 14px;">个人信息</span></div>

        </el-row>

​

​

      </el-header>

      <el-main>

        <!--嵌套路由-->

        <router-view></router-view>

      </el-main>

      <el-footer>这就是一个底部文件</el-footer>

    </el-container>

  </el-container>

</template>

​

<script>

    export default {

        name: "tmain",

      data() {

        return {

          isCollapse: false

        };

      },

      methods: {

        handleOpen(key, keyPath) {

          console.log(key, keyPath);

        },

        handleClose(key, keyPath) {

          console.log(key, keyPath);

        },jumpTo:function(url){

         // alert(url);

          this.$router.push(url);

        }

      }

    }

</script>

​

<style>

​

</style>

​

​

嵌套路由：

配置的路由 router/index.js

import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'

​

Vue.use(Router)

​

const originalPush = Router.prototype.push

Router.prototype.push = function push(location) {

  return originalPush.call(this, location).catch(err => err)}

​

export default new Router({

  mode: 'history',

  base: process.env.BASE_URL,

  routes: [

    {

      // 重定向，用来指向一打开网页就跳转到哪个路由

      path: '/',

      redirect: '/tmain'

    },

    {

      path: '/tmain',//必须以/为开头

      name: 'tmain',

      component: () => import('@/components/tmain.vue'),

      children:[

        {

          path:'/', // 嵌套路由里默认是哪个网页

          redirect: '/index'

        },

        {

          path:'/index', // 首页的路由

          name:'Index',

          component:() => import('@/components/index.vue')

        },

        {

          path:'/sec', // 首页的路由

          name:'sec',

          component:() => import('@/components/sec.vue')

        }

      ]

    },

    {

      path:'/*', // 注意，这里不是嵌套路由了，这是为了设置404页面，一定要放在最后面，这样当服务器找不到页面的时候就会全部跳转到404

      name:'not found',

      component: () => import('@/components/404.vue')

    }

  ]

})

​

跨域请求

@CrossOrigin

配置在后台的路由上面

前台调用：

显示在他变了表格里面

打包的时候使用的命令如下：

cd dist

npm install -g http-server

hs

如果打包以后访问页面的时候出现的是空白，就证明路径有问题，修改方法如下：

找到config/index.js

如果静态资源文件访问不到，将vue.config.js文件下的publicPath改成 ./

后台如果不想设置注解的话可以直接加一个拦截器将所有的跨域请求都放行

import org.springframework.context.annotation.Configuration;

import org.springframework.web.servlet.config.annotation.CorsRegistry;

import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration

public class CorsConfig implements WebMvcConfigurer {

    @Override

    public void addCorsMappings(CorsRegistry registry) {

        registry.addMapping("/**")

                .allowedOrigins("*")

                .allowCredentials(true)//允许携带cookie的值

                .allowedMethods("GET","POST")

                .maxAge(3600);

    }

}

或者写成

@Configuration

public class crossConfig {

    @Bean

    public CorsFilter corsFilter() {

        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

        final CorsConfiguration corsConfiguration = new CorsConfiguration();

//        corsConfiguration.setAllowCredentials(true);

        corsConfiguration.addAllowedHeader("*");

        corsConfiguration.addAllowedOrigin("*");

        corsConfiguration.addAllowedMethod("*");

        source.registerCorsConfiguration("/**", corsConfiguration);

        return new CorsFilter(source);

    }

}