浅析Vue3 实战笔记(一)

唆键盘的小前端

已于 2024-06-07 19:03:13 修改

阅读量943

点赞数 29

分类专栏： Javascript 前端 vue 文章标签：笔记 javascript 前端 vue.js anti-design-vue

于 2024-06-07 13:32:37 首次发布

本文链接：https://blog.csdn.net/qq_32453495/article/details/139524473

版权

前端同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

Javascript

12 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

本文是结合实践中和学习技术文章总结出来的笔记(个人使用),如有雷同纯属正常((✿◠‿◠))

喜欢的话点个赞,谢谢! 有问题欢迎指正!!

前面已经讲了基本的Vue生命周期和入门知识,本篇开始使用Vite构建一个demo

1. 创建项目

1.1. 初始化项目

使用Vite初始化项目

yarn create vite my-vue-vite

初始化之后会得到一个这样的目录

现在已经是一个完整的项目了,,可以启动,但是我们这里还需要先配置一下Eslint方便后续写代码的校验

1.2. 配置eslint

安装Eslint

yarn add eslint -D

本来是打算用Eslint@9来做配置,由于eslint@9版本实在是配置太麻烦这里我建议安装指定版本:(丢入package.json文件 yarn 安装即可)

  "eslint": "^8.57.0",
  "eslint-config-standard": "^17.1.0",
  "eslint-plugin-import": "^2.29.1",
  "eslint-plugin-n": "^16.6.2",
  "eslint-plugin-promise": "^6.1.1",
  "eslint-plugin-vue": "^9.24.1",
  "typescript-eslint": "^7.6.0",

根目录下新增一个.eslintrc.cjs文件: 这是我个人的一些简单配置

module.exports = {
    env: {
        browser: true,
        es2021: true
    },

    extends: [
        'plugin:vue/vue3-strongly-recommended',
        'standard'
    ],
    parserOptions: {
        ecmaVersion: 12,
        parser: '@typescript-eslint/parser',
        sourceType: 'module'
    },

    plugins: [
        'vue',
        '@typescript-eslint'
    ],
    rules: {
        'vue/multi-word-component-names': 'off',
        indent: ['error', 4] // 设置为4个空格
    },

    ignorePatterns: [
        'node_modules/',
        'dist/',
        '.commitlintrc.js'
    ]
}

配置完成以后需要在Vscode设置一下才能自动保持格式化,如下图所示:

首选项=>设置=>搜索Eslint=>Eslint › Format: Enable 设置打钩

这样我们ctrl +s 保存的时候就会自动按照Eslint自动格式化代码了

2. 项目目录结构设计

本文将按照以下目录结构进行开发，后续章节的webpack配置也是基于此目录结构。
请先按照以下内容将目录搭建好,方便后续操作

├─ /public              <--静态目录
|  ├─ /images           <--图片目录
|  |  └─ logo.png       <--菜单logo
|  ├─ favicon.ico       <--项目图标
├─ /src                 <--开发目录
|  ├─ /api              <--API公用目录
|  |  └─ index.ts   
|  ├─ /components        <--公用组件目录
|  ├─ /store            <--Pinia状态管理目录
|  |  ├─ /models        <--Pinia models目录
|  |  ├─ index.ts       <--Pinia Stroe
|  ├─ /router           <--路由目录
|  |  ├─ index.ts       <--路由配置文件
|  ├─ /views            <--页面目录
|  |  ├─ /Home          <--Home目录
|  |  ├─ ├─index.vue    <--Home页面代码
|  ├─ App.vue           <--App文件
|  ├─ main.ts           <--主入口
|  ├─ vite-env.d.ts    
├─ .gitignore 
├─ .eslintrc.cjs        <--eslint配置文件
├─ index.html           <--主入口html文件
├─ README.md            <--项目说明
├─ tsconfig.json        <--ts配置文件
├─ vite.config.ts       <--vite配置文件
└─ package.json         <--依赖配置文件

这种目录结构设计，将页面、请求api、状态管理、路由分别建立独立的目录，并且设置了components等公用目录，方便多人协作开发及后续维护。

3. 配置vite.config.ts

vite.config.ts文件与我们平常配置webpack文件长得差不多,根据官方文档按需配置即可

3.1. 设置别名

在我们开发项目的时候为了方便写引入路径和防止路径太长写错,我们都会设置@别名来代替无穷尽../../这种写法

