Spring_Vue前后分离记录1（vue从安装到使用的两种方式）前端展示层安装vue.安装成功查看vue版本安装@v

SpringSecurity+Vue

使用nodejs_npm安装vue

安装详细
若按照失败怎重装npm
npm安装失败
在这里插入图片描述
重装npm，再安装vue/cli

$ npm -g install npm
$ npm -g install @vue/cli

在这里插入图片描述
安装成功查看vue版本

安装@vue/cli-init@4.5.9

在这里插入图片描述

创建vue（vue cretate）

create vue

$ vue create helloindex

在这里插入图片描述

init webpack

$ vue init webpack vueproject_name

在这里插入图片描述
安装成功之后发现多了路由

运行vue项目

$ npm run dev

在这里插入图片描述

可视化创建（vue ui）

vue ui

$ vue ui

在这里插入图片描述

手动配置

在这里插入图片描述

选择插件

打开路由router和vuex，关闭代码的校验
在这里插入图片描述

开启历史记录

在这里插入图片描述
安装中

安装完成运行测试成功！

ctrl+c退出

前端展示层

安装vue.js插件

在这里插入图片描述

run serve

$ npm run serve

在这里插入图片描述
vue的目录
 vue的日记
渲染的是各个子组件

创建一个vue展示数据库中的book信息

创建vue并且添加路由
book.vue

<template>
    <div>
        {{msg}}
        <table>
            <tr>
                <td>编号</td>
                <td>书名</td>
                <td>作者</td>
            </tr>
            <tr v-for="item in books">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.auth}}</td>
            </tr>
        </table>
    </div>
</template>

<script>
    export default {
        name: "book.vue",
        data(){
            return {
                msg:"book!",
                books:[
                    {
                        id:1,
                        name:'狂人日记',
                        auth:'鲁迅'
                    },
                    {
                        id:2,
                        name:'呐喊',
                        auth:'鲁迅'
                    }

                ]
            }
        }
    }
</script>

<style scoped>

</style>

router

  {
    path: '/book',
    name: 'Book',
    component: () => import(/* webpackChunkName: "about" */ '../views/book.vue')
  }