vue3 之 商城项目—项目搭建起步

news2024/9/21 8:03:24
1.创建项目

1️⃣

npm init vue@latest

在这里插入图片描述
2️⃣

npm install

3️⃣

npm run dev

4️⃣目录调整
在这里插入图片描述

2.git管理项目

基于creact-vue创建出来的项目默认没有初始化git仓库，需要我们手动初始化

执行命令

git init
git add.
git commit -m 'init'
3.项目起步—配置别名路径联想提示

什么是别名路径联想提示
在编写代码的过程中，一旦输入@/，vscode会立刻联想出src下的所有子目录和文件，统一文件路径访问不容易出错

如何配置
1️⃣在项目的根目录下新增jsconfig.json文件
2️⃣添加json格式下的配置项，如下：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

3️⃣vite.config.js

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    // 实际的路径转换  @  -> src
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
   }
})
3.项目起步—elementPlus引入
npm install element-plus --save

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中
我的项目是基于vite写的，所以下面代码放vite.config.js中

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// elementPlus按需导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // ...
   AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    // 实际的路径转换  @  -> src
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  }
})
3.项目起步—elementPlus主题制定

根据ui设计更改主题颜色

1️⃣安装scss

npm i sass -D

2️⃣准备定制样式文件 style/element/index.scss

/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      // 主色
      'base': #27ba9b,
    ),
    'success': (
      // 成功色
      'base': #1dc779,
    ),
    'warning': (
      // 警告色
      'base': #ffb302,
    ),
    'danger': (
      // 危险色
      'base': #e26237,
    ),
    'error': (
      // 错误色
      'base': #cf4444,
    ),
  )
);

3️⃣对ElementPlus样式进行覆盖

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// elementPlus按需导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [
        // 1. 配置elementPlus采用sass样式配色系统
        ElementPlusResolver({ importStyle: "sass" }),
      ],
    }),
  ],
  resolve: {
    // 实际的路径转换  @  -> src
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 2. 自动导入定制化样式文件进行样式覆盖
        additionalData: `
          @use "@/styles/element/index.scss" as *;
        `,
      }
    }
  }
  
})
3.项目起步—axios基础配置

1️⃣安装axios

npm i axios

2️⃣配置基础实例（统一接口配置）utils/http.js

// axios基础的封装
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/userStore'
const httpInstance = axios.create({
  baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
  timeout: 5000
})

// 拦截器

// axios请求拦截器
httpInstance.interceptors.request.use(config => {
  // 1. 从pinia获取token数据
  const userStore = useUserStore()
  // 2. 按照后端的要求拼接token数据
  const token = userStore.userInfo.token
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, e => Promise.reject(e))

// axios响应式拦截器
httpInstance.interceptors.response.use(res => res.data, e => {
  // 统一错误提示
  ElMessage({
    type: 'warning',
    message: e.response.data.message
  })
  return Promise.reject(e)
})
export default httpInstance

如果项目里不同的业务模块请求的接口地址不同
axios.create()方法可以执行多次，每次执行就会生成一个新的实例
在这里插入图片描述

3.项目起步—路由设计

** router/index.js**

// createRouter：创建router实例对象
// createWebHistory：创建history模式的路由
import { createRouter, createWebHistory } from 'vue-router'
import Login from '@/views/Login/index.vue'
import Layout from '@/views/Layout/index.vue'
import Home from '@/views/Home/index.vue'
import Category from '@/views/Category/index.vue'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  // path和component对应关系的位置
  routes: [
    {
      path: '/',
      component: Layout,
      children: [
        {
          path: '',
          component: Home
        },
        {
          path: 'category',
          component: Category
        }
      ]
    },
    {
      path: '/login',
      component: Login
    }
  ],
})

export default router

app.vue

<script setup>
</script>

<template>
  <!-- 一级路由出口组件 -->
  <RouterView />
</template>

<style scoped lang="scss">
header {
  line-height: 1.5;
  max-height: 100vh;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }

  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
}
</style>

layout/index.vue

<script setup>
</script>

<template>
  <RouterView />
</template>

总结
1️⃣路由设计的依据是什么？
内容切换的方式

2️⃣默认二级路由如何进行设置？
path配置项置空

4.项目起步—静态资源初始化

资源操作
1️⃣图片资源- 把image文件夹放到assets目录下
2️⃣样式资源-把common.scss文件放到styles目录下

main.js

// 引入初始化样式文件
import '@/styles/common.scss'
5.项目起步—error lens插件安装

error lens是vscode的插件可以实时提供错误警告信息
在这里插入图片描述

6.项目起步—scss文件自动导入

为什么要自动导入
在项目里一些组件共享的色值会以scss变量的方式统一放到一个名为var.scss的文件中，正常组件中使用，需要先导入scss文件，再使用内部的变量，比较繁琐，自动导入可以免去手动导入的步骤，直接使用内部的变量

