vite+vue3项目的初始化配置

vite+vue2项目的初始化配置

一、步骤：

1.建立一个项目空壳

备注：我的vue3项目还是用vue2的选项式API，因为还没学vue3的新语法😅，但是老师要用vite构建一个vue3项目，所以还是用vue2的写法来写项目的。

先建立一个项目的空壳，大家可以看我这篇文章的配置：vite+vue3项目空壳的配置

2.下载sass

npm install sass 

然后在组件中使用

<style lang="scss" scoped>

</style>

3.安装状态管理工具vuex

npm install vuex@next --save

然后使用

在index.js文件下

import { createStore } from "vuex";
const store = createStore({
      state: () => {
            return {

            }
      },
      getters: {},
      mutations: {
      },
      actions: {},
      modules: {}
})
export default store

然后在main.js中引入

import store from './store/index'
...
const app = createApp(App)
app.use(store).mount('#app')

我在这里先说一下，为什么要安装vuex?
现在vue3都是使用菠萝Pinia ,Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。我是用vuex是因为我还没学会Pinia😅 ，所以先在vue3中使用vuex了，如果大家想使用Pinia的话,可以参考官网配置Pinia

4.安装vue-router

npm install vue-router@4

在index.js文件中配置router

import { createRouter, createWebHashHistory } from "vue-router"
const routes=[
{
      path:'/news',
      name:'新闻',
      component:()=>import('@/views/News.vue')
}
]
const router = createRouter({
      history:createWebHashHistory(),
      routes
})
export default router

然后在main.js中引入router

import router from './router'
...

const app = createApp(App)
app.use(store).use(router).mount('#app')

5.安装Element Plus

npm install element-plus --save

因为Element Plus是一个UI组件库，所以包很大，所以我这里是按需导入。

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

在vite.config.js中配置

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ]
})

然后就可以在组件中直接使用我们的Element Plus了。
在App.vue中

<template>
  <div>我是App</div>
  <el-button type="success">成功</el-button>
</template>

<script setup>

</script>

<style lang="scss" scoped></style>

安装Icon图标

Icon图标: Element Plus 提供了一套常用的图标集合。
如果你想像用例一样直接使用，你需要全局注册组件，才能够直接在项目里使用。
安装

npm install @element-plus/icons-vue

您需要从 @element-plus/icons-vue 中导入所有图标并进行全局注册。

在main.js中引入

import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 ...
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.use(store).use(router).mount('#app')

然后在组件中使用
在App.vue中

<template>
  <div>我是App</div>
  <el-icon :size="size" :color="color">
      <Edit />
    </el-icon>
</template>

<script setup>
</script>

<style lang="scss" scoped></style>

效果图如下

6.初始化全局样式

reset.css文件

*{
      margin:0;
      padding:0;
    }
    html,body{
      height:100%;
      width:100%;
      font-size:14px;
    }
    #app{
      width:100%;
      height:100%;
      background-color: #ecf5ff;
      overflow: hidden;
    }

上面这个是最简单的样式初始化，还想还要更具体的自己可在网上直接百度：reset.css。找一个reset.css。然后根据自己的需求改。
然后再在main.js中引入。
main.js

import '@/style/reset.css'

7.配置axios请求

安装axios

npm install axios

1. 对axios进行二次封装。

为什么要进行axios的二次封装？
举一个例子：发的送一个登录的请求。
其中的baseURL为：http://localhost:3001/admin/,URI为：admin/login

login() {  // 基础的axios post 管理员系统登录
            axios.post('http://localhost:3001/admin/admin/login', {
                adminname: 'admin',
                password: '123456'
            }).then((res) => {
            //将返回的token保存在本地。
                localStorage.setItem('token', res.data.data.token)
                console.log(res)
            }).catch((err) => {
                console.log(err)
            })
        },

对于同一个简单的项目来说，可能页面很少，大家觉得这样用也行，话虽如此，但是如果是一个复杂庞大的项目，页面可能达到几百页，那么请求接口也是如此，那么每一个页面都这么写的话，就不利于维护。因为如果哪天baseURL改变了，那么是不是每一个发送请求的页面都要重新修改，这样工程就大了，且没必要而且浪费时间。那么我们要考虑对请求进行封装了。那么如何对请求进行封装？

2. axios的封装步骤：

requet.js文件

import axios from "axios";

let baseURL = 'http://localhost:3001/admin/'

