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')
}
加载
前端页面的准备