Spring_Vue前后分离记录1（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')
  }

加载

前端页面的准备