vue3.0+vite+router搭建项目（二）:配置相关依赖

前言：上一篇文章中，我们已经讲解了项目搭建的方法以及过程总出现bug的解决方法。这篇文章主要讲解一下配置。

一、引入less && less-loader

npm add less less-loader --dev

注意这里有一个坑，注意这里一定要加–dev。

如果不加，less的依赖会被写入dependencies中。

但是less和less-loader要放在package.json文件里的devDependencies里的。

下面两个命令是一样不可以的，都是写到 dependencies

npm install less less-loader --save

二、模块配置路径别名，浏览器打开和跨域

在根目录下创建 vite.config.js ，添加配置：

const path = require('path')


module.exports = {
    alias:{
        '/@/': path.resolve(__dirname, './src')
    },
    hostname:'0.0.0.0',// 默认localhost
    port:'8000',//默认端口是：3000
    open:true,//浏览器自动打开
    https:false,//是否开启https
    ssr:false,//服务端渲染
    base:'./',//生产环境下的公共路径
    outDir:'dist',//打包构建输出路径，默认是dist，如果路径存在，构建之前会被删除
    porxy:{//本地开发环境通过代理实现跨域，生产环境使用 nginx 转发
        'api':{
            target: 'http://127.0.0.1:7001',//后端服务实际地址
            changeOrigin: true,
            rewrite: path => path.replace(/^\/api/,'')
        }
    }
}

三、引入element-plus组件库

执行下面的命令进行安装： $ npm install element-plus

这边采用全部引入的方式，在main.js 中添加如下代码：

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router'
import ElementPlus from 'element-plus' // 这边引入 element-plus


const app = createApp(App)
app.use(ElementPlus) // 使用 element-plus
app.use(router)
app.mount('#app')

这样之后发现样式没引进来，可能是因为 beta 版的原因，那就手动引入样式

import 'element-plus/lib/theme-chalk/index.css'

四、引入vuex

查看vuex版本：

$ npm info vuex versions

直接安装最新版本的vuex：

$ npm install vuex@4.0.0-rc.2

在 src 目录下创建 store 目录，在里面创建几个文件：

- store  |- state.js  |- getters.js  |- mutations.js  |- actions.js  |- index.js

在相应的文件写入如下内容：

// state.js
let state = {}
export default state

// getters.js
let getters = {}
export default getters

// mutations.js
let mutations = {}
export default mutations

// actions.js
let actions = {}
export default actions

// index.js
import { createStore } from 'vuex'
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'

export default createStore({
    state,
    getters,
    mutations,
    actions
})
在main.js中使用vuex：

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router'
import store from './store' // 引入 vuex
import ElementPlus from 'element-plus'
import '/@modules/element-plus/lib/theme-chalk/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.use(store) // 使用 vuex
app.mount('#app')

测试一下，在state.js里面加一句：

let state = {
  username: 'admin';
}

页面组件里面写一个方法：

methods: {
    handleButtonEvent() {
        this.$message.success(this.$store.state.username)
    }
}

成功获取到username顺便还测了一下 element-plus 组件。

五、引入axios

安装axios:

$ npm install axios

在src目录下创建两个目录：

- src
  |- api
  |  |- systemInfo.js
  |- utils
     |- request.js
在request.js中添加以下代码：

import axios from 'axios'

const service = axios.create({
    baseURL: '/',
    timeout: 1000000, // 请求超时时间
})

export default service

关于axios的封装这里不详细讲解

然后在systemInfo.js中添加以下代码：

import request from '/@/utils/request'

let systemInfo= {};
systemInfo.login = function(data) {
    return request({
        url: '/api/fin-services/v1/system-info/login',
        data,
        method: 'post'
    })
}

export default systemInfo

在接口请求之前，确保vite.config.js中设置了代理，否则跨域请求会被浏览器同源策略阻止：

const path = require('path')

module.exports = {
    alias: {
        '/@/': path.resolve(__dirname, './src')
    },
    proxy: {
        '/api': {
            target: 'http://127.0.0.1:7001', // 后端实际地址
            changeOrigin: true,
        }
    }
}

** 最后，感谢您的阅读。

你学到了什么，欢迎补充！！

欢迎大家留言讨论，祝工作顺利、生活愉快！ **