Vue应用.md · lcy/springboot_pasture

# Vue应用

## 1.创建Vue项目

```
1.cmd 进入命令终端
2.npm init vue@latest创建vue工程
3.根据提示完成创建
4.导入其他所需技术栈
（1）axios
npm install axios
（2）element
npm install element-plus --save
（3）element icon
npm install @element-plus/icons-vue
（4）sass
npm install sass -D
（5）router
npm install vue-router@4
创建src/router/index.js
在vue应用实例中使用vue-router
声明router-view标签展示页面
（6）pinia
npm install pinia
（7）persist
npm install pinia-persistedstate-plugin
（8）富文本编辑
npm install @vueup/vue-quill@latest --save
```

## 2.修改目录结构

```
使用项目的目录调整
1.删除src\components下的所有目录
2.在src目录下创建 utils,views,api 文件夹
3.将资料中的静态文件复制到assets目录下
4.删除App.vue中的内容
```

## 3.main.js

```
// main.ts
import './assets/main.scss'

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

//导入路由模块
import router from '@/router'
//导入pinia模块
import {createPinia} from 'pinia'
//导入pinia持久化插件persist
import { createPersistedState } from 'pinia-persistedstate-plugin'
// 解决分页中文问题
import locale from 'element-plus/dist/locale/zh-cn.js'

// 实例化模块
const app = createApp(App)
const pinia=createPinia();
const persist=createPersistedState();

// 使用实例
pinia.use(persist)

app.use(ElementPlus,{locale})
app.use(pinia)
app.use(router)
app.mount('#app')

```

## 4.util/request.js

```
// 定制请求的实例  以便在后续代码块中解耦

// 导入import
import axios from 'axios';
import { ElMessage } from 'element-plus'
import {userTokenStore} from '@/stores/token.js';
//import {useRouter} from 'vue-router'
import router from'@/router'

// 提取冗余代码
//const baseURL='http://localhost:1010';

// 解决浏览器同源策略（跨域问题） 在vite.config.js配置相关信息
const baseURL='/api';
const instance=axios.create({baseURL});
//const router =useRouter();

// 添加响应拦截器  异步
instance.interceptors.response.use(
    result=>{
        if(result.data.code===0){
            return result.data;
        }else if(result.data.code===2){
            ElMessage.error('原密码错误');
        }else{
            // alert(result.data.msg?result.data.msg:"网络异常")
            ElMessage.error(result.data.msg?result.data.msg:'网络错误');
        }
        return Promise.reject(result.data);
    },
    err=>{
        if(err.response.status===401){
            ElMessage.error('您还没有登录，请先登录');
            router.push('/');
        }
        else{
            ElMessage.error('服务器异常');
        }
        returnPromise.reject(err);
    }
)

// 添加请求拦截器
instance.interceptors.request.use(
    config=>{
        const tokenStore=userTokenStore();
        if(tokenStore.token){
            config.headers.Authorization=tokenStore.token;
        }
        return config;
    },
    err=>{
        console.log("fail");
        return Promise.reject(err);
    }
)
export default instance;

-----------------------vite.config.js---------------------------
在前端解决跨域问题
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server:{
    proxy:{
        '/api':{//获取路径中包含/api的请求
          target:'http://localhost:1010',
          changeOrigin:true,//修改源
          rewrite:(path)=>path.replace(/^\/api/,'')//将/api替换为''
        }
    }
  }
})
```

## 5.router/router.js

```
//路由器配置   选择不同的页面渲染

import {createRouter,createWebHistory} from 'vue-router'

//导入vue页面组件
import LoginVue from '@/views/Login.vue'
import homePageVue from '@/views/homePage.vue'

import ArticleCategoryVue from '@/views/article/ArticleCategory.vue'
import ArticleManageVue from '@/views/article/ArticleManage.vue'

import AdminAvatarVue from '@/views/admin/AdminAvatar.vue'
import AdminInfoVue from '@/views/admin/AdminInfo.vue'
import AdminResetPasswordVue from '@/views/admin/AdminResetPassword.vue'

const routes=[
    // 路径与对应的vue组件
    {path:'/',component:LoginVue},
    //redirect:'/home/article/manage'  默认配置
    {path:'/home',component:homePageVue,redirect:'/home/article/category',
        children:[
                {path:'/home/article/category',component:ArticleCategoryVue},
                {path:'/home/article/manage',component:ArticleManageVue},
                {path:'/home/admin/avatar',component:AdminAvatarVue},
                {path:'/home/admin/info',component:AdminInfoVue},
                {path:'/home/admin/updatePassword',component:AdminResetPasswordVue}
        ]
}
]

//创建路由器
const router=createRouter({
    history:createWebHistory(),
    routes:routes
})

//导出路由器
export default router;

------------------------使用-----------------------------
import {useRouter} from 'vue-router'
const router=useRouter();
```

## 6.stores/token.js

```
//定义store  使用pinia完成token的传递  获取请求头

import { defineStore } from "pinia";
import { ref } from "vue";
/*
1.第一个参数：名字唯一
2.第二个参数：函数，函数内部可以定义含住状态的所有内容
3.返回值  函数
*/

/*
    defineStore参数描述：
        第一个参数：给状态起名，具有唯一性
        第二个参数：函数，可以把定义该状态中拥有的内容

defineStore返回值描述：
        返回的是一个函数，将来可以调用该函数，得到第二个参数中返回的内容
*/
export const userTokenStore=defineStore('token',()=>{
    // 定义状态内容
    // 响应变量
    const token=ref('');

// 定义修改函数
    const setToken=(newToken)=>{
        token.value=newToken;
    }

// 定义清除函数
    const removeToken=()=>{
        token.value='';
    }

// 返回值为一个变量，两个函数
    return{token, setToken ,removeToken}

},
    {
        //将token数据持久化存储（页面刷新时数据不会丢失）
        perisit:true
    }

);

-----------------------使用---------------------------
import { userTokenStore } from '@/stores/token';
const tokenStore=userTokenStore();
```

## 7.stores/adminToken.js

```
// 定义admin的store  完成admin数据的页面显示   获取当前用户数据

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

export const useUserInfoStore = defineStore('userInfo',()=>{
    //1.定义用户信息
    const info = ref({})
    //2.定义修改用户信息的方法
    const setInfo = (newInfo)=>{
        info.value = newInfo
    }
    //3.定义清空用户信息的方法
    const removeInfo = ()=>{
        info.value={}
    }

return{info,setInfo,removeInfo}
},{
    persist:true
})
```

## 8.App.Vue

```
-----------------结合路由使用后-------------------

lcy/springboot_pasture

简介

发行版

贡献者

近期动态

lcy/springboot_pasture .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

lcy/springboot_pasture