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>

最新文章

  1. [osx] 查看端口被占用
  2. SQL merge into 表合并
  3. MySQL目录
  4. java 使用cookie记录用户上一次访问的时间 记住 用户的 登录名
  5. linux工具之log4j-LogBack-slf4j-commons-logging
  6. ECMAScript 5.1中对属性的操作
  7. js调用函数时传入的参数个数与函数定义时的参数个数不符时的操作
  8. [DeeplearningAI笔记]改善深层神经网络_深度学习的实用层面1.9_归一化normalization
  9. PhpStorm如何下载github上的代码到本地
  10. java 如何使的float保留2位或者多位小数 (转载)
  11. js中console使用1
  12. Spark RDD 操作
  13. 记录----第一次使用BFS(广度搜索)学习经验总结
  14. js封装Cookie操作 js 获取cookie js 设置cookie js 删除cookie
  15. 【Selenium2】【Jenkins】
  16. cmp的值到底是0还是1还是-1的问题
  17. 【转载】TCP协议要点和难点全解
  18. mysql 5.7数据库支持emoji符号但是程序总算报错Incorrect string value: &#39;\xF0\x9F\x98\x84\xF0\x9F...&#39; for column ...
  19. C/C++之回调函数
  20. 第一百六十九节,jQuery,基础事件

热门文章

  1. Vue3 Vite3 多环境配置 - 基于 vite 创建 vue3 全家桶项目(续篇)
  2. 洛谷P4408 [NOI2003] 逃学的小孩 (树的直径)
  3. 【JavaScript排序】 sort()方法(解决null、undefined、0之间的排序(混乱)问题)
  4. SSM框架整合图书管理项目
  5. 齐博x1一段不错的小js提高一点点阅读体验 计算本文阅读所需的时长
  6. 2、yaml配置文件当中的坑(数字的定义和支持进制书写格式)
  7. SpringCloud微服务实战——搭建企业级开发框架(四十六):【移动开发】整合uni-app搭建移动端快速开发框架-环境搭建
  8. SQL的表的连接Left Join / Right Join /inner join相关
  9. Unity——射线检测(鼠标点击开关门效果)
  10. Spring三级缓存解决循环依赖