安装@types/node模块 否则引入path会提示找不到模块

yarn add @types/node --save-dev

修改vite.config.ts文件:

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

配置tsconfig.json文件:

 "compilerOptions": {
   .......
    //src路径
    "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
    "paths": { //路径映射，相对于baseUrl
      "@/*": ["src/*"] 
    },
 }

3.2. 配置代理

开发项目跨域请求通常是不能直接请求的,需要进行跨域设置,在模块化开发中通常都是使用代理来解决跨域的问题

修改vite.config.ts文件: 这里我的本地服务器是4000端口所以我配置了localhost:4000,大家可以自行更改

export default defineConfig({
  ......
    server: {
        // 代理域名
        proxy: {
            '/api': {
                target: 'http://localhost:4000',
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    }
})

4. 开始开发

打开App.vue删除不需要的代码

<script setup lang="ts">
</script>
<template>
  <div>App</div>
</template>
<style scoped></style>

4.1. 配置路由

安装vue-router

yarn add vue-router@4

修改router/index.ts

import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
    history: createWebHashHistory(), // 路由模式
    routes: [
        {
            path: '/home',
            name: 'home',
            component: () => import('../views/Home/index.vue')
        },
        {
            path: '/test',
            name: 'test',
            component: () => import('../views/Test/index.vue')
        }
    ]
})
export default router

在main.ts中注册:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

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

在App.vue中使用:

<script setup lang="ts">
</script>
<template>
  <!-- 路由页面入口 -->
  <router-view />
</template>
<style scoped></style>

页面显示效果:

4.2. 引入Ant Design Vue 2.X

安装

yarn add ant-design-vue@next

在main.ts注册Antd

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import 'ant-design-vue/dist/reset.css'

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

在Home页面中引入button组件

views/Home/index.vue

<script setup lang='ts'>
import { Button } from 'ant-design-vue'
</script>
<template>
  <div>Home</div>
  <Button type="primary">
    button按钮
  </Button>
</template>
<style lang='less' scoped>
</style>

4.3. 布局样式

这里的布局UI我们采用ant-design-vue的layout组件(可点击跳转官网查阅)

新建layout目录:src/layout/index.vue

<script lang="ts" setup>
import { ref } from 'vue'
import logo from '../../public/images/logo.svg'
import { MenuListType } from '@/types/Home'
const collapsed = ref<boolean>(false)
const MenusList = ref<MenuListType[]>([
    {
        name: '首页',
        path: '#/',
        children: [],
        icon: 'HomeOutlined',
        id: '1'
    },
    {
        name: '测试页面',
        path: '#/test',
        children: [],
        icon: 'WindowsOutlined',
        id: '2'
    }

])
const selectedKeys = ref(['1'])
</script>
<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider
      v-model:collapsed="collapsed"
      collapsible
    >
      <div class="logo">
        <img
          class="logoimg"
          :src="logo"
          alt=""
        >
        Vite Demo
      </div>
      <a-menu
        theme="dark"
        v-model:selectedKeys="selectedKeys"
        mode="inline"
      >
        <a-menu-item
          v-for="item in MenusList"
          :key="item.id"
        >
          <component :is="item?.icon" />
          <a
            class="menus_text"
            :href="item.path"
          >{{ item.name }}</a>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0" />
      <a-layout-content style="margin: 0 16px">
        <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item>User</a-breadcrumb-item>
          <a-breadcrumb-item>Bill</a-breadcrumb-item>
        </a-breadcrumb>
        <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
          <router-view />
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        Ant Design ©2018 Created by Ant UED
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<style>
.logo {
  height: 32px;
  margin: 16px;
  font-size: 20px !important;
  line-height: 32px;
  /* background: rgba(255, 255, 255, 0.3); */
  color: #fff;

  .logoimg {
    width: 30px;
    height: 30px;
  }
}
.menus_text {
    margin-left: 10px;
}

</style>

显示效果如图,此时我们发现菜单上的icon没有显示,我们还需要去main.ts中引入

修改main.ts文件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'
import * as antdIcons from '@ant-design/icons-vue'

// 创建对象
const app = createApp(App)
// 将atn-desing Iocn全部添加进来
Object.keys(antdIcons).forEach((key: any) => {
    app.component(key, antdIcons[key as keyof typeof antdIcons])
})
app.config.globalProperties.$antdIcons = antdIcons

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

展示效果如图,图标已经出来了: