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')

完