Detailed Explanation of Practical Practice of vite2.0+vue3 Mobile Project

1. Involving technical points

vite version vue3 ts Integrated routing Integrated vuex Integrated axios Configuring Vant3 Mobile terminal adaptation Request broker

Step 2 Steps

vite+ts+vue3 requires only one line of command

npm init @vitejs/app my-vue-app --template vue-ts

Configure routing

npm install vue-router@4 --save

Create a new router directory and a new index. ts file under src

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
const routes: Array<RouteRecordRaw> = [
 {
 path: "/",
 name: "Home",
 meta: {
  title: " Home page ",
  keepAlive: true
 },
 component: () => import("../views/Home/index.vue"),
 },
 {
 path: "/login",
 name: "Login",
 meta: {
  title: " Login ",
  keepAlive: true
 },
 component: () => import("../views/Login/index.vue"),
 },
];
const router = createRouter({
 history: createWebHashHistory(),
 routes
});
export default router;

Mount routes on main. ts

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";createApp(App)
.use(router)
.mount('#app')

Configuring Datacenter vuex (4. x)

Installation

npm i vuex@next --save

Configure

Create the store directory under src and create index. ts under store

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: {}
});

Mount

Mounting data center on 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

Installation

npm i vant@next -S

vite version does not need to configure components to load on demand, because all modules in Vant 3.0 are written based on ESM, which naturally has the ability to introduce on demand, but all styles must be introduced into 137.2 k

Introduce styles globally in main. ts

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";
import store from "./store";
import 'vant/lib/index.css'; //  Global introduction style 
createApp(App)
.use(router)
.use(store)
.use(ant)
.mount('#app')

Mobile terminal adaptation

Install postcss-pxtorem

npm install postcss-pxtorem -D

Create postcss. config. js in the root directory

npm install vue-router@4 --save

0

Create a new rem. ts equal ratio adaptation file under the new util directory in the root directory src

npm install vue-router@4 --save

1

Introduced in mian. ts

npm install vue-router@4 --save

2

Configure Network Request axios

Installation

npm i -s axios

Configuring axios

Create the utils folder in src and create request. ts under utils

npm install vue-router@4 --save

4

Use

npm install vue-router@4 --save

5

Configure the request broker

vite.config.ts

npm install vue-router@4 --save

6

Above, one of the most basic mobile terminal development configurations has been completed.

3. vite pair < script setup > And < style vars > The support is exceptionally friendly

Normal writing

npm install vue-router@4 --save

7

Is it much simpler

<style vars> How to use it? 
<script lang="ts" setup="props">
const state = reactive({
 color: "#ccc",
});
</script>
<style >
.text {
 color: v-bind("state.color");
}
</style>

It's as simple as that!

Code

Original address: zhuanlan. zhihu. com/p/351888882

Online preview: http://123.56.85.24/vite/#/

Code address: github. com/huoqingzhu/vue3-vite-ts-Vant

vitejs Chinese Network: https://cn.vitejs.dev/