Vue3 小兔鲜：项目起步-阿里云开发者社区

Vue3 小兔鲜：项目起步

2023-09-13 284

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Vue3 小兔鲜：项目起步

Vue3 小兔鲜：项目起步

Date: May 31, 2023

创建项目并整理目录

npm init vue@latest

src目录调整

需要补充创建以下文件：

git 管理项目

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

执行命令井完成首次提交

1.git init

2.git add .

3.git commit -m “init”

jsconfig.json配置别名路径

什么是别名路径联想提示

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

如何进行配置

配置别名路径可以在写代码时联想提示路径

1.在项目的根目录下新增 jsconfig.json 文件

2.添加json格式的配置项，如下：

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

理解：当你输入@/ ，Vscode会把src下所有目录都给你联想下来

深入理解：

vite.config.js这个文件的做的是路径转换的工作

我们配置的jsconfig.json做的是路径的联想提示工作

elementPlus引入

小兔鲜项目UI组件：

1.通用型组件（ElementPlus）

1.比如Dialog模糊框

2.业务定制组件（手写）

1.商品热榜组件

1. 安装elementPlus和自动导入插件

npm install element-plus --save

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

注意：这里的-D代表仅在开发环境依赖

2. 配置自动按需导入

// 引入插件 （按需导入）
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
  plugins: [
    // 配置插件
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ]
})

注意：plugins是vite插件的专门配置位置

总结以上：

首先，我们安装了element-plus及自动导入插件，如下方所示：

然后，我们导入插件所需要的包

最后，在组件中写代码即可，

值得注意的是，这里我们采用的是按需引入的方式，组件的中如果需要element-plus的组件，则会自动导入，无需我们手动配置。

3. 测试组件

在App.vue中导入

<template>
  <el-button type="primary">i am button</el-button>
</template>

效果：

定制elementPlus主题

为什么需要主题定制

小免鲜主题色和elementPlus默认的主题色存在冲突，通过定制主题让elementPlus的主题色和小免鲜项目保持一致

具体定制过程：

1. 安装sass

基于vite的项目默认不支持css预处理器，需要开发者单独安装

npm i sass -D

2. 准备定制化的样式文件

这里的写法是sass的写法，从element-plus中获取：

/* 只需要重写你需要的即可 */
@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,
    ),
  )
)

之后我们需要在style中新建名叫element的文件夹，并往里面填充index.sass的文件，最后把我们定制的文件存入里面即可。

3. 自动导入配置

这里自动导入需要深入到elementPlus的组件中，按照官方的配置文档来

1.配置elementPlus采用sass样式配色系统

2.自动导入定制化文件进行样式覆盖

具体配置修改如下：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 导入对应包
import ElementPlus from 'unplugin-element-plus/vite'
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [
        // 1. 配置elementPlus采用sass样式配色系统
        ElementPlusResolver({ importStyle: "sass"})
      ],
    }),
    // 按需定制主题配置
    ElementPlus({
      useSource: true,
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 2. 自动导入定制化样式文件进行样式覆盖
        additionalData: `
          @use "@/styles/element/index.scss" as *;
        `,
      }
    }
  }
})

axios安装并简单封装

1. 安装axios

npm i axios

2. 基础配置

官方文档地址： https://axios-http.com/zh/docs/intro

基础配置通常包括：

1.实例化 - baseURL + timeout

2.拦截器 - 携带token 401拦截等

这一块在utils下的http.js中编写（没有就自己创建）

import axios from 'axios'
// 创建axios实例
const http = axios.create({
  baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
  timeout: 5000
})
// axios请求拦截器
instance.interceptors.request.use(config => {
  return config
}, e => Promise.reject(e))
// axios响应式拦截器
instance.interceptors.response.use(res => res.data, e => {
  return Promise.reject(e)
})
export default http

3. 封装请求函数并测试

这一块在apis下的testAPI.js下编写（没有就自己编写）

import http from '@/utils/http'
export function getCategoryAPI () {
  return http({
    url: 'home/category/head'
  })
}

最后需要在main.js中补充并测试

