vue3项目搭建流程cli脚手架搭建、组件安装、axios封装、vuex封装等操作

最新推荐文章于 2024-06-17 06:00:00 发布

中芯12341

最新推荐文章于 2024-06-17 06:00:00 发布

阅读量288

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_63136716/article/details/133760744

版权

闲来无事了解到了vue3的搭建流程和比较好的封装方法，这里对它的内容进行总结，分享给大家；

vue create 【项目名】
选择1、vue3默认安装；2、vue2默认安装；3、自定义安装
选择

Choose Vue version（选择VUE版本）
Babel（JavaScript 编译器，可将代码转换为向后兼容）      选择
TypeScript（编程语言，大型项目建议使用）
Progressive Web App (PWA) Support-APP使用
Router（路由）       选择
Vuex（Vuex）选择
CSS Pre-processors（css预处理）        选择
Linter / Formatter（代码风格/格式化）选择
Unit Testing（单元测试）
E2E Testing（e2e测试）

选择

选择y；同意（这个是是否使用历史路由 history router）

选择sass/scss（with node-sass）
选择ESLint套餐；ESLint with error prevention only
按需选择；

                Lint on save 保存后检测

                Lint and fix on commit commit实时检测

选择第一个（babel和eslint配置位置）

输入n（是否保存为默认配置（如果选择yes需要自己起个默认名））

完成搭建

目的：为了整洁我们先封装一个地方为我们引用全局组件

我们先在src路径下创建一个文件夹，这里我叫plugins，接着在文件夹下创建一个index.js

在index.js中添加一个方法为我们安装插件

/**
 * 安装插件
 * @param {*} app vue实例
 */
export function installPlugins(app) {
  console.log(app)
}

在main.js中执行安装方法

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { installPlugins } from '../src/plugins'
const app = createApp(App).use(store).use(router)
// 安装插件
installPlugins(app)
app.mount('#app')

这样以后所有需要全局引入的组件和文件，我们只需要在plugins/index.js中引入就可以了；

UI框架

下载element-plus npm i element-plus

下载图标库 npm i @element-plus/icons-vue

import ElementPlus from 'element-plus'
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
import 'element-plus/dist/index.css'
import * as icons from '@element-plus/icons-vue'
/**
 * 安装插件
 * @param {*} app vue实例
 */
export function installPlugins(app) {
  // 安装element-ui
  app.use(ElementPlus, {
    locale: zhLocale,
    size: 'small',
  })
  // 安装图标库
  for (var icon in icons) {
    app.component(icon, icons[icon])
  }
}

axios封装

npm i axios

首先我们创建在src下创建个文件夹，我这里就叫network了。
然后我们在src/network下创建一个request.js文件，用于当作axios拦截器
接着在src/network下创建一个api文件夹，用于统一管理我们的请求

request.js里面配置

import axios from 'axios'

// 创建请求
const service = axios.create({
  baseURL: process.env.VUE_APP_API,//.env文件配置接口地址
  timeout: 40 * 1000, // 超时
})

// 请求前
service.interceptors.request.use(
  (config) => {
    // 默认参数
    let defalutParams = {
      userId: 'demo',
      version: 'v1',
    }
    // 默认请求头
    const headers = {
      token: '12345678',
    }
    config.params = Object.assign(defalutParams, config.params || {})
    config.headers = Object.assign(headers, config.headers || {})
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 请求结果
service.interceptors.response.use(
  (response) => {
    //返回数据
    const res = response.data
    return res
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 抛出实例



export default service

在api文件夹里配置任意js文件，配置request.js

import request from '../request.js'

export function test(params) {
  return request({
    url: '/test', //接口路径
    method: 'POST',
    ...params,
  })
}

引入js文件在vue文件中，即可；

VueX

State：状态树，也就是唯一的数据源
Getter：可以认为是store的计算属性，建议取值都在这里（Vue3.0 Getter不会被缓存，将在3.2版本修复）
Mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，可预测记录改变
Action：处理异步然后通过Mutation修改状态
Module：当多组件使用时，因为state是唯一数据源所以全部存储在一起就会非常复杂，Vuex提供module可以分割成多个，方便管理。

安装

npm install vuex@next --save

封装

在store下创建modeules存放被分割的module，创建index.js用于接收全部module然后创建vuex

demo.js里面编辑state数据

/**
 * @description demo
 */
// 状态树
const state = () => ({
  info: '',
})
// 获取
const getters = {
  getInfo: (state) => state.info,
}
// 修改
const mutations = {
  changeInfo(state, updateInfo) {
    state.info = updateInfo
  },
}
// 异步修改
const actions = {}
export default {
  state,
  getters,
  mutations,
  actions,
}

在index.js文件里面，获取module然后创建vuex

import { createStore } from 'vuex'

// 获得全部module
const files = require.context('./modules', false, /\.js$/)
const modules = {}
// 收集
files.keys().forEach((key) => {
  // 文件名为key
  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})
Object.keys(modules).forEach((key) => {
  // 带命名空间，防止不唯一
  modules[key]['namespaced'] = true
})
const store = createStore({ modules })

/**
 * 安装vuex
 * @param {*} app
 */
export function installStore(app) {
  app.use(store)
}

export default store

在main.js里面引入Vuex