// 创建一个axios的一个实例
const request = axios.create({
      baseURL,
      timeout:3000
})
//给实例添加请求拦截器
request.interceptors.request.use(config=>{
      const whileList = ['admin/login']
      if(!whileList.includes(config.url)){
            config.headers['token'] = localStorage.getItem('token')||''
      }
      return config
},(err)=>{
      return Promise.reject(err)
})

// 给实例添加响应拦截器
request.interceptors.response.use((res)=>{
      // ?.可选链操作符
      if(res.data?.data.token){
            localStorage.setItem('token',res.data.data.token)
      }
      // 响应内容中有message提示信息
      if(res.data?.message){
            const type = res.data.code==='200'?'success':'error';
            // element-plus的消息提示ElMessage
            ElMessage({
                  type,
                  message:res.data.message
            })
      }
      // 把后端数据提取出来给then
      return res.data
},(err)=>{
      console.log(err);
      return Promise.reject(err)
})
// 后期使用这个实例发送请求，就会有上面的默认配置
export default request

api文件夹下面的user.js

// 专门封装请求管理员信息相关接口
import request from "@/utils/request";

/**
 * 登录接口
 * @param {*} data 
 * @returns 
 */
export const loginAPI =(data)=>{
      return request({
            url:'admin/login',
            method:'post',
            data
      })
}

/**
 * 获取地址接口
 * @returns 
 */
export const getAddressAPI = ()=>{
      return request({
            url:'address/list',
            method:'get',
      })
}

/**
 * 获取管理员信息接口
 * @param {*} val 
 * @returns 
 */
export const getAdminInfoAPI = (val)=>{
      return request({
            url:'admin/detail',
            method:'get',
            params:{
                  adminname:val
            }
      })
}

然后直接在Login.vue文件中导入接口函数使用

<template>
      <div class="login">
            <el-card class="box-card">
                  <template #header>
                        <div class="card-header">
                              <h3>嗨购电商平台</h3>
                        </div>
                  </template>
                  <div class="login-content">
                        <el-form ref="user" :model="user" status-icon :rules="userRules" class="demo-ruleForm">
                              <el-form-item size="large" label="账号" prop="adminname">
                                    <el-input v-model="user.adminname" prefix-icon="User" type="text" autocomplete="off" />
                              </el-form-item>
                              <el-form-item size="large" label="密码" prop="password">
                                    <el-input v-model="user.password" prefix-icon="Lock" show-password type="password"
                                          autocomplete="off" />
                              </el-form-item>
                              <div class="btns">
                                    <el-button class="btn" type="primary" size="large"
                                          @click="submitForm('user')">登录</el-button>
                                    <el-button class="btn" size="large" @click="resetForm('user')">重置</el-button>
                              </div>
                        </el-form>
                  </div>
            </el-card>
      </div>
</template>

<script>
import { loginAPI } from '@/api/user'
import { validateName, validatePass } from '@/utils/validate.js'
// import { ElMessage } from 'element-plus';
export default {
      name: '',
      data() {
            return {
                  user: {
                        adminname: '',
                        password: ''
                  },
                  redirect: undefined,
                  userRules: {
                        adminname: [{ required: true, trigger: 'blur', validator: validateName }],
                        password: [{ required: true, trigger: 'blur', validator: validatePass }]
                  },


            };
      },
      mounted() {

      },

      methods: {
            // 登录
            submitForm(user) {
                  this.$refs[user].validate(async (valid) => {
                        if (valid) {
                              try {
                                    const res = await loginAPI (this.user)
                                    if (res.code == '200') {
                                          this.$router.replace('/')
                                    }

                              } catch (error) {
                                    ElMessage.error(error.message)
                              }
                        } else {
                              return false
                        }

                  })

            },
            // 重置
            resetForm(user) {
                  this.$refs[user].resetFields();
            }
      },
};
</script>

<style lang="scss" scoped>
.login {
      width: 100%;
      height: 100%;
      background-image: url('@/assets/images/log_bg.jpg');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      .box-card {
            // width: 500px;
            text-align: center;
            // border-radius: 10px;
            // background-color: rgba(237, 237, 237, 0.8);
            width: 40vw;
            margin: 0 auto;
            margin-top: 50vh;
            transform: translateY(-50%);
            border-radius: 20px;
            // background-color: #fff;
            // border: 1px solid #000;

            .card-header {
                  text-align: center;
            }

            .login-content {
                  height: 200px;
                  display: flex;
                  justify-content: center;
                  align-items: center;

                  .el-form {
                        width: 480px;

                        .btns {
                              width: 100%;

                              .btn {
                                    width: 100px;
                              }
                        }

                  }
            }

      }
}
</style>

一个完整的项目初始化配置就完成了。如有问题，请及时提出！