vue3.x+vite+element-ui+vue-router+vuex+axios搭建项目

我会带着你远行 2022-09-05 14:57 243阅读 0赞

## 一. 参考文档 ##

[vite官方文档][vite]

[vue3.x官方文档][vue3.x]

[vue-router4.x官方文档][vue-router4.x]

[vuex4.x官方文档][vuex4.x]

[element-ui3.x官方文档][element-ui3.x]

[Ant Design Vue2.x官方文档][element-ui3.x]

[axios文档][axios]

## 二. vite搭建项目 ##

*  安装

# npm 安装
    npm init vite@latest
    
    # yarn 安装
    yarn create vite
    
    # 快速安装vue模板项目
    yarn create vite my-vue-app --template vue
    
    npm init vite@latest my-vue-app -- --template vue

![image-20210818170557952][]

*  运行

npm run dev 
    
    # or
    yarn dev

![image-20210818170733034][]

## 三. 配置element-ui ##

*  下载包

npm install element-plus --save

*  修改`src/main.js`

import {  createApp } from 'vue'
    
    import ElementPlus from 'element-plus';
    import 'element-plus/lib/theme-chalk/index.css';
    
    import App from './App.vue'
    
    const app = createApp(App)
    app.use(ElementPlus)
    app.mount('#app')

*  验证是否配置成功

![image-20210818171148345][]

如果组件要按需引入的话可以参考文档介绍

![image-20210818171247339][]

## 四. 配置vue-router ##

[从vue2迁移][vue2]

*  安装

npm install vue-router@4

*  创建`src/router/index.js`文件

![image-20210818172342806][]

import {  createRouter, createWebHistory } from 'vue-router'
    
    const routes = [
      { 
        path: '/demo',
        name: 'demo',
        component: () => import('../views/demo.vue')
      }
    ]
    
    const router = createRouter({ 
      history: createWebHistory(),
      routes
    })
    
    export default router

*  修改`main.js`

import {  createApp } from 'vue'
    import ElementPlus from 'element-plus';
    import 'element-plus/lib/theme-chalk/index.css';
    // 引入路由配置
    import router from './router/index'
    import App from './App.vue'
    
    const app = createApp(App)
    app.use(ElementPlus)
    // 注册
    app.use(router)
    app.mount('#app')

*  修改`App.vue`添加路由视图

<template>
      <el-button type="primary">按钮</el-button>
      <router-view></router-view>
    </template>
    
    <script>
    export default {
      name: 'app'
    }
    </script>

*  创建`src/views/demo.vue`文件

![image-20210818172605669][]

经过以上的过程,访问`http://localhost:3000/demo` 就可以看到一下界面,表明我们的路由配置成功~

![image-20210818172727082][]

## 五. 配置vuex ##

*  安装

npm install vuex@next --save

*  创建`src/store/index.js`文件

![image-20210818173206269][]

import {  createStore } from "vuex";
    
    const store = createStore({ 
      state () { 
        return { 
          app: '我是app'
        }
      },
      mutations: { 
    
      },
      actions: { 
    
      }
    })
    
    export default store

*  修改`src/main.js`

import {  createApp } from 'vue'
    import ElementPlus from 'element-plus';
    import 'element-plus/lib/theme-chalk/index.css';
    import router from './router/index'
    // 引入文件
    import store from './store/index'
    import App from './App.vue'
    
    const app = createApp(App)
    app.use(ElementPlus)
    app.use(router)
    // 注册
    app.use(store)
    app.mount('#app')

*  在`App.vue`中查看是否配置成功

![image-20210818173322287][]

能够成功打印测配置成功

![image-20210818173340721][]

## 六. 配置axios ##

*  安装

npm install axios -S

*  创建`src/utils/request.js`

import axios from 'axios'
    
    const services = axios.create({ 
      baseURL: 'https://api.apiopen.top',
      timeout: 6000
    })
    
    // 请求拦截
    services.interceptors.request.use(config => { 
      // 在这可以添加一些请求头的逻辑,如配置token
      return config
    }, error => { 
      return Promise.reject(error)
    })
    
    // 响应拦截
    services.interceptors.response.use(response => { 
      // 在这可以根据实际后台的响应值去进行判断,如code: 0 或者登录失效跳转到登录页等
      return response.data
    }, error => { 
      return Promise.reject(error)
    })
    
    export default services

![image-20210818175532400][]

*  创建`src/api/app.js`配置气你跪求方法

import request from '../utils/request'
    
    export const send = () => { 
      return request({ 
        url: '/getJoke',
        method: 'get',
        params: { 
          page: 1,
          count: 2,
          type: 'video'
        }
      })
    }

![image-20210818175614712][]

*  在`App.vue`引入测试

<template>
      <el-button type="primary">按钮</el-button>
      <router-view></router-view>
    </template>
    
    <script>
    // 引入请求方法 
    import {  send } from "./api/app";
    export default { 
      name: "app",
      async mounted() { 
        console.log("store>>>", this.$store.state.app);
        // 请求
        const res = await send()
        console.log('res>>>', res)
      },
    };
    </script>

*  查看浏览器是否请求成功

![image-20210818175730709][]

## 七. 总结 ##

经过以上几步就可以搭建一个简单的vue工程化项目,但是实际开发当中肯定不能这么简单,比如别名的配置,这个时候就需要修改`vite.config.js`去进行别名的配置,还有路由权限的控制以及ui库sass变量的替换等等…

[vite]: https://cn.vitejs.dev/guide/
[vue3.x]: https://v3.cn.vuejs.org/guide/introduction.html#vue-js-%E6%98%AF%E4%BB%80%E4%B9%88
[vue-router4.x]: https://next.router.vuejs.org/zh/introduction.html
[vuex4.x]: https://next.vuex.vuejs.org/zh/index.html
[element-ui3.x]: https://element-plus.org/#/zh-CN/component/installation
[axios]: http://www.axios-js.com/
[image-20210818170557952]: /images/20220829/88dcf2d2b47d4724ba242c6a1c248f70.png
[image-20210818170733034]: /images/20220829/a30368306ddd4805a2df75e9b570663b.png
[image-20210818171148345]: /images/20220829/5281a18c48504463bf2110ab8a0869a1.png
[image-20210818171247339]: /images/20220829/7a44518bf5bd4ba2860230a0074c139d.png
[vue2]: https://next.router.vuejs.org/zh/guide/migration/index.html#%E7%A0%B4%E5%9D%8F%E6%80%A7%E5%8F%98%E5%8C%96
[image-20210818172342806]: /images/20220829/415550ebb26144f8b34939690fc91731.png
[image-20210818172605669]: /images/20220829/bc3406071417468d81c0188000b6a05b.png
[image-20210818172727082]: /images/20220829/9b7acf115e9744629e7dcf2f1a7e1c41.png
[image-20210818173206269]: /images/20220829/ab6b4f3630394ea588a1e44eb849ede9.png
[image-20210818173322287]: /images/20220829/18bf748ceef3442d8ef825c351feac04.png
[image-20210818173340721]: /images/20220829/47e8f55c42164d3487a943e54ed3505e.png
[image-20210818175532400]: /images/20220829/6cae8213f6324edf8266cf9a6c50abcd.png
[image-20210818175614712]: /images/20220829/12ec2e17baa94a80af4f7ded9eedc94a.png
[image-20210818175730709]: /images/20220829/81d22d14570f4f498dd250fdeb7d885b.png