这篇文章主要介绍了vite2.0+vue3移动端项目实战详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
一.涉及技术点
- vite版本
- vue3
- ts
- 集成路由
- 集成vuex
- 集成axios
- 配置Vant3
- 移动端适配
- 请求代理
二.步骤
vite+ts+vue3只需要一行命令
npm init @vitejs/app my-vue-app --template vue-ts
配置路由
npm install vue-router@4 --save
在src下新建router目录,新建index.ts文件
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"; const routes: Array<RouteRecordRaw> = [ { path: "/", name: "Home", meta: { title: "首页", keepAlive: true }, component: () => import("../views/Home/index.vue"), }, { path: "/login", name: "Login", meta: { title: "登录", keepAlive: true }, component: () => import("../views/Login/index.vue"), }, ]; const router = createRouter({ history: createWebHashHistory(), routes }); export default router;
在main.ts挂载路由
import { createApp } from 'vue' import App from './App.vue' import router from "./router";createApp(App) .use(router) .mount('#app')
配置数据中心vuex(4.x)
安装
npm i vuex@next --save
配置
在src下创建store目录,并在store下创建index.ts
import { createStore } from "vuex"; export default createStore({ state: { listData:{1:10}, num:10 }, mutations: { setData(state,value){ state.listData=value }, addNum(state){ state.num=state.num+10 } }, actions: { setData(context,value){ context.commit('setData',value) }, }, modules: {} });
挂载
在main.ts挂载数据中心
import { createApp } from 'vue' import App from './App.vue' import router from "./router"; import store from "./store"; createApp(App) .use(router) .use(store) .mount('#app')
Vant3
安装
npm i vant@next -S
vite版本不需要配置组件的按需加载,因为Vant 3.0 内部所有模块都是基于 ESM 编写的,天然具备按需引入的能力,但是样式必须全部引入137.2k
在main.ts全局引入样式
import { createApp } from 'vue' import App from './App.vue' import router from "./router"; import store from "./store"; import 'vant/lib/index.css'; // 全局引入样式 createApp(App) .use(router) .use(store) .use(ant) .mount('#app')
移动端适配
安装postcss-pxtorem
npm install postcss-pxtorem -D
在根目录下创建postcss.config.js
npm install vue-router@4 --save 0
在根目录src中新建util目录下新建rem.ts等比适配文件
npm install vue-router@4 --save 1
在mian.ts引入
npm install vue-router@4 --save 2
配置网络请求axios
安装
npm install vue-router@4 --save 3
配置axios
在src创建utils文件夹,并在utils下创建request.ts
npm install vue-router@4 --save 4
使用
npm install vue-router@4 --save 5
配置请求代理
vite.config.ts
npm install vue-router@4 --save 6
以上,一个最基本的移动端开发配置完成。
三. vite对<script setup> 和<style vars>的支持格外友好
正常写法
npm install vue-router@4 --save 7
是不是简洁了很多
npm install vue-router@4 --save 8
就这么简单!
代码
原文地址:zhuanlan.zhihu.com/p/351888882
线上预览:http://123.56.85.24/vite/#/
代码地址:github.com/huoqingzhu/vue3-vite-ts-Vant
vitejs中文网:https://cn.vitejs.dev/
到此这篇关于vite2.0+vue3移动端项目实战详解的文章就介绍到这了,更多相关vite2.0+vue3项目实战内容请搜索知优网以前的文章或继续浏览下面的相关文章希望大家以后多多支持知优网!
转载请说明出处
知优网 » vite2.0+vue3移动端项目实战详解(vue3 移动端)
知优网 » vite2.0+vue3移动端项目实战详解(vue3 移动端)