- A+
所属分类：Web前端
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
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> 
