文章目录

1. 安装vite脚手架

1.1 下载vite

终端输入npm init vue@latest

1.2 创建vue项目

依次按需求选择图中打勾的插件;选择完后,依次执行最底下的三条命令
在这里插入图片描述
安装完后的项目结构
项目结构

1.3 配置代理服务器 ( vite.config.ts )

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      '/api': {// 配置需要代理的路径 --> 这里的意思是代理http://localhost:80/api/后的所有路由
        target: 'http://httpbin.org',// 目标地址 --> 服务器地址
        changeOrigin: true,// 允许跨域
      },
    }
  }
})

2. 创建入口文件( index.html )

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
</head>

<body>
  <!-- 根组件容器 -->
  <div id="app"></div>

  <!-- 引入系统启动入口js文件 -->
  <script type="module" src="/src/main.ts"></script>
</body>

</html>

3. 创建系统入口页面( app.vue )

<template>
  <!-- html代码 -->
</template>

<script setup lang="ts">
	//js代码
</script>

<style scoped>
	/*局部css样式 */
</style>

4. 创建系统启动入口( main.ts )

 导入全局css样式
import './assets/main.css'
// 导入创建vue应用的函数
import { createApp } from 'vue'

// 导入根组件容器
import App from './App.vue'

// 创建根组件
const app = createApp(App)

// 挂载根组件
app.mount('#app')

5. 配置pinia

5.1 创建pinia( stores文件 )

//导入ref、computed函数
import { ref, computed } from 'vue'
//导入创建pinia的函数
import { defineStore } from 'pinia'

//创建pinia并导出
export const useCounterStore = defineStore('counter', () => {
  //ref()是state属性
  const count = ref(0)

  //computed()是getters属性
  const doubleCount = computed(() => count.value * 2)

  //function()是actions属性
  function increment() {
    count.value++
  }

  //返回状态，供其他文件调用
  return { count, doubleCount, increment }
},
  {
    //pinia数据持久化
    persist: true,
  }
)

main.js

5.2 挂载pinia ( main.ts )

// 导入创建vue应用的函数
import { createApp } from 'vue'
// 导入创建pinia的函数
import { createPinia } from 'pinia'
//导入pinia持久化插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
// 导入根组件容器
import App from './App.vue'

// 创建根组件
const app = createApp(App)
// 创建pinia
const pinia = createPinia()

//pinia挂载数据持久化插件
pinia.use(piniaPluginPersistedstate)
// 挂载pinia
app.use(pinia)
// 挂载根组件
app.mount('#app')

5.3 使用pinia ( 组件中 )

<template>
  <button @click="btn">{{ count }}</button>
</template>

<script setup lang="ts">
//导入pinia
import { useCounterStore } from './stores/counter'
//导入ref函数
import { ref } from 'vue'
// 使用pinia
const counterStore = useCounterStore()
//创建响应式数据,以pinia中的数据为初始值
let count = ref(counterStore.count)

function btn() {
  count.value++
  //把更新后的数据存储到pinia中
  counterStore.count = count.value
}
</script>

<style scoped>
/*局部css样式 */
</style>

6. 配置路由

6.1 创建路由表( router.ts )

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

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    //一级路由
    {
      path: '/login',
      component: () => import('../views/Login.vue'),
    },
    {
      path: '/main',
      component: () => import('../views/Main.vue'),
    },
    //路由重定向
    {
      path: '/',
      redirect: '/main'
    },
  ]
})

export default router

6.2 路由守卫 ( router.ts )

  • 全局前置守卫
//to：要去的路由
//from：当前的路由
router.beforeEach((to, from) => {

  // 返回 false 不让页面跳转
  // 返回 true 允许页面跳转
  return false
})

6.3 挂载路由 ( main.ts )

// 导入创建vue应用的函数
import { createApp } from 'vue'

// 导入根组件容器
import App from './App.vue'
// 导入路由
import router from './routers'

// 创建根组件
const app = createApp(App)

// 挂载路由
app.use(router)
// 挂载根组件
app.mount('#app')

6.4 路由显示 ( app.vue )

<template >
  <p @click="login">去登录</p>
  <p @click="main">去主页</p>
  <!-- 路由显示区域 -->
  <RouterView></RouterView>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';

//声明路由表
const router = useRouter()

const login = () => {
  //跳转到登录
  router.push('/login')
}
const main = () => {
  //跳转到登录
  router.push('/main')
}

</script>

<style scoped>

</style>

7.配置API

  • 终端输入npm i axios,安装axios模块

7.1 创建axios实例 ( api.ts )

//导入axios模块
import axios from 'axios'

//创建axios实例
const request = axios.create({
    //baseURL 将自动加在 url 前面，除非 url 是一个绝对 URL
    baseURL: 'http://httpbin.org',

    //如果请求时间超过 timeout 的值，则请求会被中断
    timeout: 1000,

    //自定义请求头
    headers: { 'X-Custom-Header': 'foobar' }
});

export default request

7.2 创建请求和响应拦截器 ( api.ts )


// 添加请求拦截器
request.interceptors.request.use(
    (config) => {
        // 在发送请求之前做些什么
        console.log('请求成功');

        return config;
    }, (error) => {
        // 对请求错误做些什么
        return console.error('请求出错');
    });

// 添加响应拦截器
request.interceptors.response.use(
    (response) => {
        // 2xx 范围内的状态码都会触发该函数。
        // 对响应数据做点什么
        console.log(response);

        return response;
    }, (error) => {
        // 超出 2xx 范围的状态码都会触发该log函数。
        // 对响应错误做点什么
        return console.log(error);
    });

7.3 使用API ( 组件中 )

<template >
  <p @click="req">发送请求</p>
</template>

<script setup lang="ts">
import request from './api/index';

const req = () => {
  request.post('url')
}
</script>

<style scoped>

</style>
# 前端
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区