从零开始使用vue2+element搭建后台管理系统（前期准备）-JZTXT

准备开始

1. 安装node （node -v查询版本号） (下载地址:https://nodejs.org/en/download/)

2. 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 安装 webpack，以全局的方式安装 npm install webpack -g

4.全局安装vue以及脚手架vue-cli npm install @vue/cli -g --unsafe-perm

5.创建vue项目 vue create 项目名称

项目前置配置

选择预设模板：Manually select features：手动配置
选择需要使用的特性：Babel，Router，Vuex，CSS Pre-processors，Linter / Formatter（单元、E2E测试不选，ts根据项目情况选）
Router 选择路由模式：选用history（URL 中不带有 # 符号，但需要后台配置支持）
选择 CSS Pre-processors：Sass（因为element使用Sass）
选择 Linter / Formatter（Pick a linter / formatter config: (Use arrow keys)：这里我试着选了ESLint + Prettier，通常选择ESLint + Standard config
选择在什么时间进行检测（Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)）：
- Lint on save：保存时检测（√）
- Lint and fix on commit：提交时检测
选择在什么位置保存配置文件（Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)）：In dedicated config files
选择是否保存本次配置以便于下次使用（Save this as a preset for future projects? (y/N)）：N

配置好后，会自动生成一个项目，根据终端的提示，cd进入项目后，执行npm run serve，本地环境的运行命令可以自己配

导入element

官方文档：https://element.eleme.cn/#/zh-CN/component/installation

全局导入命令：npm i element-ui -S

在main.js中引入：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import 'element-ui/lib/theme-chalk/index.css'
import ElementUI from 'element-ui'

Vue.use(ElementUI) 
Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

创建路由 (router/index.js)

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
import LoginView from "../views/LoginView.vue";
/**
 * 处理控制台的报错
 * Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/home/list".
 * 添加以下代码
 */
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err);
};
export const constantRoutes = [
  // 重定向
  {
    path: "/",
    redirect: "/login",
  },
  //login
  {
    path: "/login",
    component: LoginView,
  },
];

const createRouter = () =>
  new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    scrollBehavior: () => ({
      y: 0,
    }),
    routes: constantRoutes,
  });

const router = createRouter();

export default router;

// import Vue from "vue";
// import VueRouter from "vue-router";
// import HomeView from "../views/HomeView.vue";

// Vue.use(VueRouter);

// const routes = [
//   {
//     path: "/",
//     name: "home",
//     component: HomeView,
//   },
//   {
//     path: "/about",
//     name: "about",
//     // route level code-splitting
//     // this generates a separate chunk (about.[hash].js) for this route
//     // which is lazy-loaded when the route is visited.
//     component: () =>
//       import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
//   },
// ];

// const router = new VueRouter({
//   mode: "history",
//   base: process.env.BASE_URL,
//   routes,
// });

// export default router;

引入axios

官网:：http://www.axios-js.com/ （基于Promise的HTTP客户端，用于发送HTTP请求）

安装：npm install axios -S

创建一个名为utils的文件夹，在其中创建一个名为request.js的文件：

import axios from 'axios'
 
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})
 
service.interceptors.request.use(
  config => {
    // 在请求发送之前做些什么
    return config
  },
  error => {
    // 对请求错误做些什么
    console.log(error)
    return Promise.reject(error)
  }
)
 
service.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response.data
  },
  error => {
    // 对响应错误做些什么
    console.log(error)
    return Promise.reject(error)
  }
)
 
export default service

最后src/main.js文件的内容为：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "element-ui/lib/theme-chalk/index.css";
import ElementUI from "element-ui";
import request from "./utils/request";

Vue.use(ElementUI);
Vue.config.productionTip = false;
Vue.prototype.$http = request;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

在views文件夹下创建LoginView.vue：

<template>
  <div class="sign-in">
    <el-row>
      <el-col :span="12" :offset="6">
        <h1>后台系统</h1>
        <el-form
          :model="loginForm"
          :rules="loginRules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="手机号：" prop="user_phone">
            <el-input v-model="loginForm.user_phone"></el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="sort">
            <el-input v-model="loginForm.password" type="password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleLogin('ruleForm')">
              立即登录
            </el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import { setBasicInfo } from "@/utils/auth";
// import { Login, signIn } from "../../api/login/login";
// import store from "@/store";
export default {
  data() {
    return {
      loginForm: {
        user_phone: "admin",
        password: "123123",
      },
      loginRules: {
        name: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    async handleLogin(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.$message.error("错了哦!系统错误!");
          // const res = await Login();
          // if (!res.success) return this.$message.error("错了哦!系统错误!");
          // const data = res.data;
          // if (
          //   this.loginForm.user_phone === data.user_phone &&
          //   this.loginForm.password === data.password
          // ) {
          //   // const res2 = await signIn();
          //   const menu = await setBasicInfo();
          //   await store.dispatch("apply/getApply");
          //   const redirect = menu[0].path + "/" + menu[0].children[0].path;
          //   await this.$router.push(redirect);
          // } else {
          //   this.$message.error("错了哦!账号密码不正确!");
          // }
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped lang="scss">
.sign-in {
  padding-top: 100px;
}

h1 {
  text-align: center;
}
</style>

运行效果：