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-loadernpm 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-plusapp.use(router)app.mount('#app')

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

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

四、引入vuex

查看vuex版本：

$ npm info vuex versions

直接安装最新版本的vuex：

$ npm install [email protected]

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

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

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

// state.jslet state = {}export default state
// getters.jslet getters = {}export default getters
// mutations.jslet mutations = {}export default mutations
// actions.jslet actions = {}export default actions
// index.jsimport { 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' // 引入 vueximport 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) // 使用 vuexapp.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,        }    }}

最后，感谢您的阅读。

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

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

• vue3.0+vite+router搭建项目

• VueFastDev - 前端快速开发工具 (升级表格配置)

• VueFastDev - 前端快速开发工具 (更新树形选择器)

• VueFastDev - 前端快速开发工具