vue3开发景德镇当地特色浏览网站

使用vue3配套的相关技术栈，开发的一个移动端景德镇特色浏览网站，包含了一些特色小吃、景区、游玩、瓷器，数据来源高德地图、百度百科、美团、大众点评、自己总结的等，包含一些基础的图片、相关的介绍、开放时间、人均消费、地图导航、电话等。

现在的一些数据都是我手动从网上找的，所以比较少。

整个项目的开发流程文档 fl1w05tccg.feishu.cn/docx/ALBddt…

网站包含的功能有，数据的展示、简单的登录注册、评论、加入喜欢。

相关技术栈有，vue3、vite、vue-router、vant、pinia、axios、leancloud、腾讯云存储。

在线网址 源码地址

掘友建议

头部返回

2023/3/13 已加

首页骨架屏

2023/3/13 已加

预览

开发

vite创建项目

相关链接

pnpm vite create jdz

cd jdz

pnpm install
pnpm run dev

然后按照提示操作即可，我没用ts

vite.config.js配置别名

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [
    vue()
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
})

使用vue-router

相关链接 安装

pnpm install vue-router@4

创建router，新建src/router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
  { path: '/', name: 'Home', component: () => import('@/views/home.vue') },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})
export default router

引入main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
const app = createApp(App)

app.use(router)
app.mount('#app')

使用

import { useRouter, useRoute } from 'vue-router'

const route = useRoute()
const router = useRouter()

const {data} = route.query
router.push({path:'/page',query:{data:1}})

使用vant

相关链接 安装

pnpm i vant

按需引入

1. 安装插件

pnpm add unplugin-vue-components -D

1. 配置插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// vant按需引入
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    })
  ],
})

完成以上两步，就可以直接在模板中使用 Vant 组件了 使用

<template>
  <van-button type="primary" @click="alert(1)">button</van-button>
</template>

使用pinia

相关链接 安装

pnpm install pinia

创建src/store/index.js，单独的state基本够用了

import { defineStore } from 'pinia'

export const useStore = defineStore('store', 
  state: () => {
    return {
      userInfo: null,
      allImages: null,
      scenic: [],
      food: [],
      play: [],
      porcelain: [],
    }
  })

引入main.js

import { createPinia } from 'pinia'

app.use(createPinia())

使用

<script setup>
import { useStore, storeToRefs } from '@/store'
import { computed } from 'vue'

const store = useStore()

// 可以直接使用
cosnt scenic = store.scenic

// 转成ref
const { scenic, food, porcelain } = storeToRefs(store)

// 使用computed
const isLike = computed(() => store.userInfo ? store.userInfo.likes : false)
</script>

使用leancloud和腾讯云存储

因为不想单独搞一个后端服务，所以JSON数据的CURD都放在leancloud，图片相关的都存在腾讯云，具体可以看我的另一篇文章