自动导入配置
1️⃣在style下新增一个var.scss 文件，存入色值变量

$xtxColor: #27ba9b;
$helpColor: #e26237;
$sucColor: #1dc779;
$warnColor: #ffb302;
$priceColor: #cf4444;

2️⃣通过vite.config.js 配置自动导入文件

css: {
    preprocessorOptions: {
      scss: {
        // 2. 自动导入定制化样式文件进行样式覆盖
        additionalData: `
          @use "@/styles/element/index.scss" as *;
          @use "@/styles/var.scss" as *;
        `,
      }
    }
  }

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1437380.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Xampp中Xdebug的安装使用

Xampp中Xdebug的安装使用

工欲善其事&#xff0c;必先利其器 XDebug简介 XDebug 是一个用于 PHP 的调试和性能分析工具。它提供了一系列功能&#xff0c;帮助开发者在开发和调试 PHP 应用程序时更加高效。 以下是 XDebug 的一些主要特性和功能&#xff1a; 调试功能&#xff1a; 断点调试&#xff1a;…
阅读更多...
幻兽帕鲁怎么样？好玩? Mac版的玩《幻兽帕鲁》也很简单，只需三个步骤

幻兽帕鲁怎么样？好玩? Mac版的玩《幻兽帕鲁》也很简单，只需三个步骤

幻兽帕鲁怎么样 幻兽帕鲁是一款集合了多种游戏元素的游戏&#xff0c;它巧妙地融合了《方舟:生存进化》的野外生存挑战、《荒野之息》的开放世界探索、《魔兽世界》的多元角色互动以及宝可梦的精灵捕捉与培养等经典游戏元素。游戏的核心系统是「帕鲁」捕获&#xff0c;你可以让…
阅读更多...
电力负荷预测 | 基于LSTM、TCN的电力负荷预测（Python）

电力负荷预测 | 基于LSTM、TCN的电力负荷预测（Python）

文章目录 效果一览文章概述源码设计参考资料效果一览 文章概述 电力负荷预测 | 基于LSTM、TCN的电力负荷预测（Python） 源码设计 #------------------
阅读更多...
Java HashSet 重写 equals() 和 hashCode() 对象去重

Java HashSet 重写 equals() 和 hashCode() 对象去重

