nuxt3 + pinia + swiper +element-plus + less + 腾讯地图 创建项目及使用

这篇具有很好参考价值的文章主要介绍了nuxt3 + pinia + swiper +element-plus + less + 腾讯地图 创建项目及使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一。先说优点

1、基于Vue3:

Nuxt3是基于Vue.js 3开发的,Vue.js 3是目前最流行的前端框架之一。
这意味着你可以利用Vue3的所有优势,如性能优化、响应式编程、更好的TypeScript支持等。

2、服务端渲染(SSR):

Nuxt3支持服务端渲染,可以帮助你解决SPA(单页应用)中的SEO问题,提高页面加载速度,改善用户体验。

静态站点生成(SSG):Nuxt3还提供静态站点生成的功能,让你可以轻松构建高性能的静态站点,提高托管速度和安全性。

3、模块化:

Nuxt3有丰富的模块化生态系统,让你可以轻松地扩展应用的功能,减少开发工作量。

4、文件系统路由:

Nuxt3的文件系统路由让你可以通过简单的文件和目录结构来组织你的应用路由,让开发更加简洁明了。

5、开箱即用:

Nuxt3提供了许多开箱即用的功能,如状态管理、中间件、页面过渡动画等,使得开发过程更加简单和高效。

二。再来 nuxt3 项目搭建

1. nuxt3脚手架

npx nuxi init nuxt3-app 
// nuxt3-app 是我的项目名称

在 nuxt3-app 目录下下载依赖

yarn

运行

yarn dev

再访问http://localhost:3000 即可看到基础界面了

2. 项目结构

(刚搭建的项目啥文件夹都没有,这里面基本都是我自己创建的。)
nuxt3 + pinia + swiper +element-plus + less + 腾讯地图 创建项目及使用

  1. assets ,存放一些静态资源,包括一些 Sass、Less ,在项目组件中引用的时候需要在开头使用 ~assets/ 符号,如果你的静态资源文件需要 webpack 做构建编译处理,可以放到 assets 目录,否则可以放到 static 目录中去,这也是 assets 目录 和 static 目录的一个区别 (我这里放的是全局使用的css) 也可放在 public 下面

  2. components 组件! 全部都放在/components目录下,并自动注册,(不用自己引入了,真好~ )
    组件名称为目录名+组件名,并以大驼峰式命名,重复的名称会被去除~
    (~ 后面再介绍组件怎么使用,这里先介绍目录吧~ )

  3. pages Nuxt 3 的 pages 目录,是用来建立页面并放置的目录,当项目下有存在 pages 目录,Nuxt 将会自动加载 Vue Router 来实现路由效果,目录下的文件通常是 Vue 的组件,也允许具有 .vue、 .js、 .jsx、 .ts 或 .tsx 副档名的文件。 当我们建立 ./pages/home/ index.vue,文件内容如下,则表示home 路由 / 对应到这个home页面文件,路由的配置将会由 Nuxt 3 自动产生。(不用自己创建路由了,真好~ )

  4. plugins 这里定义的是插件,nuxt 会自动引用的。
    呐! 官网说的 ~
    nuxt3 + pinia + swiper +element-plus + less + 腾讯地图 创建项目及使用

  5. public 静态资源~ 我的图片放在这里

  6. store 状态管理,我项目中用的是pinia

  7. middleware 设置中间件

引入插件

pinia

yarn add pinia @pinia/nuxt

element-plus

yarn add @element-plus/nuxt

添加 plugins/element.ts

import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import ElementPlus from 'element-plus';

export default defineNuxtPlugin(nuxtApp => {
  // ElementPlus
  nuxtApp.vueApp.use(ElementPlus, { size: 'small', zIndex: 3000 });

  // ElementPlus Icons
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    nuxtApp.vueApp.component(key, component)
  }
})

less

我用的版本

    "less": "^3.12.2",
    "less-loader": "^7.0.1",

swiper

 yarn add vue-awesome-swiper
 yarn add swiper

添加 plugins/element.ts

import VueAwesomeSwiper from "vue-awesome-swiper";
// import "swiper/swiper.css";
import "swiper/swiper-bundle.css";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueAwesomeSwiper);
});

我的:package.json

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "nuxt": "3.0.0-rc.4"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.0.6",
    "@iconify/vue": "^3.2.1",
    "@pinia/nuxt": "^0.1.9",
    "@windicss/plugin-animations": "^1.0.9",
    "element-plus": "^2.2.8",
    "less": "^3.12.2",
    "less-loader": "^7.0.1",
    "nuxt-windicss": "^2.4.2",
    "pinia": "^2.0.14",
    "sass": "^1.53.0",
    "swiper": "^8.0.7",
    "nuxt-swiper": "^0.1.6",
    "unplugin-auto-import": "^0.9.2",
    "unplugin-vue-components": "^0.21.1",
    "vue-awesome-swiper": "^5.0.1"
  }
}

我安装的包

我的 nuxt.config.ts

import { defineNuxtConfig } from "nuxt";

const lifecycle = process.env.npm_lifecycle_event;

export default defineNuxtConfig({
  app: {
    head: {
      title: "房屋医院",
      // link: [{ rel: "icon", type: "image/*", href: "" }],
      link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
      script: [
        {
          type: "text/javascript",
          src: "https://map.qq.com/api/js?v=2.exp&key=XXX",
        },
      ],
    },
  },
  css: ["~/assets/scss/index.scss"],
  build: {
    transpile: lifecycle === "build" ? ["element-plus"] : [],
  },
  buildModules: ["nuxt-windicss", "@pinia/nuxt"],
});

四。 开始使用了

1. 配置路由 :

nuxt3 是不用自己配置路由的,只要创建文件夹就可以了~
nuxt3 + pinia + swiper +element-plus + less + 腾讯地图 创建项目及使用
home 文件夹对应的路由是 http://localhost:3000/home

2.中间件,设置路由重定向

nuxt3 + pinia + swiper +element-plus + less + 腾讯地图 创建项目及使用

// 设置
export default defineNuxtRouteMiddleware((to, from) => {
  console.log("auth");
  return navigateTo("/home");
});

我的需求是,刚进入页面默认进入home路由。

// 使用 pages/index
definePageMeta({
  middleware: "auth",
});

3. 使用组件

nuxt3 + pinia + swiper +element-plus + less + 腾讯地图 创建项目及使用
index文件 是自己在 home 文件夹下面的。要是使用 直接

<Home />

com 文件夹下面的 aboutUsImg 文件 要是使用 直接

<HomeComAboutUsImg />

4. 引入静态资源

nuxt3 + pinia + swiper +element-plus + less + 腾讯地图 创建项目及使用
我的图片资源,都是放在pulic/imgs,下面的。
使用1 :

 <div class="introduction-title">
    <img src="/imgs/introduction/titleUse.png" alt="" />
    // 直接 "/imgs/introduction/titleUse.png" 去使用,要加/
</div>

使用2 :state中使用
不要加/
nuxt3 + pinia + swiper +element-plus + less + 腾讯地图 创建项目及使用

5. 使用 pinia

import { defineStore } from "pinia";
export const useCommon = defineStore("common", {
  state: () => {
    return {
      selectNavIndex: 0
    };
  },
  actions: {
    setSelectNavIndex(val) {
      this.selectNavIndex = val;
    }
  },
});
import { useHome } from "@/store/home";
const homeStore = useHome();
const selectNavIndex = computed(() => homeStore.selectNavIndex);

6.使用腾讯地图

nuxt.config.ts 配置

export default defineNuxtConfig({
  app: {
    head: {
      title: "房屋医院",
      // link: [{ rel: "icon", type: "image/*", href: "" }],
      link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
      script: [
        {
          type: "text/javascript",
          src: "https://map.qq.com/api/js?v=2.exp&key=XXX",
        },
      ],
    },
  },
});

文件中使用:

<template>
  <div class="map">
    <div id="container"></div>
  </div>
</template>

<script setup>
const initMap = () => {
  const center = new qq.maps.LatLng(31.275091, 120.608716);
  var map = new qq.maps.Map(document.getElementById("container"), {
    // 地图的中心地理坐标。
    center: center,
    zoom: 13,
    disableDefaultUI: true, //禁止所有控件
  });
  var label = new qq.maps.Label({
    position: center,
    map: map,
    content: "文本标记",
  });
  var marker = new qq.maps.Marker({
    position: center,
    map: map,
  });
};
onMounted(() => {
  initMap();
});
</script>

<style lang="less" scoped>
#container {
  /*地图(容器)显示大小*/
  width: 527px;
  height: 343px;
}
</style>

打包:

npm run generate 或者 npm run build 

生成 .output / dist 文件

全局 安装

npm install -g http-server

打开cmd命令行,cd进入.output / dist 文件下的 public文件夹目录下,执行

http-server -p 12345

打开启动的项目地址 即可查看是否成功。文章来源地址https://www.toymoban.com/news/detail-408744.html

