14-vue项目搭建.md

使用 Vue 脚手架

初始化脚手架

\1. Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）。

\2. 最新的版本是 4.x。

\3. 文档: https://cli.vuejs.org/zh/。

具体步骤

第一步（仅第一次执行）：全局安装@vue/cli。

npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目

vue create xxxx

第三步：启动项目

npm run serve

备注：

如出现下载缓慢请配置 npm 淘宝镜像：npm config set registry https://registry.npm.taobao.org

├── node_modules

├── public

│ ├── favicon.ico: 页签图标

│ └── index.html: 主页面

├── src

│ ├── assets: 存放静态资源

│ │ └── logo.png

│ │── component: 存放组件

│ │ └── HelloWorld.vue

│ │── App.vue: 汇总所有组件

│ │── main.js: 入口文件

├── .gitignore: git 版本管制忽略的配置

├── babel.config.js: babel 的配置文件

├── package.json: 应用包配置文件

├── README.md: 应用描述文件

├── package-lock.json：包版本控制文件

vue跨域处理

vue.config.js

module.exports = {
    devServer: {
        proxy: {
            "/api": {
                target: "http://localhost:9001",
                changeOrigin: true,
                pathRewrite: {
                    "^/api": ""
                }
            }
        },
        disableHostCheck: true
    }
};

安装element-ui

npm i element-ui

/**
 * element-ui   main.js
 */
//全局导入组件
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
//使用element插件
Vue.use(ElementUI);

安装axios

npm i axios

npm i vue-axios





/**
 * axios			main.js 
 * vue-axios
 */
//axios组件，发送请求组件
import axios from "axios";
import VueAxios from "vue-axios";
Vue.use(VueAxios, axios);

requet.js

import Axios from "axios";
const instance = Axios.create({
    baseURL: '/api',
    timeout: 3000,
    withCredentials: true //default
})

export default instance;

login.js

import request from "../request";

//后台用户登录
//这里指定使用login
export const login = (data)=>{
    return request({
        url: "/api/v1/auth/login",
        method: "post",
        data: data,
    })
}

export const logout = (data)=>{
    return request({
        url: "/api/v1/auth/logout",
        method: "post",
        data: data,
    })
}

login.vue

<template>
  <div class="login-container">
    <div class="login-card">
      <div class="login-title">管理员登录</div>
      <!-- 登录表单 -->
      <!--
        model:表单数据对象
        rules:表单验证规则
        status-icon:是否在输入框中显示校验结果反馈图标
      -->
      <el-form
          :model="loginForm"
          :rules="rules"
          status-icon
          class="login-form"
          ref="ruleForm"
      >
        <!-- 用户名输入框 -->
        <el-form-item prop="userName">
          <el-input
              v-model="loginForm.userName"
              prefix-icon="el-icon-user-solid"
              placeholder="用户名"
              @keyup.enter="login()"
          />
        </el-form-item>
        <!-- 密码输入框 -->
        <!--
        @keyup.enter.native
        .native: 就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触 发的。
        -->
        <el-form-item prop="password">
          <el-input
              v-model="loginForm.password"
              show-password
              prefix-icon="iconfont el-icon-lock"
              placeholder="密码"
              @keyup.enter.native="login"
          />
        </el-form-item>
      </el-form>
      <!-- 登录按钮 -->
      <el-button type="primary" @click="login">登录</el-button>
    </div>
  </div>
</template>

<script>
// import { generaMenu } from "../../assets/js/menu";
import {login} from "../../utils/apis/login.js"
export default {
  data: function() {
    return {
      loginForm: {
        userName: "",
        password: "",
      },


      rules: {
        userName: [
          { required: true, message: "用户名不能为空", trigger: "blur" }
        ],
        password: [{ required: true, message: "密码不能为空", trigger: "blur" }]
      }

    };
  },
  methods: {
    login() {
      login(this.loginForm).then(({data})=>{
        console.log(data)
        if (data.code == 200) {
          // 登录后保存用户信息
          // that.$store.commit("login", data.data);
          // 加载用户菜单
          // generaMenu();
          this.$message.success("登录成功");
          // that.$router.push({ path: "/" });
        } else {
          // that.$message.error(data.message);
        }

        // this.$message.success("发送登录请求");
      }).catch(()=>{
        this.$message.error("发送登录请求失败");
      })
    }
  }
};
</script>

<style scoped lang="less">
/*登录容器
  主要加载了一下背景图片
*/
.login-container {
  //开启绝对定位
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  //添加背景图片
  background: url('../../assets/images/infinity-1563061.jpg') center center / cover no-repeat;

  //登录卡片位置
  .login-card {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background: rgba(255,255,255,0.7);
    padding: 170px 60px 180px;
    width: 350px;

    //标题：颜色 + 加粗 + 字体大小
    .login-title {
      color: #303133;
      font-weight: bold;
      font-size: 1rem;
    }

    //表单：位置调整
    .login-form {
      margin-top: 1.2rem;
    }

    //登录按钮: 按钮距离，按钮宽度
    button {
      margin-top: 1rem;
      width: 100%;
    }
  }
}
</style>

App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

安装less 以及 less-loader

"less": "^3.0.4",
"less-loader": "^5.0.0",
"vue-template-compiler": "^2.6.11"

启动项目测试

npm run serve