长沙精品网站制作,长沙优化官网公司,开发公司工程会议纪要,房地产重大利好消息之前没有pc端开发基础#xff0c;工作需要使用若依框架进行了一年的前端开发.最近看到一个视频框架一步步集成#xff0c;感觉颇受启发#xff0c;在此记录一下学习心得。视频链接:vue2element ui 快速入门
环境搭建和依赖安装
安装nodejs安装Vue Cli使用vue create proje…之前没有pc端开发基础工作需要使用若依框架进行了一年的前端开发.最近看到一个视频框架一步步集成感觉颇受启发在此记录一下学习心得。视频链接:vue2element ui 快速入门
环境搭建和依赖安装
安装nodejs安装Vue Cli使用vue create project 创建vue2工程修改C:\Users\guchu.vuerc packageManager 为 npm使用npm install axios 安装网络请求框架npm install vue-router3(注意vue2 对应 vue-router3, vue3对应vue-router4)npm i element-ui -S 安装elementUI框架
开发过程
静态登录页面开发
1. 将elementui注入Vue
修改main.js 添加一下内容
import ElementUi from element-ui
import element-ui/lib/theme-chalk/index.css;
Vue.use(ElementUi) 2. 编写静态页面
新增src/pages/login/index.vue文件
templatediv classloginel-form label-width80px refformRef :modelform :rulesrulesel-form-item label用户名 propusernameel-input v-modelform.username placeholder请输入用户名//el-form-itemel-form-item label密码 proppasswordel-input v-modelform.password placeholder请输入密码 typepassword//el-form-itemel-form-itemel-button typeprimary clicklogin登录/el-button/el-form-item/el-form/div
/template
script
export default {name: Login,data() {return {form: {username: ,password: },rules: {username: [{required: true, message: 用户名不能为空, trigger: blur}],password: [{required: true, message: 密码不能为空, trigger: blur}]}}},methods: {login() {this.$refs.formRef.validate(valid {if (valid) {this.$message({type: success, message: 验证通过})} else {this.$message({type: error, message: 验证失败})}})}}
}
/script
style scoped
.login {position: absolute;width: 500px;height: 500px;top: 50%;left: 50%;transform: translate(-50%, -50%);
}/style
知识点说明
元素居中
.login {position: absolute;width: 500px;height: 500px;top: 50%;left: 50%;transform: translate(-50%, -50%);
}top\left从中心点开始布局然后向左上角移动50%。 2. 表单和数据的双向绑定:model form 3. 指定表单验证规则 :rules“rules” prop具体校验字段 this.$refs.formRef.validate进行所有字段校验。
3.路由设置
新建src/router/index.js
import Vue from vue
import VueRouter from vue-router
import Login from ../pages/loginVue.use(VueRouter)
const routes [{path: /login,component: Login
}]
const router new VueRouter({routes,mode: hash
})
export default router;
main.js进行挂载
import router from ./router;
new Vue({router,render: h h(App),
}).$mount(#app)添加router-view 展示路径对应的组件
templatediv idapprouter-view/!-- img altVue logo src./assets/logo.png--!-- HelloWorld msgWelcome to Your Vue.js App/--/div
/template
http://localhost:8080/#/login
添加网络请求
拦截网络请求添加校验头 新建src/utils/request.js
import axios from axiosconst request axios.create({timeout: 5000
})
request.interceptors.request.use(config {const token localStorage.getItem(token)if (token) {config.headers[authorization] token;}return config;}
)
export default request;
创建login具体网络请求 新建src/api/login.js
import request from /utils/request;const login (admin) {return request({url: /dev-api/auth/login,method: post,data: admin})
}
export default {login
};vue.config.js 设置代理地址
const {defineConfig} require(vue/cli-service)
module.exports defineConfig({lintOnSave: false,transpileDependencies: true,devServer: {proxy: {/dev-api: {target: http://localhost:28080,changeOrigin: true,pathRewrite: {[^ process.env.VUE_APP_BASE_API]: /dev-api}}},}
})
对网络接口进行集中管理 新增 src/api/index.js
import login from ./loginexport default {login,
}
将api挂在Vue简化import
import api from ./api;
Vue.prototype.$api api;login页面进行调用 this.$api.login.login(this.form).then(response {const {code, msg, data} response.data;if (200 code) {this.$message({type: success,message: 登录成功})localStorage.setItem(token, data.access_token);this.$router.push(/)} else {this.$message({type: error, message: msg})}})其他
编译运行ESLint 报错 /.eslintrc.js 添加一下内容没有进行新建
module.exports {rules: {*: off},
};/vue.config.js 添加 lintOnSave:false
const {defineConfig} require(vue/cli-service)
module.exports defineConfig({transpileDependencies: true,lintOnSave: false,
})
