vue3全家桶(ts、vite、vue-router、axios、pinia)+element-plus

创建项目

npm init vite my-vite

cd my-vite

npm install

配置项目

1、修改tsconfig.json, 新增compilerOptions.baseUrl、compilerOptions.paths

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": [
      "ESNext",
      "DOM"
    ],
    "skipLibCheck": true,
    "baseUrl": "./", // 新增
    "paths": { // 新增
      "@": [
        "./src"
      ],
      "@/*": [
        "./src/*"
      ],
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

2、修改vite.config.ts, 新增resolve.alias、server 

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' // 新增

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: { // 新增
    //设置别名
    alias: {
      '@': resolve(__dirname, './src'),
    },
  },
  server: { // 新增
    port: 8080, //启动端口
    hmr: {
      host: '127.0.0.1',
      port: 8080,
    },
    // 设置 https 代理
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 后端 api 地址
        changeOrigin: true,
        rewrite: (path: string) => path.replace(/^\/api/, ''),
      },
    },
  },
})

安装全家桶(vue-router、axios、pinia)

集成vue-router

1、安装

npm install vue-router@4

2、新建/src/view文件夹,在view文件夹下新建Main.vue、Home.vue、Admin.vue文件

Main.vue内容:

<template>
  <router-link to="/home">home</router-link>
  <router-link to="/admin">admin</router-link>
  <router-view></router-view>
</template>
<script setup lang="ts"></script>

Home.vue内容:

<template>
  home
</template>
<script setup lang="ts"></script>

Admin.vue内容:

<template>
  admin
</template>
<script setup lang="ts"></script>

3、修改App.vue内容为:

<template>
  <Main></Main>
</template>

<script setup lang="ts">
import Main from './view/Main.vue'
</script>
<style scoped>

</style>

新建/src/router/index.ts文件

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

import Main from '@/view/Main.vue'
import Home from '@/view/Home.vue'
import Admin from '@/view/Admin.vue'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/main',
      component: Main,
    },
    {
      path: '/home',
      component: Home,
    },
    {
      path: '/admin',
      component: Admin,
    }
  ]
})

export default router

 4、在main.ts中引入vue-router

import { createApp } from 'vue'
import './style.css'//全局样式设置,先删掉其中的内容
import App from './App.vue'
import router from '@/router'//引入vue-router

const app = createApp(App)

app.use(router as any)//引入vue-router
app.mount('#app')

删除style.css中的内容,清除示例工程中的全局样式 

集成axios

1、安装:

npm install axios

2、在src目录下新建request/index.ts文件:

import axios, { AxiosResponse, AxiosRequestConfig } from 'axios';

const service = axios.create({
  // baseURL: 'http://localhost:3000',
  withCredentials: true,
});

// Request interceptors
service.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // do something
    return config;
  },
  (error: any) => {
    Promise.reject(error);
  }
);

// Response interceptors
service.interceptors.response.use(
  async (response: AxiosResponse) => {
    // do something
    return response.data;
  },
  (error: any) => {
    // do something
    return Promise.reject(error);
  }
);

export default service;

3、在src目录下新建apis/sysAuth.ts文件:

import httpRequest from '@/request/index'

interface LoginParam {
  loginName: string,
  password: string
}

export function apiAuthLogin(param: LoginParam) {
  return httpRequest({
    url: '/api/auth/login',//因为配置了代理,所以接口必须以/api开头
    method: 'post',
    data: JSON.stringify(param),
  })
}

这里注意接口地址必须以“/api”开头,和 vite.config.ts中proxy中的配置一样

4、在Home.vue中使用:

<template>
  home
  <button @click="handleLogin">登录</button>
</template>
<script setup lang="ts">
import { apiAuthLogin } from '@/apis/sysAuth';

const handleLogin = () => {
  apiAuthLogin({ loginName: 'name', password: '123' }).then((res) => {
    console.log(res)
  })
}

</script>

集成pinia

1、安装:

npm install pinia

2、在src下创建store/index.ts、store/user.ts文件

index.ts:

import { createPinia } from 'pinia';

const store = createPinia();
export default store;

user.ts:

import { defineStore } from 'pinia';

export const useUserStore = defineStore({
  id: 'user', // 必填且唯一
  state: () => {
    return {
      name: 'nouser',
    };
  },
  actions: {
    updateName(name: string) {
      this.name = name;
    },
  },
});

3、在main.ts中引入:

