vue3+js+viter+element UI+Axios+pinia+ESLint项目初始化基本流程
目录
- 1 创建vue3项目
- 2 创建git代码管理仓库
- 3 初始化项目设置
如果你是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终端1输入 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设计师提供,可以跳过此步骤
注意:由于我本身没有使用过定制颜色,这只是在我看的教程中照搬下来的操作步骤 而那个教程使用的样式是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就是一个工具文件
打开http.js文件,输入以下代码。
// 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.***.***/:8080', // 服务器ip地址
// baseURL: 'http://www.*****.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: "/admin/login",
method: "post",
params: {
username: 10,
password: 1,
}
})
}
export function http1() {
return httpInstance({
url: "/admin/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,所以,次处就不用再下载了
3.5.1创建一个最基本的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
}
})
3.5.2 pinia状态持久化
前端的所谓持久化无非就是将数据存储在本地的LocalStorage(本地存储空间)里面,因为如果不做持久化的话刷新页面,数据就会消失。
pinia官方提供了一个插件persistedstate
,只需要简单的配置,即可将配置了这个插件的pinia状态仓库里的数据以JSON转字符串的格式存储在LocalStorage中。这个插件会同步本地与仓库中的数据并且会自动转换JSON与字符串的格式,无须编程者手写轮子。
这里是这个插件的官方文档,如果我的文档你理解不了的话还请查看pinia官方写的更加专业的文档https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/
3.5.2.1 安装persistedstate插件
打开vscoe终端 输入 npm i pinia-plugin-persistedstate
3.5.2.2 全局配置persistedstate插件
打开main.js
文件
导入 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
然后将const pinia = createPinia()
和pinia.use(piniaPluginPersistedstate)
两端代码
具体位置如下:
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
app.use(pinia)
app.use(router)
app.mount('#app')
// 测试接口函数
import { getCategory, http1 } from '@/apis/testAPI'
getCategory().then(res => {
console.log('axios初始化配置请求测试', res)
})
http1().then(res => {
console.log('axios请求测试', res)
})
打开要做持久化的那个pinia仓库将{ persist: true,}
插入到实体的后面,比如:
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
}
},
{
persist: true,
}
)
3.6 简单设置ESLint代码检查
3.6.1 禁用“未使用变量”报错的检查
对于笔者我而言,我看到有红色的提醒我是很烦的,所以我再写项目的时候都会把他给禁用掉,如果你喜欢编译器提示你这样的错误的话,可以选择不禁用此功能,或者将报错修改为黄色的提示。
在Vue项目根目录下查找.eslintrc.js、.eslintrc.cjs、.eslintrc.yaml、.eslintrc.yml、.eslintrc.json或package.json(如果包含一个名为eslintConfig的对象)等ESLint配置文件。如果没有找到,您可以创建一个.eslintrc.js或.eslintrc.json文件。
在我的项目下是一个名叫.eslintrc.cjs
文件 并且我的这个文件下没有rules
这个选项,我自己添加了一个,然后写入相关配置即可。
module.exports = {
// 其他已有配置...
rules: {
// 禁用 "no-unused-vars" 规则
'no-unused-vars': 'off',
},
};
当然如果你不想完全禁用他,而是让这个报错转为一个警告信息也就是显示一个黄色的警告 你可以把 no-unused-vars的值off
改为warn
。
3.6.2 禁用“一个单词命名组件”报错的检查
与上段相同,打开同样的目录,输入以下代码,即可禁用此功能:'vue/multi-word-component-names': 'off'
rules: {
// 禁用 "no-unused-vars" 规则
'no-unused-vars': 'off',
// 禁用 "component-names" 规则
'vue/multi-word-component-names': 'off',
},
好了,到这里,一个简单的vue3项目就已经初始化完成了,文档主要讲述了如何连接远程代码管理仓库、elementUI库的引入、axios请求的基本封装、pinia状态管理器、ESlint代码检查的基本使用。
按 CTRL+ `键打开
`键的位置再横向排列数字键盘 数字按键“1”的左边 ↩︎