import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
// ***添加***
import { getCategory } from './apis/testAPI'
getCategory().then(res => {
  console.log(res);
})
// ***
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')

思考：

如果项目里面不同的业务模块需要的接口基地址不同，该如何来做？

axios.create() 方法可以执行多次，每次执行就会生成一个新的实例，比如：

const http1 = axios.create({ baseURL: 'url1'})
const http2 = axios.create({ baseURL: 'url2'})

路由整体设计

路由设计原则：

设计一级路由：找内容切换的区域，如果是页面整体切换，则为一级路由

理解：如图的路径，path改变，则页面也会随之改变。以上二者为一级路由。

设计二级路由：：找内容切换的区域，如果是在一级路由页的内部切换，则为二级路由

理解：如上当/后面变成/category时，则页面会变成/下面的一级路由，即二级路由

下面开始配置：

1.配置一级和二级页面

一级：

<template>
  <div>我是首页</div>
</template>

<template>
  <div>我是登陆页</div>
</template>

二级：

<template>
  我是Category页
</template>

<template>
  我是Home页
</template>

1.eslint配置（可选）

如果我们在配置过程中遇到如下报错，那么我们需要对eslint配置

我们需要在.eslintrc.cjs中进行补充配置文件，添加如下规则即可：

rules: {
  'vue/multi-word-component-names': 0, // 不再强制要求组件命名
}

1.配置一级和二级路由

配置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

总结：

1.路由设计的依据是什么？

内容切换的方式

2.默认二级路由如何进行设置？

path配置项置空

如图所示，效果：二级路由home的path置空，当访问/时，home页也会展示

静态资源引入和Error Lens安装

图片资源和样式资源：

资源说明

1.实际工作中的图片资源通常由 UI设计师提供，常见的图片格式有png,svg等都是由UI切图交给前端

2.样式资源通常是指项目初始化的时候进行样式重置，常见的比如开源的 normalize.css 或者手写

资源操作

1.图片资源-把 images 文件夹放到assets 目录下

2.样式资源-把 common.scss 文件放到styles 目录下

静态资源引入

具体操作：

1.图片资源 - 把 images 文件夹放到 assets 目录下

2.样式资源 - 把 common.scss 文件放到 styles 目录下 ## 2. Error Lens插件安装 # scss变量自动导入

补充插件：

error lens：是一个实时提供错误警告信息的VScode插件，方便开发

效果：它会把报错信息放在代码右侧

为什么要自动导入

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

自动导入配置：

1.新增一个 var.scss 文件，存入色值变量

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

在styles中的element配置var.scss

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

在vite.config.js中

css: {
    preprocessorOptions: {
      scss: {
        // 自动导入scss文件
        additionalData: `
          @use "@/styles/element/index.scss" as *;
          @use "@/styles/var.scss" as *;
        `,
      }
    }
}

Vue3 小兔鲜：项目起步

Vue3 小兔鲜：项目起步

创建项目并整理目录

src目录调整

git 管理项目

jsconfig.json配置别名路径

什么是别名路径联想提示

如何进行配置

elementPlus引入

1. 安装elementPlus和自动导入插件

2. 配置自动按需导入

3. 测试组件

定制elementPlus主题

为什么需要主题定制

具体定制过程：

axios安装并简单封装

路由整体设计

静态资源引入和Error Lens安装

图片资源和样式资源：

静态资源引入

为什么要自动导入

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Vue3 小兔鲜：项目起步

Vue3 小兔鲜：项目起步

创建项目并整理目录

src目录调整

git 管理项目

jsconfig.json配置别名路径

什么是别名路径联想提示

如何进行配置

elementPlus引入

1. 安装elementPlus和自动导入插件

2. 配置自动按需导入

3. 测试组件

定制elementPlus主题

为什么需要主题定制

具体定制过程：

axios安装并简单封装

路由整体设计

静态资源引入和Error Lens安装

图片资源和样式资源：

静态资源引入

为什么要自动导入

热门文章

最新文章

相关课程

相关电子书

相关实验场景