Ailt Insert 选择 equals() 和 hashCode() package com.zhong.collection.set;import java.util.HashSet; import java.util.Objects;public class HashSetDeduplication {public static void main(String[] args) {// HashSet 对象去重HashSet<Student> students new …
阅读更多...
momentJs推导日历组件

momentJs推导日历组件

实现效果: 代码&#xff1a; 引入momentjs然后封装两个函数构建出基本数据结构 import moment from moment;// 某月有多少天 export const getEndDay (m) > m.daysInMonth();/*** description 获取本月空值数据* param { Date } year { } 年度* param { Number } month …
阅读更多...
springboot Feign方式注入注解详解

springboot Feign方式注入注解详解

一、FeignClient注解详解 FeignClient是Spring Cloud中用于声明Feign客户端的注解&#xff0c;它使得编写HTTP客户端变得更简单。通过Feign的自动化配置机制&#xff0c;可以很容易地编写HTTP API客户端。以下是FeignClient的详解&#xff1a; 作用&#xff1a;FeignClient注解…
阅读更多...
C++，stl，vector容器详解

C++，stl，vector容器详解

目录 1.vector基本概念 2.vector的创建 3.vector赋值操作 4.vector容量和大小的操作 5.vector容器的插入和删除 6.vector容器的数据存取 7.vector互换容器 8.vector容器预留空间 1.vector基本概念 2.vector的创建 #include<bits/stdc.h> using namespace std;int m…
阅读更多...
CSS综合案例4

CSS综合案例4

CSS综合案例4 1. 综合案例 我们来做一个静态的轮播图。 2. 分析思路 首先需要加载一张背景图进去需要4个小圆点&#xff0c;设置样式&#xff0c;并用定位和平移调整位置添加两个箭头&#xff0c;也是需要用定位和位移进行调整位置 3. 代码演示 html文件 <!DOCTYPE htm…
阅读更多...
一个Vivado仿真问题的debug

一个Vivado仿真问题的debug

我最近在看Synopsys的MPHY仿真代码&#xff0c;想以此为参考写个能实现PWM-G1功能的MPHY&#xff0c;并应用于ProFPGA原型验证平台。我从中抽取了一部分代码&#xff0c;用Vivado自带的仿真器进行仿真&#xff0c;然后就遇到了一个莫名其妙的问题&#xff0c;谨以此文作为debug…
阅读更多...
vue3项目中使用mapv

vue3项目中使用mapv

vue3项目中使用mapv mapv是百度地图官方提供的地图数据可视化开源项目&#xff0c;提供了很多效果酷炫的绘图api mapv地址在这里&#xff0c;示例图在这里 先解释为什么要用mapv echarts画的地图&#xff0c;都是行政区划&#xff0c;就算是geo地图&#xff0c;也只能在行政…
阅读更多...
基于YOLOv8的暗光低光环境下（ExDark数据集）检测，加入多种优化方式---DCNv4结合SPPF ，助力自动驾驶（一）

基于YOLOv8的暗光低光环境下（ExDark数据集）检测，加入多种优化方式---DCNv4结合SPPF ，助力自动驾驶（一）

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文主要内容:详细介绍了暗光低光数据集检测整个过程&#xff0c;从数据集到训练模型到结果可视化分析&#xff0c;以及如何优化提升检测性能。 &#x1f4a1;&#x1f4a1;&#x1f4a1;加入 DCNv4结合SPPF mAP0.5由原始的0.682提升至…
阅读更多...
跳过mysql密码并重置密码 shell脚本

跳过mysql密码并重置密码 shell脚本

脚本 目前只是验证了5.7 版本是可以的&#xff0c;8.多的还需要验证 以下是一个简单的Shell脚本&#xff0c;用于跳过MySQL密码设置并重置密码&#xff1a; #!/bin/bash yum install psmisc -y# 停止MySQL服务 sudo service mysqld stop# 跳过密码验证 sudo mysqld --skip-g…
阅读更多...
品牌如何营造生活感氛围？媒介盒子分享

品牌如何营造生活感氛围？媒介盒子分享

「生活感」简而言之是指人们对生活的感受和意义&#xff0c;它往往没有充斥在各种重要的场合和事件中&#xff0c;而是更隐藏在细碎平凡的生活场景中。在营销越来越同质化的当下&#xff0c;品牌应该如何打破常规模式&#xff0c;洞察消费情绪&#xff0c;找到更能打动消费者心…
阅读更多...
4.JS变量(变量本质,声明,更新,交换,命名规则,let和var的区别,数组简单使用)

4.JS变量(变量本质,声明,更新,交换,命名规则,let和var的区别,数组简单使用)

什么是变量&#xff1f; 这里就写个人理解把&#xff0c;不仅仅是针对于js&#xff0c;在编程语言中&#xff0c;要想要计算机执行并且理解人类的意图&#xff0c;那么首先计算机要存储人类输入的数据&#xff0c;这个时候变量的作用就来了&#xff0c;变量的意义在于人类告诉…
阅读更多...
敏捷开发中的用户故事

敏捷开发中的用户故事

用户故事 drawio是一款强大的图表绘制软件&#xff0c;支持在线云端版本以及windows, macOS, linux安装版。 如果想在线直接使用&#xff0c;则直接输入网址drawon.cn或者使用drawon(桌案), drawon.cn内部完整的集成了drawio的所有功能&#xff0c;并实现了云端存储&#xff0c…
阅读更多...
LLM是一个向量程序库，提示是查询语言

LLM是一个向量程序库，提示是查询语言

2013 年&#xff0c;Mikolov 等人在 Google。 注意到一些值得注意的事情。 他们正在构建一个模型&#xff0c;将单词嵌入到向量空间中——这个问题从 20 世纪 80 年代开始就已经有很长的学术历史了。 他们的模型使用了一个优化目标&#xff0c;旨在将单词之间的相关关系转化为…
阅读更多...
【刷题日记】最长定差子序列

【刷题日记】最长定差子序列

给你一个整数数组 arr 和一个整数 difference&#xff0c;请你找出并返回 arr 中最长等差子序列的长度&#xff0c;该子序列中相邻元素之间的差等于 difference 。 子序列 是指在不改变其余元素顺序的情况下&#xff0c;通过删除一些元素或不删除任何元素而从 arr 派生出来的序…
阅读更多...
HDL Designer 2021.1 如何将默认编辑器修改为VsCode

HDL Designer 2021.1 如何将默认编辑器修改为VsCode

第1步 安装Vscode 第2步 添加Vscode至HDL Designer 第3步 更改HDL Designer编译器 第4步 修改结束&#xff0c;在HDL Designer中双击block可使用Vscode编辑verilog
阅读更多...
SpringBoot+Druid并开启监控页面

SpringBoot+Druid并开启监控页面

介绍 Druid 是一个开源的数据库连接池项目&#xff0c;由阿里巴巴集团开发并贡献给开源社区。它在Java领域中以其高性能、强大功能和易用性著称&#xff0c;是Java应用中广泛使用的数据库连接池组件之一。 Druid 的主要特点包括&#xff1a;   高性能与低延迟&#xff1a; Dr…
阅读更多...
2月6日作业

2月6日作业

1.现有无序序列数组为23,24,12,5,33,5347&#xff0c;请使用以下排序实现编程 函数1:请使用冒泡排序实现升序排序 函数2:请使用简单选择排序实现升序排序 函数3:请使用快速排序实现升序排序 函数4:请使用插入排序实现升序排序 #include<stdio.h> #include<string.h&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023