到了这里,关于nuxt3 + pinia + swiper +element-plus + less + 腾讯地图 创建项目及使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3.2 + TypeScript + Pinia + Vite4 + Element-Plus + 微前端(qiankun) 后台管理系统模板(已开源---显示项目页面截图)

    Wocwin-Admin,是基于 Vue3.2、TypeScript、Vite、Pinia、Element-Plus、Qiankun(微前端) 开源的一套后台管理模板;同时集成了微前端 qiankun也可以当做一个子应用。项目中组件页面使用了Element-plus 二次封装 t-ui-plus 组件,目前已新增fastmock接口。 Link:https://wocwin.github.io/wocwin-admin/ 账号:

    2024年02月08日
    浏览(82)
  • 搭建vue3,TypeScript,pinia,scss,element-plus,axios,echarts,vue-router,babylon,eslint,babel,拖拽,rem自适应大屏

    1.1、使用vite初始化项目 1.1.1、创建项目文件夹 1.1.2、进入项目文件夹 1.1.3、初始化项目 1.1.4、输入项目名称 1.1.5、选择vue 1.1.6、选择TypeScript 1.1.7、查看当前源(非必要) 1.1.8、更换为国内镜像(非必要) 1.1.9、进入项目 1.1.10、安装依赖 1.1.11、运行项目 1.1.12、修改部分报错信息

    2024年04月23日
    浏览(57)
  • element-plus图片预览

    背景: 项目中需要对图片进行放大预览操作; 解决方案: ① 使用 el-image 自带的预览功能; ②使用 el-image-preview 组件进行预览; 官方文档:Image 图片 | Element Plus 1. 官方示例: 2. 应用到项目中(完整代码): 3. 大致效果图: 1. el-image-preview 组件使用: 2. 使用示例: 3. 效果

    2024年02月15日
    浏览(55)
  • element-plus表单校验

    el-form标签上定义rules属性进行双向绑定  :rules=\\\"loginRules\\\"  ,loginRules这个校验规则定义在data数据里,(1)要注意的是loginRules里面定义username和password需要与表单数据绑定的参数同名。(2)username: [{ required: true, message: \\\'账号不能为空哦\\\', trigger: \\\'blur\\\' }] , 其中required校验必填不

    2024年02月11日
    浏览(41)
  • 本地部署element-plus文档

    由于一直使用的前端组件element-plus,所以需要经常看文档,但无奈官网实在不给力,经常报503或者404,大大影响效率和心情,忍无可忍就本地化部署一套解决此问题。 百度了一下大多数都是使用 vscode的live server, 或者放到服务器上, 均可使用。 因为我自己测试需要访问很多文

    2023年04月09日
    浏览(48)
  • Element-Plus 学习笔记一

    这几天在学vue3, 用Element-plus 加 vue3 搭了个框架,在这里记录一下项目搭建中遇到的问题。   1、使用 Element-plus 的 icon 图标,显示不出来     首先,用命令行中安装  Element-plus 的图标: npm install @element-plus/icons-vue --save    然后,在 main.js 中进行全局注册,添加以下代码: 最

    2024年02月13日
    浏览(37)
  • element-plus 动态Icon图标

    目录 1,前言 2,使用 2.1,方式一 2.2,方式二 源自 Element Plus 团队正在将原有组件内的 Font Icon 向 SVG Icon 迁移,请多多留意更新日志, 及时获取到更新信息,Font Icon 将会在第一个正式发布被废弃,请尽快迁移 在此记录一下如何使用element-plus中的icon组件 环境: Vue:3.2.16 Elem

    2024年02月16日
    浏览(43)
  • 使用Element-Plus 加载style

    chrome扩展开发插件基于vue3、ts、Element Plus、Webpack5、axios、less开发 支持content快速调用chrome对象及axios 详看 pages/content/app.vue 开箱即用chrome插件 基础框架 :使用 Vue3/Element Plus TypeScript : 应用程序级 JavaScript 的语言 获取项目代码 安装依赖 运行 使用Element-Plus 加载style https://deve

    2024年01月22日
    浏览(43)
  • Element-plus侧边栏踩坑

    el-menu直接嵌套el-menu-item菜单,折叠时不会出现文字显示和小箭头无法隐藏的问题,但是实际开发需求中难免需要把el-menu-item封装为组件 vue3项目中嵌套两层template

    2024年02月14日
    浏览(70)
  • vue3使用element-plus

    element-ui 是配合 vue2 使用,element-plus 是配置 vue3 使用的 1. 包管理器的方式 如果是使用 webpack 或者 vite 打包工具新建的项目 2. 浏览器直接导入 直接通过浏览器的 HTML 标签导入 Element Plus,然后就可以使用全局变量 ElementPlus 1. 导入全部组件且注册所有的图标 声明使用 ElementPl

    2024年02月08日
    浏览(80)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包