vue3+js+viter+element UI+Axios项目初始化基本流程

vue3+js+viter+element UI+Axios项目初始化基本流程

目录

• 1 创建vue3项目
• 2 创建git代码管理仓库
  • 2.1 创建本地管理仓库
  • 2.2 创建远程仓库
• 3 初始化项目设置
  • 3.1 安装项目所需要的依赖
  • 3.2 完成别名联想设置
    • 3.2.1 什么叫别名联想呢？(如果了解的话可以跳过这个标题)
    • 3.2.2 设置别名联想
      • 3.2.2.1 打开jsconfig.json文件
      • 3.2.2.2 打开vite.config.js文件
    • 3.2.3 导入elementPlus UI 并且配置按需导入
      • 3.2.3.1 安装elementPlus以及配置按需导入所需的插件
        • 3.2.3.1.1 安装elementPlus
        • 3.2.3.1.2 安装配置按需导入所需的插件
  • 3.3 配置elementPlus 采用scss样式配色系统 但是定制化颜色一般是由ui设计师提供的，如果没有ui设计师提供，可以跳过此步骤
    • 3.3.1 安装scss
    • 3.3.2 编写一个固定scss文件用于定制项目颜色
    • 3.3.3 对elementPlus原本的颜色进行覆盖
  • 3.4 安装axios以及封装axios请求
    • 3.4.1 安装axios
    • 3.4.2 封装axios请求
      • 3.4.2.1 封装axios工具
      • 3.4.2.2 编写axios请求
      • 3.4.2.3 请求已经封装好的axios
  • 3.5 初始化pinia状态管理仓库

如果你是vue3小白 还没有学与vue3配套的ts 但是想使用vue3写一个项目的话 可以看看这篇文档，或许对你会有些帮助

本文档介绍主要使用node自带的npm包管理器，如果你习惯使用其他的包管理器，那么你大概率是熟悉使用包管理器的，本文就不过多赘述了，如果你的开发环境还没有安装node以及无法使用npm包管理器，那么请移步其他文档或者教学视频，因为你现在或许还不适合编写vue项目。

1 创建vue3项目

在要创建项目的地址栏中输出cmd呼出命令行

命令行中输入npm create vue@latest 就会基于viter脚手架创建一个vue3项目

回车后提示我们输入一个项目名称

输入后利用左右键以及回车键选择自己初始化时想要加入到里面的东西

我选择了router、pinia、ESLint

事已至此，这个cmd页面就可以关掉啦

2 创建git代码管理仓库

2.1 创建本地管理仓库

打开源代码管理器

选择初始化存储库 即可自动创建一个 如果是初次创建的话可能还会要求输入一些密码之类的，或者说如果你的电脑上没有显示这些按钮，那么说明你的电脑上或许没有安装git 那么这个章节你就可以跳过了 因为你应该还不会使用git进行代码管理，如果不会使用的话可以转占查看git相关的专业教学文档或者视频。

2.2 创建远程仓库

这里以国内的代码管理平台码云(gitee)进行演示 如果是使用GitHub的话可是同样的操作

点击右上角的+选择新建仓库

输入仓库名称 仓库介绍可写可不写，其他默认就好，对于个人开发来讲 不需要讲究那么多

仓库创建成功之后会展示一个这样的界面

点击复制按钮 复制这个路径 后面会用得到

打开vscode 选择右上角的菜单 展开选择 远程→添加远程存储库 回车

在输入框中输入刚刚复制过的地址 选择“从URL添加远程仓库” 回车之后会让输入一个仓库名称，这个名称就可以随便输入了 但是最好是跟自己的项目文档保持一致。由于我在写这篇文档的时候忘记截图记录 导致没有足够的图片资料，所以就不展示更多的图片了

远程仓库连接成功之后选择提交和同步即可，提交时将代码提交到本地git仓库，同步时将本地的git仓库与gitee远程仓库的代码进行同步 提交代码之后刷新一下页面，我们的代码就会出现在远程仓库里了

3 初始化项目设置

3.1 安装项目所需要的依赖

