vue入门配置

1.首先下载插件

用于Vue.js的单页面应用路由管理
​
npm install vue-router
​
用于浏览器和node.js的连接
​
npm install axios
​
npm install element-plus
​
vue.js的状态管理库
​
npm install pinia
​
用于pinia 用于持久化存储状态
​
npm install pinia-plugin-persist
​
图标库
​
npm install font-awesome
​
查询字符串解析和字符串化库，用于处理axios的请求和响应
​
npm install qs

2.配置main.js

import { createApp } from 'vue'
import App from './App.vue'
//配置路由
import router from './router/index.js'
//配置elementPlus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//配置Pinia
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'
​
const pinia = createPinia()
pinia.use(piniaPersist)
​
createApp(App)
    .use(router)
    .use(ElementPlus)
    .use(pinia)
    .mount('#app')

3.修改App.vue

该文件是用来展现页面的 但是这不是单页面应用，所以在<template>中加入<router-view>就可以在页面展示

<template>
  <router-view></router-view>
</template>
​
<script>
export default {
  name: "App",
};
</script>
​
<style>
</style>

4.在views中创建页面

例如登陆页面

<template>
  <div class="login-bg">
    <div class="login">
      <div class="message">东软颐养中心</div>
      <div id="darkbannerwrap"></div>
      <form>
        <input name="phoneNumber" v-model="objForm.phoneNumber" placeholder="手机号" type="text" />
        <hr class="hr15" />
        <input
          name="password"
          v-model="objForm.password"
          placeholder="密码"
          type="password"
        />
        <hr class="hr15" />
        <input
          value="登录"
          @click="userLogin"
          style="width: 100%"
          type="button"
        />
        <hr class="hr20" />
      </form>
    </div>
  </div>
</template>
  
​
<script setup>
import { reactive, ref } from "vue";
import {useRouter} from "vue-router"
import {login} from "@/api/userApi"
​
let router = useRouter();
​
//设置标签绑定的属性
let objForm = reactive({
    phoneNumber : '',
    password : ''
})
​
​
//函数
function userLogin() {
  if (objForm.phoneNumber == "") {
    alert("请输入手机号");
    return;
  }
  if (objForm.password == "") {
    alert("请输入密码");
    return;
  }
  //请求后台
  login(objForm).then(data => {
      if (data.code == 200) {
        router.push({path: '\index'});
      } else {
        alert(data.info);
      }
    })
    .catch((err) => {
      console.log(err);
    });
  
    
}
</script>
​
​
<style scoped>
.login-bg {
  width: 100%;
  height: 100vh;
  background: url(../assets/logbg.jpg) no-repeat center;
  background-size: 100% 100%;
  overflow: hidden;
}
​
.login {
  margin: 200px auto 0 auto;
  min-height: 420px;
  max-width: 420px;
  padding: 40px;
  background-color: #fff;
  border-radius: 4px;
  box-sizing: border-box;
}
​
.login a.logo {
  display: block;
  height: 58px;
  width: 167px;
  margin: 0 auto 30px auto;
  background-size: 167px 42px;
}
​
.login .message {
  margin: 10px 0 0 -58px;
  padding: 18px 10px 18px 60px;
  background: #44aff0;
  position: relative;
  color: #fff;
  font-size: 20px;
}
​
.login #darkbannerwrap {
  width: 18px;
  height: 10px;
  margin: 0 0 20px -58px;
  position: relative;
}
.login input[type="password"],
.login input[type="text"],
select {
  border: 1px solid #dcdee0;
  vertical-align: middle;
  border-radius: 3px;
  height: 50px;
  padding: 0 16px;
  font-size: 14px;
  color: #555;
  outline: 0;
  width: 100%;
  box-sizing: border-box;
}
.login input[type="email"]:focus,
.login input[type="file"]:focus,
.login input[type="password"]:focus,
.login input[type="text"]:focus,
select:focus {
  border: 1px solid #44aff0;
}
​
.login input[type="button"],
.login input[type="submit"] {
  display: inline-block;
  vertical-align: middle;
  padding: 12px 24px;
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  color: #fff;
  background-color: #44aff0;
  border-radius: 3px;
  border: none;
  -webkit-appearance: none;
  outline: 0;
  width: 100%;
}
​
.login hr {
  background: #fff;
}
​
.login hr.hr15 {
  height: 15px;
  border: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
​
.login hr.hr20 {
  height: 20px;
  border: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
</style>

5.注册页面

每创建一个页面就需要在router包下的index.js中注册

import { createRouter, createWebHistory } from 'vue-router'
// 创建路由
let router = createRouter({
    history: createWebHistory(),
    // 请求与组件的对应关系
    routes: [
        {
       // 配置首页面，自动跳转到/login页面
            path: '/',
            redirect: '/login'
        },
        {
            path: '/login',
            name: 'Login',
            component: () => import('@/views/Login.vue')
        },
    ]
})
//导出当前的router对象
export default router