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 axiosnpm 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-iconclass="login-form"ref="ruleForm"><!-- 用户名输入框 --><el-form-item prop="userName"><el-inputv-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-inputv-model="loginForm.password"show-passwordprefix-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