Matching code address
First: only do the environment with the home page processing
Let’s start with the renderings
First, Vue3 environment construction
-
Vue create after vuE3 – Demo
-
According to the need to choose
-
Press Enter to select vue 3.x
-
Where do I put configuration files like Babel, PostCSS, esLint? Select a separate folder
- Complete the environment construction of Vue3
2. Vant3 environment construction
-
npm i vant@next -S
-
Import NPM I babel-plugin-import -d as needed
-
For users using babel7, this can be configured in babel.config.js. Address: root folder /babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'].plugins: [['import', {
libraryName: 'vant'.libraryDirectory: 'es'.style: true
}, 'vant'],
['@vue/babel-plugin-jsx'] // Extensions to JSX will be used later]};Copy the code- Modification of main.js. One way. There’s a better way. Location: SRC/main. Js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { Button, Icon, NavBar, Swipe, SwipeItem, List } from 'vant';
const app = createApp(App);
app.use(Swipe);
app.use(SwipeItem);
app.use(NavBar);
app.use(Button);
app.use(store).use(router).mount('#app');
Copy the code- Complete vant environment setup
Iii. JSX environment construction
-
Yarn add -d @vue/babel-plugin-jsx or NPM install @vue/babel-plugin-jsx -d
-
Location: root directory /babel.config.js configuration
Module.exports = {presets: [' @vue/cli-plugin-babel/preset'], plugins: [['import', {libraryName: preset'] 'vant', libraryDirectory: 'es', style: true }, 'vant'], ['@vue/babel-plugin-jsx'] ] };Copy the code- The JSX configuration is complete. You are ready to use JSX
Finish the home page
Step 1: Renovate app. vue
Location: SRC/app.vue change to app.jsx to test whether the JSX environment is successful
// App.jsx
const App = ({
render(){
return <router-view/>}});export default App
Copy the codeStep 2: Create view/home/index.jsx
// view/home/index.jsx import {reactive} from 'vue' import './index.scss' // tabBar const tabBarMock = [{id: 0, the title: 'recommended' path: '/ how many'}, {id: 1, the title: 'singer', path: '/ singer'}, {id: 2, the title: 'ranking,},]; const Home = ({ name: 'Home', setup(props) { const state = reactive({ list: [], tabBarIndex: 0 }); // Navigation bar search const handleNavSearch = () => {console.log(' search '); }; // Navigation expands const handleNavExtend = () => {console.log(' expand '); }; // tabBar toggle const handleTabClick = (id) => {state.tabBarIndex = id; }; const renderNavRight = <van-icon name="search" size="18" color="#fff" onClick={handleNavSearch}/>; const renderNavLeft = <van-icon name="wap-nav" size="18" color="#fff" onClick={handleNavExtend}/>; const renderTabBar = () => { return ( <div className="tabBar"> { tabBarMock.map(item => { return ( <div key={item.id} onClick={() => handleTabClick(item.id)}> <span className={state.tabBarIndex === item.id ? 'tabBarIndex' : ''}> {item.title} </span> </div> ) }) } </div> ) }; // Final render return () => (<div className="viewBox"> <van-nav-bar title="Pro" v-slots={{'right': () => renderNavRight, 'left': () => renderNavLeft }} /> { renderTabBar() } <div className="wrapBox"> <router-view/> </div> </div> ) }, }); export default HomeCopy the codeStep 3: Create view/home/index.scss
// view/home/index.scss
// Public variables
$bgMain: #d44439;
$fontColor: #f1f1f1;
.tabBar{
display: flex;
justify-content: space-between;
text-align: center;
line-height: 40px;
background: $bgMain;
color: $fontColor;
font-size: 14px;
div{
align-items: center;
flex: 1;
}
span{
border-bottom: 2px solid transparent;
padding: 3px 0;
font-weight: 700;
}
.tabBarIndex{
border-bottom: 2px solid #ffffff;
padding: 3px 0; }}.van-nav-bar{
background-color: $bgMain;
div{
color: $fontColor; }}.van-nav-bar::after{
border-bottom: none;
}
Copy the codeAt this point, our Home module is complete. Then he completes his sub-path. Use tabBar to switch paths
The rendering
Step 4: Modify the router, location: SRC /router/index.js
// src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
{
path: '/'.name: 'Home'.component: () = > import('.. /views/home/index'),
children: [{path: '/recommend'.name: 'recommend'.component: () = > import('.. /views/recommend/index'},],},];const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router
Copy the codeBefore completing the recommendation page
We need to add a tabBar jump page in home/index.jsx to add a route view and a route listener
// home/index.jsx import { onBeforeMount, reactive } from 'vue'; Import router from '.. /.. /router/index'; Import './index.scss' // mock data tabBar const tabBarMock = [{id: 0, title: 'recommend', path: '/recommend'}, {id: 1, title:' recommend'}, {id: 1, title: 'recommend'} 'singer' path: '/ singer'}, {id: 2, the title: 'ranking,},]; const Home = ({ name: 'Home', setup(props) { const state = reactive({ list: [], tabBarIndex: 0 }); // Const handleWhichPath = () => {switch (state.tabbarIndex) {case 0: router.push('/recommend'); break; default: break; }}; // Navigation bar search const handleNavSearch = () => {console.log(' search '); }; // Navigation expands const handleNavExtend = () => {console.log(' expand '); }; // tabBar toggle const handleTabClick = (id) => {state.tabBarIndex = id; }; // Add tabBar judgment onBeforeMount(() => {handleWhichPath(); }); Const renderNavRight = <van-icon name="search" size="18" color="# FFF "onClick={handleNavSearch}/>; Const renderNavLeft = <van-icon name="wap-nav" size="18" color="# FFF "onClick={handleNavExtend}/>; // renderNavLeft = <van-icon name="wap-nav" size="18" color="# FFF" onClick={handleNavExtend}/>; const renderTabBar = () => { return ( <div className="tabBar"> { tabBarMock.map(item => { return ( <div key={item.id} onClick={() => handleTabClick(item.id)}> <span className={state.tabBarIndex === item.id ? 'tabBarIndex' : ''}> {item.title} </span> </div> ) }) } </div> ) }; // Render return () => (<div className="viewBox"> <van-nav-bar title="Pro" v-slots={{'right': () => renderNavRight, 'left': () => renderNavLeft }} /> { renderTabBar() } <div className="wrapBox"> <router-view/> </div> </div> ) }, }); export default HomeCopy the codeStep 5: new SRC/view/how many/index. The JSX
import './index.scss';
// Mock data
const swipeMock = [
{
id: 0.picUrl: 'http://p1.music.126.net/L2vC5tVzEGVehAtcjpZ1FQ==/109951165605310291.jpg'}, {id: 1.picUrl: 'http://p1.music.126.net/8vLSxjkhuwpgDPErxyVt4w==/109951165609474509.jpg',}];/ / listMock data
const listMock = [
{
id: 5344775532.type: 0.name: "Restoring ancient ways is | bizarre fantasy trip".copywriter: "Editor's Recommendation: Surrounded By Gorgeous Color Discretion With Age Color".picUrl: "https://p2.music.126.net/NoURvJXsYoXrl1HqSoNy3Q==/109951165485850861.jpg"}, {id: 5445073692.type: 0.name: "Drunk listening to music, why not remember the past?".copywriter: "Editor's recommendation: a new song wine cup, last year's weather old pavilion.".picUrl: "https://p2.music.126.net/G-qDlNXkDzutU-aqaKeAfg==/109951165606205375.jpg"}, {id: 2857550594.type: 0.name: "Featured | Review 10W + Single Cycle songs".copywriter: "Top recommendations".picUrl: "https://p2.music.126.net/UuKmzOfFymLTGW77VTAFMw==/109951164170448016.jpg"}, {id: 5312159651.type: 0.name: "Please entangle me with the power of living things.".copywriter: "Top recommendations".picUrl: "https://p2.music.126.net/5udP0vh4pSTVYTDVOWU7HA==/109951165426321817.jpg"}, {id: 3124642208.type: 0.name: "TOP50 most commented cantonese songs on netease cloud".copywriter: "Top recommendations".picUrl: "https://p2.music.126.net/-6osWky_WObfAydYYiTvpA==/3236962232773608.jpg"}, {id: 3228441619.type: 0.name: "Those hearts playing and singing" Piano and guitar".copywriter: "Top recommendations".picUrl: "https://p2.music.126.net/ShJ7Kgh0lvGAUE83LTKzQg==/109951165121506557.jpg"}, {id: 4932781493.type: 0.name: "All of a sudden I don't want to laugh anymore." ".copywriter: "Top recommendations".picUrl: "https://p2.music.126.net/0MzdxTmiY0tO4SR4dp6WvA==/109951164845157020.jpg"}, {id: 2557744972.type: 0.name: "DJ first, DJ first.".copywriter: "Top recommendations".picUrl: "https://p2.music.126.net/AzQ5PYt2VYAIUM-506fHoQ==/109951165502267501.jpg"}, {id: 5344775532.type: 0.name: "Restoring ancient ways is | bizarre fantasy trip".copywriter: "Editor's Recommendation: Surrounded By Gorgeous Color Discretion With Age Color".picUrl: "https://p2.music.126.net/NoURvJXsYoXrl1HqSoNy3Q==/109951165485850861.jpg",},];const recommend = ({
name: 'recommend'.setup(props) {
const renderSpace = () = > {
return (
<div class='spaceTitle'>Recommend the playlist</div>)};const renderSwipe = () = > {
return (
<van-swipe>
{
swipeMock.map(item => {
return (
<van-swipe-item key={item.id} class="swipeImg">
<img src={item.picUrl} alt=""/>
</van-swipe-item>)})}</van-swipe>)};const renderRecommendList = () = > {
return (
<div class="recommendList">
{
listMock.map((item) => {
return (
<div class="recommendItem" key={item.id}>
<img
src={item.picUrl}
alt=""/>
<div class="desc">
{item.name}
</div>
</div>)})}</div>)};return() = > (
<div className="recommendPage">
{ renderSwipe() }
{ renderSpace() }
{ renderRecommendList() }
</div>)}});export default recommend
Copy the codeThe last step: new SRC/view/how many/index. SCSS
// Public variables
$bgMain: #d44439;
$fontColor: #f1f1f1;
.recommendPage{
height: 100%;
background: #f2f2f2;
overflow-y: auto;
.swipeImg{
height: 160px;
width: 100%;
padding: 4px;
background-color: #fff;
img{
width: 100%;
height: 100%;
border-radius: 10px; }}.spaceTitle{
font-weight: 700;
padding-left: 6px;
font-size: 14px;
line-height: 60px;
}
.recommendList{
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
overflow-y: auto;
.recommendItem{
width: 32%;
img{
width: 100%;
height: 120px;
}
.desc{
overflow: hidden;
margin-top: 2px;
padding: 0 2px;
height: 50px;
text-align: left;
font-size: 12px;
line-height: 1.4;
color: #2E3030; }}}}Copy the codeEffect:
This completes the first chapter
JSX is perfectly compatible with Vue3 and Vant and hopefully fun