一、环境安装
node,js >6
安装淘宝镜像加速器（cnpm）或者访问淘宝镜像器
用管理员身份运行cmd
安装nrm（npm管理器）
二、
安装vue-cli或者vite
三、命令行创建项目
然后找到项目目录、
创建项目
选择骨架
选择需要的东西
选择模式
选择配置信息的位置
是否是模板
剩下的自动创建项目
四、了解目录结构
了解基本配置内容{Babel、pacage\package-lock}
了解目录结构
五、安装路由并了解路由配置等
安装路由
官网
使用案例
先安装、在使用
1、在src下面建立router目录
2、在router目录建立index.js
3、在index.js里面写
// history模式
import {
createRouter,
createWebHashHistory,
} from 'vue-router'
import Login from '../views/Login.vue'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Login',
component: Login,
hidden: true
},
{
path: '/home',
name: '导航一',
component: Home,
}
]
// 创建路由对象
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router;
4、在main.js里写
import router from './router'
createApp(App).use(router).mount('#app')
六、安装element ui库、vue3和vue2对应的element 不一样
安装element element-plus.gitee.io/zh-CN/guide…
安装完后在main.js里写
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.mount('#app')
写loging页面、写element表单和验证
<template>
<div>
<el-form :rules="rules" ref="loginForm" :model="loginForm"
class="loginContainer">
<h3 class="loginTitle">系统登录</h3>
<el-form-item prop="username">
<el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" auto-complete="false" v-model="loginForm.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox>
<el-button type="primary" style="width: 100%" @click="submitLogin">登录
</el-button>
</el-form>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
checked: true,
loginForm: {
username: "admin",
password: "123456"
},
// 绑定校验 prop
rules: {
username: [{required: true, message: "请输入用户名", trigger: "blur"},],
password: [{required: true, message: "请输入密码", trigger: "blur"}],
},
};
},
methods: {
submitLogin() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
console.log(valid);
// this.postRequest("/login", this.loginForm).then(resp => {
// if (resp) {
// // 存储用户token
// const tokenStr = resp.obj.tokenHead + resp.obj.token;
// window.sessionStorage.setItem("tokenStr", tokenStr);
// // // 跳转首页
// this.$router.replace("/home");
// // 页面跳转
// // let path = this.$route.query.redirect;
// // this.$router.replace(path === "/" || path === undefined ? "/home" : path);
// }
// });
} else {
this.$message.error("请输入所有字段");
return false;
}
});
},
},
};
</script>
<style>
.loginContainer {
border-radius: 15px;
background-clip: padding-box;
margin: 180px auto;
width: 350px;
padding: 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
}
.loginTitle {
margin: 10px auto 30px auto;
text-align: center;
}
.loginRemember {
text-align: left;
margin: 0 0 15px 0;
}
.el-form-item__content {
display: flex;
align-items: center;
}
</style>
element 的布局容器和菜单
七、安装ajios，做异步处理用的，类似于Ajax
安装ajios和vue-axios；www.axios-js.com/zh-cn/docs/
安装完后在main.js里写
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import axios from 'axios'
import VueAxios from 'vue-axios'
const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.use(VueAxios, axios)
app.mount('#app')
请求
this.$http.post('http://real-think.jmwl51.com/admin/index/login',this.loginForm,{emulateJSON:true}).then(function(res){
console.log(res);
},function(res){
console.log(res);
});
封装ajios、设置响应拦截器、设置请求拦截器
安装和引入后在src目录下建立utils目录；封装工具使用
在utils目录下建立request.js用来封装
import axios from 'axios'
import { ElMessageBox, ElMessage } from 'element-ui'
// create an axios instance
const service = axios.create({
baseURL:"htpp://real-think.jmwl51.com", // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
// request interceptor
service.interceptors.request.use(
config => {
// do something before request is sent
// if (store.getters.token) {
// // let each request carry token
// // ['X-Token'] is a custom headers key
// // please modify it according to the actual situation
// config.headers['X-Token'] = getToken()
// }
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
/**
* If you want to get http information such as headers or status
* Please return response => response
*/
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
const res = response.data
// if the custom code is not 20000, it is judged as an error.
if (res.code !== 20000) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// to re-login
MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
confirmButtonText: 'Re-Login',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload()
})
})
}
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
element表单验证
八、cookie用来保存登录状态
安装js-cookie
九、安装vuex 状态管理模式 + 库
安装vuex
十、vue的导航守卫和font-awesome 图标安装、当然可以使用element 自带的图标
路由“导航守卫”
图标：font-awesome 安装、导入和使用
头部logo和element下拉菜单、头像
设置：element的标签页和vue组件化
表单和表格、按钮等