使用vscode打开此项目，按CTRL + ` 键打开终端输入npm install 项目会自动安装我们在新建项目时选择的以及vue3自带的那些依赖

3.2 完成别名联想设置

3.2.1 什么叫别名联想呢？(如果了解的话可以跳过这个标题)

我们在开发项目的时候为了避免项目移动后目录发生变化导致项目不能正常运行，都会使用相对路径来避免这一问题，那既然这样就避免不了出现很多的层级关系 比如：../../apis 这样的路径地址，容易把人搞混。

vue官方就贴心了准备了这个叫别名联想的东西 比如输入一个 @/ 就可以把路径指定到我们常用的 /src/ 路径下，那我们再写路径的时候就可以基于src这文件进行书写了 比如：@/apis/user.js

3.2.2 设置别名联想

3.2.2.1 打开jsconfig.json文件

如果没有此文件的话 可以自己建一个，但是名字一定是要做这个名字。

加入以下代码 当然可以有些版本的脚手架再初始化的时候就已经帮忙建立了

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

3.2.2.2 打开vite.config.js文件

加入以下代码

export default defineConfig({
// ----其他配置代码
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
// ----其他配置代码
})

3.2.3 导入elementPlus UI 并且配置按需导入

3.2.3.1 安装elementPlus以及配置按需导入所需的插件

3.2.3.1.1 安装elementPlus

打开vscode终端¹输入 npm install element-plus --save 命令即可自动安装elementPlusui

打开package.json文件可查看自己安装的版本

3.2.3.1.2 安装配置按需导入所需的插件

打开vscode终端输入npm install -D unplugin-vue-components unplugin-auto-import 命令即可安装

同样打开package.json文件可查看自己安装的版本

打开vite.config.js文件 输入以下代码

// -----其他导入信息

// elementPlus UI 按需导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    // -----其他配置代码
    // elementPlus UI 按需导入
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
    // -----其他配置代码
})

随便打开一个组件，<el-button type="primary">Primary</el-button>输入一个最基本的button组件查看是否配置成功

具体参考文档请看elementPlus官方教学文档 https://element-plus.org/zh-CN/guide/quickstart.html

3.3 配置elementPlus 采用scss样式配色系统 但是定制化颜色一般是由ui设计师提供的，如果没有ui设计师提供，可以跳过此步骤

注意：由于我本身没有使用过定制颜色，这只是在我看的教程中照搬下来的操作步骤 而那个教程使用的css样式时scss，所以这个项目中安装了scss并且定制化颜色也是由scss文件定义的。我对引入正常的css并不了解，如果由了解过的朋友可以在评论区里说一下，我会修改我的文档，大家一块学习🥰

3.3.1 安装scss

打开vscode终端，输入npm i sass -D 即可安装scss

同样在package.json文件中可以查看安装的版本

3.3.2 编写一个固定scss文件用于定制项目颜色

在src/styles/ 目录下新建一个element/index.scss文件(element是文件夹) 输入以下代码

//@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('primary': ( // 主色
//            'base': #27ba9d,
//        ),
//       'success': ( // 成功色
//           'base': #27ba9d,
//        ),
//        'warning': ( // 警告色
//            'base': #27ba9d,
//        ),
//        'danger': ( // 危险色
//            'base': #27ba9d,
//        ),
//        'error':( // 错误色
//            'base': #27ba9d,
//        ))) // 定制化颜色一般是由ui设计师提供的，但是本项目没有ui设计师，所以本项目没有定制化颜色。

// 定制化颜色一般是由ui设计师提供的，但是本项目没有ui设计师，所以本项目没有定制化颜色。

3.3.3 对elementPlus原本的颜色进行覆盖

打开vite.config.js文件

输入以下代码

export default defineConfig({
  plugins: [
    vue(),
    

    // ----其他配置代码
    Components({
      // 配置elementPlus 采用cass样式配色系统  但是定制化颜色一般是由ui设计师提供的，但是本项目没有ui设计师，所以本项目没有定制化颜色。
      // resolvers: [ElementPlusResolver({importStyle:"sass"})],
      resolvers: [ElementPlusResolver()],
    }),
  ],
  // ----其他配置代码
  
  // 配置css样式 采用cass样式配色系统  但是定制化颜色一般是由ui设计师提供的，但是本项目没有ui设计师，所以本项目没有定制化颜色。
  // css: {
  //   preprocessorOptions: {
  //     sass: {
  //       additionalData: `@import "@/styles/element/index.scss as *";`
  //     }
  //   }
  // }
})

3.4 安装axios以及封装axios请求

3.4.1 安装axios

打开vscoe终端 输入 npm i axios

在package.json文件中可以查看版本信息

3.4.2 封装axios请求

3.4.2.1 封装axios工具

在src文件夹下新建utils/http.js文件

utils是文件夹用于存放整个项目的工具文件，比如封装的这个axios就是一个工具文件

输入以下代码

// axios基础封装
import axios from 'axios'

export const httpInstance = axios.create(
    {
        // 配置请求头
        headers: {
            'Content-Type': 'application/json'
        },
        // 配置基地址
        // baseURL: 'http://localhost:8080',  // 本地开发地址 有后端的时候
        baseURL: 'http://127.0.0.1:4523/m1/4092649-0-default',  //  本地开发地址 没有后端的时候 自己Mock一个假数据
        // baseURL: 'http://47.94.246.239/:8080',  // 服务器ip地址
        // baseURL: 'http://www.honlnk.top/:8080',  // 域名地址
        timeout: 10000, // 超时时间 10秒钟

    }
)

// 如果项目里需要多个不同的业务模块作为基地址，那么就可以使用axios实例的实例化方法来创建多个axios实例 比如：
// 当然本项目只需要一个基地址就足够了，所以不需要这么多

// export const httpInstance2 = axios.create({
//     baseURL: 'http://127.0.0.1:4523/m1/4092649-0-default',
//     timeout: 10000
// })


// 拦截器配置
// axios请求拦截器
httpInstance.interceptors.request.use((config) => {
    // 请求之前做些什么
    return config
}, (error) => {
    // 请求失败做点什么
    return Promise.reject(error)
})
// axios响应式拦截器
httpInstance.interceptors.response.use((response) => {
    // 响应成功做点什么
    return response.data
}, (error) => {
    // 响应失败做点什么
    return Promise.reject(error)
})

3.4.2.2 编写axios请求

在src文件夹下新建apis/testAPI.js文件

apis是文件夹，用于存放整个项目中的axios请求 testAPI是用于测试请求的封装情况

输入以下代码 对这一些列知识不了解的还请前往专业教学或者视频文档学习

// 导入自己封装好的axios请求工具
import { httpInstance } from "@/utils/http.js";

//定义一个请求函数并把他暴露出去，方便再别的地方调用
export function getCategory() {
    // 调用自己封装好的工具把参数传入之后再axios工具中就会帮我们请求数据
    return httpInstance({
        url: "/adamin/login",
        method: "post",
        params: {
            username: 10,
            password: 1,
        }
    })
}

export function http1() {
    return httpInstance({
        url: "/adamin/login",
        method: "post",
        params: {
            username: 10,
            password: 1,
        }
    })
}

3.4.2.3 请求已经封装好的axios

比如再main.js文件中发送一个axiso请求

// -----其他业务代码

 // 测试接口函数
 import { getCategory, http1 } from '@/apis/testAPI'
 getCategory().then(res => {
     console.log('axios初始化配置请求测试', res)
 })

 http1().then(res => {
     console.log('axios请求测试', res)
 })

// -----其他业务代码

3.5 初始化pinia状态管理仓库

由于在创建项目的时候已经选择了pinia，所以，次处就不用再下载了

src文件夹下的stores用于存储所有pinia仓库 具体使用方法还请前往pinia官方教学文档查看https://pinia.vuejs.org/zh/

import { defineStore } from 'pinia'
import { ref } from "vue";

export const useUserStore = defineStore('user', () => {
    // 定义管理用户数据的state
    const userInfo = ref({})
    // 定义获取接口数据的action函数
    const getUserInfo = () => {
        // 里面是请求接口的代码
    }
    // 以对象的格式吧state和action函数暴露出去
    return {
        userInfo,
        getUserInfo
    }
})

到了这里，关于vue3+js+viter+element UI+Axios项目初始化基本流程的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！