This is the 21st day of my participation in Gwen Challenge

Prepare a front page for your own blog, using VueCLi, based on Vue+Element UI.

Install VueCli globally

npm install -g @vue/cli
Copy the code

Initialize the project

vue create tmier-blog
Copy the code

Simple operation

cd ./tmier-blog
npm run serve
Copy the code

If you see the following interface, the project is successfully initialized.

Installing a plug-in

Install axioas and Element-UI first, and install any plug-ins you need later

npm i element-ui axios
Copy the code

Element using

src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// Fully introduce element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
// Vue.use
Vue.use(ElementUI);
new Vue({
  router,
  store,
  render: h= > h(App)
}).$mount('#app')
Copy the code

Axios secondary encapsulation

Once YOU have AXIOS installed, simply wrap axiOS

Create a new utils folder under SRC, then create SRC /utils/request.js

import axios from 'axios'
const request = axios.create({
  baseURL: 'http://127.0.0.1:1996/'.// Configure the base path
  timeout: 1000 * 15.headers: {
    "Content-type": "application/json; charset=UTF-8",}})// Request interceptor
request.interceptors.request.use(
  request= > {
    return request
  },
  error= > {
    // If an error is reported, handle the error})// Want interceptors
request.interceptors.response.use(response= > {
  return response
}, error= > {})
export default request
Copy the code

Then create an API folder under SRC and create SRC/API /login.js

import request from '@/utils/request.js'
export function LoginAPI (username, password) {
  return request({
    url: `/api/user/login`.data: {
      username,
      password
    }
  })
}
Copy the code

Bowdlerize routing

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '.. /views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/'.name: 'Home'.redirect: {name: 'login'}
    // component: Home
  },
  {
    path: '/login'.name: 'login'.component: () = > import('@/views/Login/index.vue')}]const router = new VueRouter({
  routes
})

export default router
Copy the code

Create a Login folder under SRC /views and create index.vue under it

<template> <div class="tmier-login"> <h1> <el-input class="tmier-login-input" V-model ="username"></el-input> <el-input class="tmier-login-input" v-model="password" type="password"></el-input> <el-button type="primary" Class ="tmier-login-input" @click="clickLogin"> </el-button> </div> </template> <script {LoginAPI} from '@/api/login.js' export default { components: {}, data() { return { username: '', password: '' } }, computed: {}, methods: { async clickLogin() { await LoginAPI(this.username, this.password) } } } </script> <style lang='scss' scoped> //@import url() .tmier-login { width: 100%; height: 100%; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; .tmier-login-input { width: 300px; margin-bottom: 20px; } } </style>Copy the code

Well, today I will first write here, the login page is simple to write, tomorrow have time to write in their own, for the front-end page better

Took a look at the frosted glass, thought it was a good one, and saw if it could do that

Logic is still poor, now is just the simplest, have time to do it again