（史上最详细）使用vite搭建vue3.2项目，路由以及状态管理,UI库整合,附带每一步，

1登峰造极

已于 2023-03-20 09:23:12 修改

阅读量5.5k

点赞数 7

分类专栏： vue3 文章标签： vue.js 前端

于 2022-03-03 10:04:19 首次发布

本文链接：https://blog.csdn.net/qq_33323469/article/details/123245587

版权

vue3 专栏收录该内容

7 篇文章 4 订阅

订阅专栏

2版本都学的只能说够用，3他就来了，3没来得及学，这3.2又来了，是真的学不动了

也就不依依说3.2 跟3版本的差别，不过我觉得是真心快了很多。

如果你觉得写的不错，点赞是跟新的动力
.安装依赖

1.首先全局安装create-vite-app

   npm install create-vite-app -g

2.创建项目，根据提示选择即可

  npm init @vitejs/app

3.切换到对应的目录，安装依赖

 npm install

4.安装路由

npm install vue-router@4

5.安装vuex

 npm install vuex@next --save

6.安装一个css处理器

 npm install sass -D

7.选择一ui组建

npm install element-plus --save

8.安装axiso网络请求

npm i axios -S

先把上面的全部安装完毕，再来整合起来，
1.首先来看路由
在 src下建立一个文件夹router 在router下建立index,js

router/`index,js 如下  不需要的组建删除即可，

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
const routerHistory = createWebHistory()
const router = createRouter({
  history: routerHistory,
  routes: [
    {
        path: '/',
        name: 'Home',
        component: () => import('../components/Home.vue')
      },
      {
        path: '/h',
        component: HelloWorld
      },
  ]
})
 
export default router;

在main.js中去挂载，这里不一步一步写，直接将全部的挂载一起赋上


import { createApp } from 'vue'
import App from './App.vue'

//全局样式
import './style/index.scss'
//UI
import ElementPlus from './plugins/elementplus'
//路由
import router from './router'
//状态
import store from './store'
createApp(App).use(router).use(store).use(ElementPlus).mount('#app')

2.vuex
在 src下建立一个文件夹store 在store下建立index,js
使用方法跟原來一樣


import { createStore } from 'vuex'
 
const store = createStore({
  state: {
    userInfo: {
      name:'myName'
    }
  },
  mutations: {
    getUserInfo (state, name) {
      state.userInfo.name = name
    }
  },
  actions: {
    asyncGetUserInfo ({ commit }) {
      setTimeout(() => {
        commit("getUserInfo", +new Date() + 'action')
      },2000)
    }
  },
  getters: {
  
  }
})
 
export default store

3.在src下建立plugins工具类
在这里插入图片描述

elementplus.js 如下

/*
 * @Author: your name
 * @Date: 2022-03-02 16:24:12
 * @LastEditTime: 2022-03-02 16:35:03
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \viteapp\src\plugins\elementplus.js
 */
//1完整引入elementui plus 3
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

//2按需引入
// import {ElementPlus} from 'element-plus'
// import 'element-plus/dist/index.css'

export default  function(app){
    //1完整引入elementui plus 3
    app.use(ElementPlus)

    //  //3按需引入
    //  app.use(ElementPlus)
}

request.js如下

import axios from ‘axios’

export function request(config) {
  // 创建axios的实例
  const instance = axios.create({
    baseURL: '',
    timeout: 10000
  })
  // 请求拦截器配置
  instance.interceptors.request.use(config => {
      // config.headers.cookie = window.sessionStorage.getItem('token')
      return config
    }, error => {
      return Promise.error(error)
    }
  )
  // 响应拦截器配置
  instance.interceptors.response.use(response => {
    return response.data
  }, error => {
    // switch (error.response.data.code) {
    //   case 400:
    //     console.log("无权访问")
    //     router.push({path: '/login'})
    //     break
    //   case 404:
    //     console.log("404啦")
    //     router.push({path: '/404'})
    //     break
    //   default:
    //     return Promise.reject(error)
    // }
    return Promise.reject(error)
  })
  // 发送真正的网络请求
  return instance(config);
}
export default request;

http.js.js如下

import {request} from './request'
const http = {
  get(url, params) {
    const config = {
      method: 'get',
      url: url
    }
    if (params) config.params = params
    return request(config)
  },
  post(url, params) {
    const config = {
      method: 'post',
      url: url
    }
    if (params) config.data = params
    return request(config)
  },
  put(url, params) {
    const config = {
      method: 'put',
      url: url
    }
    if (params) config.params = params
    return request(config)
  },
  delete(url, params) {
    const config = {
      method: 'post',
      url: url
    }
    if (params) config.params = params
    return request(config)
  }
}
export default http

css可以自己写，为了让运行起来，index.scss如下，目录结构请看上图

*{
    margin: 0;
    padding: 0;
    font-size: 16px;
}

#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    a{
        color: red;
    }
  }

目前项目即可完整运行，

接下来就到了网络请求

我们拆分开每个页面的js

比如建立api 下的index.js


import http from '../plugins/http.js'

//首页轮播
export function getBanner(parms){
 return http.get('/banner',parms)
}

export function Login(parms){
    return http.post('login/cellphone',parms)
 }
   
//get post 传参调用方式

 // post调用方式 
//  let parms ={
//     phone:phones.value,
//     password:passwords.value
// }
// Login(parms).then((res) => {

// }).catch((error) => {

// });

/***-------------------------------------------------------------- */

//get 调用方式

// let parms = {
//     id: id,
//     cookie: cook,
// };
// //检查音乐是否可用
// isPlay(parms).then((res) => {
//    if (res.success) {
//       
//    } else {
//        
//    }
// }).catch((error) => {
//    
// });

组建中使用在Home.vue中使用

<template>
  <div>
    <p v-for="(item, index) in banners" :key="index">
      <img :src="item.pic" alt="" style="height: 150px; width: 150px" />
    </p>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { getBanner } from "../api/index.js";
const banners = ref([]);
onMounted(() => {
  getbanner();
});
const getbanner = () => {
  let parms = {
    type: 1,
  };
  getBanner(parms)
    .then((res) => {
      banners.value = res.banners;
    })
    .catch((error) => {});
};
</script>

<style  scoped>
</style>>

其他的开发跟原来差不多，声明的响应数据，方法不需要在setup中导出，使用 <script setup> 语法糖直接使用。至於路由，vuex这的使用，需要引入进来，不像以前那样什么都是this点点点的。