基于vue+iview的用户信息管理系统-前端

首先分为前端和后端两个部分

一：前端

前端采用的主要技术是vue+iview
1.首先下载nodejs
2.用npm命令下载vue
3.用vue的脚手架生成一个vue的项目
4.用编程工具打开该项目，该项目如果是默认路径应该在C:/User/你电脑用户名/下
5.在IDEA再加载一次vue
（以上可通过查资料获得）

打开后目录如下

• mainjs*

import Vue from 'vue'
import App from './App.vue'
import iView from 'iview';
import 'iview/dist/styles/iview.css';
import axios from "axios";
Vue.config.productionTip = false
Vue.use(iView);
axios.defaults.baseURL = 'http://localhost:8888/user/';
new Vue({
  render: h => h(App),
}).$mount('#app')

mainjs是存放app层面的js的
引入框架、配置基础路径等都是在这里
引入框架

import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.use(iView);

配置基础路径

axios.defaults.baseURL = 'http://localhost:8888/user/';

当然axios需要提前引入，可以用npm命令引入，也可以用上面方法引入
App.vue
新手的我的理解是程序的主目录吧，用来吧各个页面窜在一起的。

<template>
  <div id="app">
<!--    <img alt="Vue logo" src="./assets/logo.png">-->
<!--    <HelloWorld msg="Welcome to Your Vue.js App"/>-->
    <Demo></Demo>
  </div>
</template>

<script>

import Demo from "./components/Demo";
export default {
  name: 'App',
  components: {
    Demo
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

注意：<template>中只能有一个根节点，也就是必须要用一个容器包在最外面
引入一个组件，需要在这三个地方配置

<Demo></Demo>
import Demo from "./components/Demo";
components: {
    Demo
  }

在components下添加组件例如demo.vue
Demo.vue
到现在你就可以实现简单的helloworld了