import { createApp } from 'vue'
import ElementPlus from 'element-plus'//引入element-plus
import 'element-plus/dist/index.css'//引入element-plus样式
import * as ElementPlusIconsVue from '@element-plus/icons-vue'//引入element-plus-icon图标
import './style.css'
import App from './App.vue'
import router from '@/router'//引入vue-router
import store from '@/store'//引入pinina

const app = createApp(App)

//引入element-plus-icon图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.use(ElementPlus)//引入element-plus
app.use(router as any)//引入vue-router
app.use(store)
app.mount('#app')

 

4、在Admin.vue中使用:

<template>
  admin::{{userStore.name}}
  <button @click="handleGetUser">获取用户</button>
</template>
<script setup lang="ts">
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

const handleGetUser = () => {
  //通过actions修改state
  userStore.updateName("user01")
}
</script>

至此,全家桶装完,接下来安装element-plus

element-plus

1、安装:

npm install element-plus

2、全局引入element-plus和样式文件:

import { createApp } from 'vue'
import ElementPlus from 'element-plus'//引入element-plus
import 'element-plus/dist/index.css'//引入element-plus样式
import './style.css'
import App from './App.vue'
import router from '@/router'//引入vue-router
import store from '@/store'//引入pinina

const app = createApp(App)
app.use(ElementPlus)//引入element-plus
app.use(router as any)//引入vue-router
app.use(store)
app.mount('#app')

 element-plus-icon图标

1、安装:

npm install @element-plus/icons-vue

2、修改main.ts文件:

import { createApp } from 'vue'
import ElementPlus from 'element-plus'//引入element-plus
import 'element-plus/dist/index.css'//引入element-plus样式
import * as ElementPlusIconsVue from '@element-plus/icons-vue'//引入element-plus-icon图标
import './style.css'
import App from './App.vue'
import router from '@/router'//引入vue-router
import store from '@/store'//引入pinina

const app = createApp(App)

//引入element-plus-icon图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.use(ElementPlus)//引入element-plus
app.use(router as any)//引入vue-router
app.use(store)
app.mount('#app')

  • 5
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vite是一个用于快速构建现代化的Web项目的构建工具,它专注于开发阶段的快速热重载,并使用ES模块作为原生的开发模式。Vue3是Vue.js的最新版本,它在性能、开发体验和可维护性上都有所提升。 针对你提到的具体的库和框架: - Vue Router是Vue.js官方的路由管理器,用于实现页面之间的导航和路由控制。你可以通过npm安装vue-router,并在项目中进行配置和使用。 - Pinia是Vue.js的状态管理库,它提供了一种简单而强大的方式来管理应用程序的状态。你可以集成Pinia到你的Vue项目中,以便更好地组织和共享你的应用程序状态。 - Axios是一个基于Promise的HTTP客户端,用于通过网络发送异步请求。你可以使用Axios来处理与服务器的通信,并获取数据来更新你的Vue应用程序。 - Element Plus是一套基于Vue3的组件库,包含了丰富的UI组件,可以帮助你快速搭建漂亮的用户界面。你可以在项目中安装和使用Element Plus来实现各种交互效果和用户界面。 如果你想使用ViteVue3和以上提到的库和框架来创建一个项目,你可以按照以下步骤进行: 1. 安装Vite:通过npm全局安装Vite,然后使用Vite命令初始化一个新的项目。 2. 配置Vite:根据你的项目需求,在Vite的配置文件中添加Vue Router、Pinia、AxiosElement Plus的相关配置。 3. 安装和配置Vue Router:通过npm安装Vue Router,并在项目中配置和使用Vue Router来管理应用程序的路由。 4. 集成Pinia:通过npm安装Pinia,并在项目中引入和配置Pinia,以便在应用程序中使用Pinia来管理状态。 5. 使用Axios:通过npm安装Axios,并在项目中引入和配置Axios,以便进行网络请求和数据获取。 6. 引入Element Plus:通过npm安装Element Plus,并在项目中按需引入和使用Element Plus的组件,以搭建漂亮的用户界面。 希望以上信息对你有帮助,祝你在使用ViteVue3和这些库和框架时取得成功!<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vite-vue-ts精简模版集成pinia+svg+router+@src](https://download.csdn.net/download/ldy889/85018930)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vite+vue3+ts+vue-router+pinia+axios+element-plus](https://blog.csdn.net/zy_080400/article/details/127125359)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值