准备开始
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>
运行效果：
