Vue.js 搭建用户管理系统

{
  "users": [
    {
      "name": "Alice",
      "phone": "333-444-555",
      "email": "canidy@ewsdsd.com",
      "education": "dsds",
      "graduationschool": "dsds",
      "profession": "dsds",
      "profile": "dsds",
      "id": "1"
    },
    {
      "name": "Back",
      "phone": "333-444-555",
      "email": "canidy@ewsdsd.com",
      "education": "dsds",
      "graduationschool": "dsds",
      "profession": "dsds",
      "profile": "dsds",
      "id": "2"
    },
    {
      "name": "json",
      "phone": "333-444-555",
      "email": "canidy@ewsdsd.com",
      "education": "dsds",
      "graduationschool": "dsds",
      "profession": "dsds",
      "profile": "dsds",
      "id": "3"
    },
    {
      "name": "cookie",
      "phone": "333-444-555",
      "email": "canidy@ewsdsd.com",
      "education": "dsds",
      "graduationschool": "dsds",
      "profession": "dsds",
      "profile": "dsds",
      "id": "4"
    },
    {
      "name": "小惠惠",
      "phone": "15829705916",
      "email": "1269146785@qq.com",
      "education": "博士",
      "graduationschool": "交通大学",
      "profession": "MBA",
      "profile": "真好看",
      "id": "5"
    }
  ]
  
}

在浏览器中运行 JSON Server

json-server --watch db.json

如果我们每次查看json文件，都这样输一次就比较麻烦，所以我们进行改进，在package.json 文件中的"scripts"内容中添加

 "scripts": {
    "json": "json-server --watch db.json",
  },

这样我们就可以使用 cnpm run json 运行

关于json-server具体内容可参考https://www.npmjs.com/package/json-server

2.2 新建vue项目

下载Node.js
安装淘宝镜像

 npm install -g cnpm --registry=https://registry.npm.taobao.org
 cnpm install cnpm -g   //升级淘宝镜像

安装脚手架

cnpm install –g vue-cli

开启新项目

vue init webpack-simple vcustomers

cd vcustomers

cnpm install

cnpm run dev

2.3 项目目录解析

2.4 初探组件,搭建导航

利用vue的页面组件化思想，将页面切换成几个部分，从而有利于页面的拼装以及代码的维护

App.vue组件

App.vue是我们的主组件，所有页面都是在App.vue下进行切换的，在主组件中搭建导航部分

<template>
  <div id="app">
  <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">用户管理系统</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><router-link to="/">主页</router-link></li>
            <li><router-link to="/about">关于我们</router-link></li>
          </ul>
            <ul class="nav navbar-nav navbar-right">
               <li><router-link to="/add">添加用户</router-link></li>
             </ul>
        </div>
      </div>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
import customers from "./Components/Customers.vue";
import about from "./Components/About.vue";
export default {
  name: "app",
  components: {
    customers: customers,
    about: about
  },
  data() {
    return {
      msg: "我是App组件"
    };
  }
};
</script>

<style lang="scss">
</style>

安装及封装路由

具体就不介绍啦，在之前的博客中有详细的路由配置，传参，封装的文章

import Vue from "vue";
import vueRouter from "vue-router"
// 引入组件
import customers from "../Components/Customers.vue";
import a

最低0.47元/天解锁文章

200万优质内容无限畅学