vite+TypeScript+vue3+router4+Pinia+ElmPlus+axios+mock项目基本配置

1.vite+TS+Vue3

npm create  vite
Project name:... yourProjectName
Select a framework:>>Vue
Select a variant:>>Typescrit

2. 修改vite基本配置

配置 Vite {#configuring-vite} | Vite中文网 (vitejs.cn)

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path';   // 编辑器提示 path 模块找不到,可以cnpm i @types/node --dev 即可

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],     // 默认配置

  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')    // 配置别名;将 @ 指向'src'目录
    }
  },

  server: {
    port: 3000,       // 设置服务启动的端口号;如果端口已经被使用,Vite 会自动尝试下一个可用的端口
    open: true,       // 服务启动后自动打开浏览器
    proxy: {          // 代理
      '/api': {
        target: '真实接口服务地址',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')     // 注意代理地址的重写
      },
      // 可配置多个... 
    }
  }
})

3.安装vue-router

cnpm install vue-router@4 --save

创建src/router/index.ts文件,使用路由懒加载,优化访问性能。

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

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/home.vue') // 建议进行路由懒加载,优化访问性能
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/about.vue')
  }
]

const router = createRouter({
  // history: createWebHistory(),    // 使用history模式
  history: createWebHashHistory(),	 // 使用hash模式
  routes
})

export default router

main.ts 里面引入router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

createApp(App).use(router).mount('#app')

App.vue 文件中使用router-view 组件,路由匹配到组件会通过router-view 组件进行渲染。

<template>
	<div id="nav">
    	<router-link to="/">Home</router-link> |
    	<router-link to="/about">About</router-link>
	</div>
	<router-view />
<template>

4.安装vuex 安装pinia

npm install vuex@next --save

创建src/store/index.ts文件。

import { createStore } from 'vuex'

const defaultState = {
  count: 0
}
const store = createStore({
  state () {
    return {
      count: 10
    }
  },
  mutations: {
    increment (state: typeof defaultState) {
      state.count++
    }
  }
})
export default store;
main.ts 里面引入vuex
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/index'

const app = createApp(App);

// 将store、router挂载到全局变量上, 方便使用
import { useStore } from "vuex";
import { useRoute } from "vue-router";
app.config.globalProperties.$store = useStore();
app.config.globalProperties.$router = useRoute();

app.use(router).use(store).mount('#app')

<template>
  <div>
    首页 {{count}}
    <p @click="handleSkip">点我</p>
  </div>
</template>

<script>
import { getCurrentInstance, computed, ref } from 'vue';
export default {
  name: 'Home',
  setup() {
    const { proxy } = getCurrentInstance();
    // 使用store
    const count = computed(() => proxy.$store.state.count);

    const handleSkip = () => {
      // 使用router
      proxy.$router.push('/about');
    }

    return {
      count: ref(count),
      handleSkip
    }
  }
}
</script>

pinia

yarn add pinia
# 或者使用 npm
npm install pinia

main.ts

import { createApp } from 'vue'
import './style.css'
import router from './router'
import { createPinia } from 'pinia'
import App from './App.vue'

createApp(App).use(router).use(createPinia()).mount('#app')

@/store/counter.ts

import { defineStore } from 'pinia'


export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

Home.vue

<template>
  <div><p>home</p>

  <button @click="increment">count:{{count}};double:{{double}}</button>
  
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useCounterStore } from '../store/counter';
const counter = useCounterStore()

const {count, double}  = storeToRefs(counter)//这样才是响应式的
const {increment } = counter
</script>

<style scoped></style>

5.安装 UI库

1.Element UI Plus

一个 Vue 3 UI 框架 | Element Plus

NPM

$ npm install element-plus --save

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
 
const app = createApp(App)
 
app.use(ElementPlus)
app.mount('#app')

volar插件支持 获取对Element UI Plus 的提示 需要在tsconfig.json做如下设置

新增"types": ["element-plus/global"]

{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

2.Ant Design Vue

Ant Design of Vue - Ant Design Vue (antdv.com)

$ npm install ant-design-vue@next --save

$ yarn add ant-design-vue@next

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
 
const app = createApp(App);
 
app.use(Antd).mount('#app');

3.Iview

npm install view-ui-plus --save

import { createApp } from 'vue'
import ViewUIPlus from 'view-ui-plus'
import App from './App.vue'
import router from './router'
import store from './store'
import 'view-ui-plus/dist/styles/viewuiplus.css'
 
const app = createApp(App)
 
app.use(store)
  .use(router)
  .use(ViewUIPlus)
  .mount('#app')

4.Vant 移动端

npm i vant -S

import Vant from 'vant'
import 'vant/lib/index.css';
createApp(App).use(Vant).$mount('#app)

6.安装axios

npm install axios --save

封装公共请求方法

新建工具类 src/utils/request.ts

import axios from 'axios'

interface ApiConfig {
  body: object;
  data: object
}

async function request(url: string, options: ApiConfig) {
  // 创建 axios 实例
  const service = axios.create({
    baseURL: "", // api base_url
    timeout: 6000 // 请求超时时间
  });
  // 请求拦截
  service.interceptors.request.use(config => {
    // 这里可设置请求头等信息
    if (options && options.body) {
      config.data = options.body;
    }
    return config;
  });
  // 返回拦截
  service.interceptors.response.use(response => {
    // 这里可进行返回数据的格式化等操作
    return response.data;
  });
  return service(url, options);
}
export default request;

使用方法

<script>
import request from "@/utils/request.ts"

export default {
  setup() {
    request('/api/getNewsList').then(res => {
        console.log(res);
        // to do...
    });
  }
}
</script>

7.安装mockjs

安装

mock 模拟数据我们选用 mockjs 插件,vite 中需要安装 vite-plugin-mock 插件。

npm install mockjs --save

npm install vite-plugin-mock --save-dev

vite.config.ts 中引用插件

import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({
      supportTs: true,
      mockPath: './src/mock'
    })],   
})

使用mock

新建文件src/mock/index.ts,编写一下代码:

import { MockMethod } from 'vite-plugin-mock'
export default [
  {
    url: '/api/getNewsList',
    method: 'get',
    response: () => {
      return {
          code: 0,
          message: 'success',
          data: [
          	{
          		title: '标题111',
          		content: '内容1111'
          	},
          	{
          		title: '标题222',
          		content: '内容2222'
          	}
          ]
      }
    }
  },
  // more...
] as MockMethod[]

然后我们就可以在工程中进行 mock 数据的访问了,这里我们使用之前创建公共 api 请求方法 request。

<script>
import request from "@/utils/request.ts"

export default {
  setup() {
    request('/api/getNewsList').then(res => {
        console.log(res);
        // to do...
    });
  }
}
</script>
相关推荐
y先森29 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy30 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891133 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
Jacky(易小天)3 小时前
MongoDB比较查询操作符中英对照表及实例详解
数据库·mongodb·typescript·比较操作符
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员4 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js