技术选型
vue3
vue-router@4
element-plus
pinia
axios
sass
vue3项目创建
vite中文官网。其他包管理器的命令可去官网查看。
注意事项：npm原生代理很卡，可能会出现没有反应的现象。
解决方案：下载cnpm配置淘宝镜像。
vite创建vue项目
npm create vite@latest执行命令出现的步骤：
可以继续吗？yes
技术选型：
项目名：viteadmin
选择框架：vue
选择js或者ts：js
后面就是：
进入项目：cd viteadmin
下载依赖：npm i
启动项目：npm run dev
ok到此项目创建成功。
全家桶配置
配置别名
在vite.config.js中配置下方指定代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' // 新增
export default defineConfig({
plugins: [vue()],
---------------------开始
resolve: {
//设置别名
alias: {
'@': resolve(__dirname, './src'),
},
},
---------------------结束
})配置vue-router
npm install vue-router@4main.js中引入vue-router
import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'//引入vue-router
const app = createApp(App)
app.use(router)//引入vue-router
app.mount('#app')在/src/view文件夹下新建main.vue、home.vue、admin.vue、pinia.vue、sass.vue文件
admin.vue文件
<template>admin</template>
<script setup></script>
home.vue文件
<template>home</template>
<script setup></script>main.vue文件
<template>
<div>
<router-link style="margin-right: 20px;" to="/home">home</router-link>
<router-link style="margin-right: 20px;" to="/admin">admin</router-link>
</div>
<div>
<router-view></router-view>
</div>
</template>
<script setup></script>
pinia.vue文件
<template>
{{ '直接使用' + firstStore.count}}
{{count}}
{{'解构使用' + arr}}
</template>
<script setup>
import { useCountStore } from '@/stores/countStore.js';
import { storeToRefs } from 'pinia';
// 拿到store
const firstStore = useCountStore()
console.log(firstStore.count) //直接使用 0
// const { count,arr } = firstStore // 该写法不是响应式的，当我们修改count的值的时候，页面不会响应式变化
const { count,arr } = storeToRefs(firstStore) // 正确的做法
</script>sass.vue文件
<template>
<dl class="level">
<dt class="m-b-30">等级：</dt>
<dd
v-for="(item,index) in levels"
:key="index"
:class="index === cutIdx ? 'active' : ''"
>{{ item.level }}</dd>
</dl>
<div class="text">
dsafjadsjf;adshf;dshf;ahdsf;dshfhsd;fha;dshf;dshfdkshfahd;fha;dfha;
</div>
</template>
<script setup>
import { ref } from "vue";
const levels = ref([
{ level: "全部" },
{ level: "三级甲等" },
{ level: "三级乙等" },
{ level: "二级甲等" },
{ level: "二级乙等" },
{ level: "一级" }
]);
const cutIdx = ref(0);
</script>
<style scoped lang='scss'>
.level {
@include level-and-area;
}
.text{
width: 200px;
@include ellipsis;
}
</style>app文件代码修改
<template>
<Main></Main>
</template>
<script setup>
import Main from "@/view/main.vue";
</script>
<style scoped></style>新建/src/router/index.js文件
这个时候你就可以看到跳转了，我粘的代码有些是后面才会出现的。所以可能会报错，大家学习处理一下。
import { createRouter, createWebHashHistory } from "vue-router";
import Main from "@/view/main.vue";
import Home from "@/view/home.vue";
import Admin from "@/view/admin.vue";
import Pinia from "@/view/pinia.vue"
import Sass from "@/view/sass.vue"
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: "/",
redirect: "/home",
},
{
path: "/main",
component: Main,
},
{
path: "/home",
component: Home,
},
{
path: "/admin",
component: Admin,
},
{
path: "/pinia",
component: Pinia,
},
{
path: "/sass",
component: Sass,
},
],
});
export default router;
配置element-plus
npm install element-plus --saveimport { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'//引入vue-router
const app = createApp(App)
import ElementPlus from 'element-plus'//引入element-plus
import 'element-plus/dist/index.css'//引入element-plus
app.use(ElementPlus)//引入element-plus
app.use(router)//引入vue-router
app.mount('#app')在admin页面创建按钮
<template>
admin
<el-button type="primary">就这样</el-button>
<el-button type="info" icon="Message" circle />
</template>
<script setup></script>element-plus的icon图标引入
npm install @element-plus/icons-vueimport { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'//引入vue-router
const app = createApp(App)
import ElementPlus from 'element-plus'//引入element-plus
import 'element-plus/dist/index.css'//引入element-plus
---------------------------注册所有icon
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
---------------------------------------
app.use(ElementPlus)//引入element-plus
app.use(router)//引入vue-router
app.mount('#app')配置pinia
npm install pinia创建文件src/stores/indexjs
import { createPinia } from "pinia";
const pinia = createPinia()
export default pinia
mainjs文件中引入
import pinia from './stores'
app.use(pinia)定义一个带有初始值的store
文件位置：src/stores/countStorejs
import { defineStore } from 'pinia'
export const useCountStore = defineStore('countStore',{
// 定义state
state:()=>{
return {
count:0,
arr:[1,2,3]
}
},
// 定义getters，类似于computed
getters:{},
// 定义actions，类似于methods
actions:{}
})使用state的注意事项：
坚决不能直接解构使用这样无法获得响应式数据，需要使用storeToRefs函数才能做到响应式数据。
<template>
{{ '直接使用' + firstStore.count}}
{{count}}
{{'解构使用' + arr}}
</template>
<script setup>
import { useCountStore } from '@/stores/countStore.js';
import { storeToRefs } from 'pinia';
// 拿到store
const firstStore = useCountStore()
console.log(firstStore.count) //直接使用 0
// const { count,arr } = firstStore // 该写法不是响应式的，当我们修改count的值的时候，页面不会响应式变化
const { count,arr } = storeToRefs(firstStore) // 正确的做法
</script>确认可以使用就说明配置完成。
配置sass
npm install -D sass在src/styles文件夹下创建文件global.scss、mixin.scss、reset.scss
reset.scss 全局元素样式重置文件 主要用于清除 HTML 元素默认样式用
网上随便找好用不好用不知道我们就用来验证配置，后面可自行寻找更加完善的内容替代
/* 清除所有元素的边距和内边距 */
* {
margin: 0;
padding: 0;
}
/* 清除所有元素的默认样式 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/* 清除链接默认样式 */
a {
text-decoration: none;
color: inherit;
}
/* 清除列表默认样式 */
ul, ol {
list-style: none;
}
/* 清除图片默认边框 */
img {
border: none;
}
/* 清除表格默认边框 */
table {
border-collapse: collapse;
border-spacing: 0;
}global.scss 全局样式文件引入 reset.scss 文件，也可以写一些自定义的样式
@import url('./reset.scss');
.mlr-2{
margin-left: 20px;
margin-right: 20px;
}mixin.scss 全局的混合 mixin 样式文件
// 单行文本溢出显示 ...
@mixin ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// 等级和地区样式
@mixin level-and-area {
display: flex;
flex-wrap: wrap;
margin: 10px 0;
color: gray;
dd {
margin-right: 20px;
margin-bottom: 16px;
cursor: pointer;
&:hover,
&.active {
color: #4993f2;
}
}
}main.js引入内容
// 引入全局样式文件
import '@/styles/global.scss写个页面进行测试
<template>
<dl class="level">
<dt class="m-b-30">等级：</dt>
<dd
v-for="(item,index) in levels"
:key="index"
:class="index === cutIdx ? 'active' : ''"
>{{ item.level }}</dd>
</dl>
<div class="text">
dsafjadsjf;adshf;dshf;ahdsf;dshfhsd;fha;dshf;dshfdkshfahd;fha;dfha;
</div>
</template>
<script setup>
import { ref } from "vue";
const levels = ref([
{ level: "全部" },
{ level: "三级甲等" },
{ level: "三级乙等" },
{ level: "二级甲等" },
{ level: "二级乙等" },
{ level: "一级" }
]);
const cutIdx = ref(0);
</script>
<style scoped lang='scss'>
.level {
@include level-and-area;
}
.text{
width: 200px;
@include ellipsis;
}
</style>这个时候可能会报类似的错
这个时候就改一下vite.config.js文件，添加指定范围的代码就不报错了
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' // 新增
export default defineConfig({
plugins: [vue()],
resolve: { // 新增
//设置别名
alias: {
'@': resolve(__dirname, './src'),
},
},
---------------------从这里开始------------------------------
css: {
preprocessorOptions: {
// 这里配置 mixin.scss 混合文件的全局引入
scss: {
additionalData: `@import "@/styles/mixin.scss";`
}
}
}
---------------------到这里结束------------------------------
})确认出效果，sass配置就完成了。
配置axios
npm install axios设置axios实例
//引入axios
import axios from 'axios'
// 创建axios实例
const request = axios.create({
//base接口，表示请求URL的公共部分
baseURL:'http://127.0.0.1:8888/api/',
// 超时
timeout: 30000
})请求拦截器
request.interceptors.request.use(config => {
//对请求数据进行处理
return config
}, error => {
console.log('请求拦截器错误', error)
//请求拦截错误处理
})响应拦截器
request.interceptors.response.use(async(res) => {
// 获取错误信息
const message = res.data.message
return res.data
}, async error => {
//响应发生错误时的处理
console.log('error')
return false
}
)导出request
export default request;封装接口
import request from '@/utils/request'
// 风险事故等级列表接口
export function getRiskLevelList(params) {
return request({
url: '/cim-service/riskMapEvents/listPage',//请求的接口地址
method: 'get',//请求的方式
params: params//请求的数据
})
}
// 修改风险事故等级数据
export function postUpdataRiskLevel(data) {
return request({
url: '/cim-service/riskMapEvents/update',//请求的接口地址
method: 'post',//请求的方式
data: data//请求的数据
})
}使用接口
import {postUpdataRiskLevel} from '@/api/risk.js'
postUpdataRiskLevel(this.dialogForm).then(res => {
if (res.code == 200) {
this.$message.success('成功')
}
})全家桶配置就这样了，最后的这个axios封装是按理解整理的，大家可以参考就好
1063
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
