新手摸爬滚打：vue+springboot前后端分离项目演示（一）——vue cli创建vue2项目

 前前言：笔者前期刚刚接触vue与springboot，但由于时间仓促，掌握并不牢固。为防止忘记，便在此记录下来，与君共勉。难免出现各种错误，欢迎指正。

前言：使用npm安装vue cli，npm的使用不再赘述（因为忘了）

创建vue2项目

使用命令行（不记得要不要管理员权限了，还是要吧），cd到心仪的目录下（summer是笔者的工作目录，这里啰嗦这个是因为有时候笔者也忘了怎么cd）

cd d:

d:

cd summer

在工作目录下创建vue项目（demo_front是我起的名字）

vue create demo_front

vue-cli怎么安的，还要安啥，全忘干净了，反正就是这么个东西

我选择vue2，因为只用过vue2

经过等待，vue2项目建好了

在项目目录下打开项目（笔者并不喜欢vscode，但是也没有安webstorm，就直接用intellij idea打开了，由于项目本身也没有特别复杂，体验也没有多么不好）

打开以后的项目目录

引入element-ui

拿到手第一件事干什么呢，当然是配置element-ui啦（由于element-ui是笔者唯一会用的库，于是就顺手安装了这个。不喜欢的可以跳过。建议在编辑器的终端里写，方便点）

（此处建议同时参考element-ui官方文档https://element.eleme.io/#/zh-CN/component/installation）

npm install element-ui --save

三句话，用element-ui十八次

import ElementUI from "element-ui"
Vue.use(ElementUI)
import 'element-ui/lib/theme-chalk/index.css'; // 要写的啦，不写用不了哦

瞎写vue组件

导语：在笔者浅显的认知里，一个.vue文件就是个页面，当然，叫组件也完全ok

那么我们就开始愉快地写个登录页面，假设，我们有个view文件夹，里面有个login.vue

随便写点东西（后面就能知道有多随便了）

这里简单介绍一下这三块，template是写标签（就是那些按钮之类的），script是写数据和jo本（我反正就用我流js写了），style是写样式（同样我流css）

注意那个data的写法，以及各种逗号，太诡异了

如果想深究，建议先阅读官方文档（或者网上教程一抓一大把，笔者就不班门弄斧了

https://cn.vuejs.org/v2/guide/

<template>
<div class="login-form">
<el-form :model="loginForm">
  <el-form-item label="用户名">
    <el-input v-model="loginForm.userName"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input type="password" v-model="loginForm.password"></el-input>
  </el-form-item>
</el-form>
  <el-button @click="login">确认</el-button>
</div>
​
</template>
​
<script>
export default {
  name: "Login.vue",
  data()
  {
    return{
      loginForm:{
        userName:'',
        password:'',
      }
    }
  },
  methods:{
    login()
    {
    //  do something
    }
  }
​
}
</script>
​
<style scoped>
.login-form{
  text-align: center;
}
</style>

配置路由（router）

但是，由于某些不可名状的原因（笔者知其然不知其所以然），只要不是index.vue（这里很遗憾，笔者不想写index.vue）里的东西，写出花来运行起来也看不到的。因此需要配置路由。

D:\summer\demo_front>npm install vue-router -S

在src下新建routes.js（名字并不重要，重要的是要export和import）

先写个字典的框架出来，后面慢慢填，稍安勿躁（注意是[]哦

var routes=[
    
]
export {routes}; // 别忘了这个export

然后跑到main.js里面，写几句话（好像有那么点位置讲究，在App后element-ui前？

import VueRouter from "vue-router";
Vue.use(VueRouter);
import {routes} from "./routes"; // 哼哼，前面export了以后这里才能import哦
var router=new VueRouter({
  mode:'history',
  base:__dirname,
  routes
})

并挂载

new Vue({
  // 注意这个挂载
  router,
  render: h => h(App),
}).$mount('#app')

来看一下main.js全貌（发现我是真的菜，又全忘光咯，还得看着以前写的来

import Vue from 'vue'
import App from './App.vue'
​
import VueRouter from "vue-router";
Vue.use(VueRouter);
import {routes} from "./routes";
var router=new VueRouter({
  mode:'history',
  base:__dirname,
  routes
})
​
import ElementUI from "element-ui"
Vue.use(ElementUI)
import 'element-ui/lib/theme-chalk/index.css';
​
Vue.config.productionTip = false
​
new Vue({
  // 注意这个挂载
  router,
  render: h => h(App),
}).$mount('#app')

还要去App.vue里面加一句话（这里我直接把原先的乱七八糟全删了，包括Helloworld.vue也删了，留着没啥用

<template>
  <router-view></router-view> // this one
</template>
​
<script>
​
export default {
  name: 'App',
}
</script>
​
<style>
​
</style>

然后回到刚才的routes.js里面，把login.vue写进去，注意先import，而且呢，什么[]{}的一定分清楚了，还有逗号加不加的问题，多报报错就习惯啦

import Login from "./view/Login";
var routes=[
    {
        path:"/login", // 这里就是这个页面的路径
        component:Login
    }
]
export {routes};

然后激动人心地去npm run serve，打开终端显示的网址（一般就是8080端口），在尾巴上输入/login（也未必是login了，自己写了啥名字就是啥）

http://localhost:8080/login

然后把自己送走（又不是不能用.jpg

差不多一个前端项目能跑起来的要点就是这些吧，不过感叹一下造轮子真是个伟大的活，前人的智慧也是令人侧目啊