从零搭建基于Vite工具的Vue3+Element Plus项目并配置相关规范

amassfortunes2023-12-19 16:34

搭建步骤：

  1. 创建Vue项目
  2. EditorConfig配置
  3. Prettier配置
  4. ESLint配置
  5. 对项目进行目录结构的划分
  6. Css样式重置
  7. 安装Vue-router
  8. 安装Pinia状态管理
  9. 区分生产环境和开发环境
  10. 安装Axios并创建实例
  11. 对Element Plus引入
  12. Vite中配置proxy 解决跨域
  13. 多层结构下代码演示

创建Vue项目

使用Vite创建， 在终端输入npm init vue@latest

因为默认创建出来的路由和pinia目录结构不是我想要的所以这里我选择手动安装, ESLint和Prettier之前有安装过扩展选择是，没有安装选择否。

npm i 下载依赖 （注意 终端要在项目文件夹下）

npm run dev 启动项目

安装EditorConfig扩展并配置

EditorConfig扩展是用于维护代码风格一致性的工具。定义一组代码风格规则，以确保项目中的所有开发人员都使用相同的代码格式设置。

在文件根目录下创建 .editorconfig文件 粘贴下面配置

js 复制代码 
# http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行尾的任意空白字符
insert_final_newline = false # 始终在文件末尾插入一个新行 代码写的够快可以改成true

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

安装prettier扩展并配置

Prettier扩展是一种代码格式化工具，它可以帮助开发人员自动格式化代码，使其符合统一的代码风格规范。 Prettier本身是一个独立的代码格式化工具，它并不依赖于编辑器或IDE。所以在项目中使用时，需要安装扩展并且在项目的开发依赖中安装Prettier包。

先安装扩展：

在终端输入npm install prettier -D（注意终端要在项目目录下）。 在项目根目录下创建.prettierrc文件粘贴下面配置

js 复制代码 
{	
  "semi": false,
  "useTabs": false, 
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 80,
  "trailingComma": "none"
}
  • useTabs：使用tab缩进还是空格缩进；
  • tabWidth：tab是空格的情况下，是几个空格，选择2个；
  • printWidth：当行字符的长度，推荐80，也有人喜欢100或者120；
  • singleQuote：使用单引号还是双引号，选择true，使用单引号；
  • trailingComma：在多行输入的尾逗号是否添加；
  • semi：语句末尾是否要加分号；

根目录下创建.prettierignore文件粘贴下面内容，表示忽略文件

js 复制代码 
```/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

在VSCode设置中搜索format on save并勾选

同样搜索Default Formatter 选择prettier

安装ESLint扩展并配置

ESLint是一个开源的JavaScript静态代码分析工具，用于检查和识别代码中的错误、潜在问题和编码规范违例。它可以帮助开发人员在开发过程中捕获常见的错误，并提供可配置的规则来约束代码风格和最佳实践。

同样这个也需要安装扩展和下载依赖包， 先安装扩展

在终端输入npm install eslint-plugin-prettier eslint-config-prettier -D（注意终端要在项目目录下）。 在项目根目录下创建.eslintrc.cjs文件粘贴下面配置

js 复制代码 
'plugin:prettier/recommended'

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier/skip-formatting',
    'plugin:prettier/recommended'  // 以.prettierrc文件的规范 解决冲突问题
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    '@typescript-eslint/no-unused-vars': 'off' // 未使用的变量 不提示黄色波浪线
    'vue/multi-word-component-names': 'off'  // 文件名字可以是单个单词
  }
}

创建项目文件目录结构

前置准备

  • 删除项目assets文件里面的默认样式
  • 删除默认的components文件夹
  • 清空App.vue留下基本结构
  • 移除main.js里面对css的导入
  • npm run dev 重启项目
js 复制代码 
<!-- App.vue 基本结构 -->
<script setup>
</script>

<template>
111
</template>

<style scoped>
</style>

创建目录结构

这里我对网络请求--状态管理--页面 的每一个组件模块都分别创建了文件夹再在文件夹下面创建同名的.vue或index.js文件,这也是这篇文章的关键，这样创建的好处就是能使网络请求--状态管理--页面一一对应方便管理以及维护。多层结构思想来源于王红元大神。

Css样式重置

Normalize.css 是一个用于重置CSS样式的工具库，旨在解决不同浏览器之间的样式不一致问题。它的作用是将所有浏览器的默认样式规范化，使得在各种浏览器中都能够呈现一致的样式。

  1. 在终端输入npm install normalize.css（注意终端要在项目目录下）
  2. 在assets/css/reset.css目录下对样式进行重置
css 复制代码 
body, h1, h2, h3, h4, ul, li {
  padding: 0;
  margin: 0;
}

ul, li {
  list-style: none;
}

a {
  text-decoration: none;
  color: #333;
}

img {
  vertical-align: top;
}
  1. 在assets/css/index.css目录下引入 @import 'normalize.css'; @import './reset.css';
  2. 在main.js配置文件里面导入 import './assets/css/index.css'
  3. npm run dev 重启项目文字在浏览器边缘没有内边距就说明重置样式成功。

安装路由

  1. 在终端输入npm install vue-router（注意终端要在项目目录下）
  2. 在router里index.js文件里配置路由 （注意导入的.vue文件里面提前创建基本结构）
js 复制代码 
<template>
  <div class="main">
    <h2>"main"</h2>
  </div>
</template>

<script setup ></script>

<style scoped>
.main {
color: chocolate;
}
</style>
js 复制代码 
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
  history: createWebHashHistory(),
  // 映射关系: path -> component
  routes: [
    {
      path: "/",
      redirect: "/main"
    },
    {
      path: "/main",
      component: () => import("@/views/main/main.vue")
    },
    {
      path: "/login",
      component: () => import("@/views/login/login.vue")
    },
  ]
})

export default router

3.main.js配置文件导入路由并挂载

js 复制代码 
import './assets/css/index.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

4.App.vue 入口文件里面 编写router-view使用路由

5.npm run dev 重跑项目正常显示路由表示成功

安装Pinia状态管理

1.npm install pinia

2.在stores文件夹内的 index.js文件配置

js 复制代码 
import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia

3.在mian.js里面导入

js 复制代码 
import './assets/css/index.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import pinia from './store'
const app = createApp(App)
app.use(router)
app.use(pinia)
app.mount('#app')

区分生产环境和开发环境

首先为什么要区分环境？ 是因为开发环境和生产环境是为了适应不同环境下的需求和配置，确保开发和测试阶段使用开发环境，而正式发布和运行时使用生产环境，以保证系统的稳定性和功能正常运行。

一般来说有3种方法可以区分手动注释、import.meta.env判断、创建.env文件，这里选择创建.env文件方法

.env 文件是一个常见的用于存储环境变量的文件。它通常用于在应用程序中配置敏感信息或自定义的环境变量。在根目录下创建后会根据当前运行的环境，应用程序会自动加载相应的文件。

  • .env.development: 开发环境
  • .env.production：生产环境
  • .env.test: 测试环境

根目录下创建后在里面配置（需要注意以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。）

.env.development文件 复制代码 
# 页面标题
# VITE_APP_TITLE = ""

# 开发环境 用于跨域后缀
# VITE_APP_BASE_API = '/dev-api'


# 开发环境baseURL
VITE_APP_BASE_URL = ""

安装Axios

1.npm install axios

2.在service/index.js中创建实例并导出

js 复制代码 
import axios from 'axios'

// 创建一个axios实例
const http = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_URL, // 根据环境自动获取baseURL 
  timeout: 10000 // 设置超时时间，单位为毫秒
})

// 添加请求拦截器
http.interceptors.request.use(
  function (config) {
    // const token = 获取token
    if (config.headers && token) {
      config.headers.Authorization = 'Bearer ' + token
    }

    return config
  },
  function (error) {
    return Promise.reject(error)
  }
)

// 添加响应拦截器
http.interceptors.response.use(
  function (response) {
    // 对响应数据做一些处理
    return response
  },
  function (error) {
    // 处理响应错误
    return Promise.reject(error)
  }
)

export default http

引入Element Plus

Element Plus三种引入方式：完整导入、手动导入、按需自动导入

这里选择按需自动导入也是官方推荐的

  1. npm install element-plus --save 安装Element Plus
  2. npm install -D unplugin-vue-components unplugin-auto-import 按需自动导入
  3. npm install vite-plugin-style-import consola -D 反馈样式(CSS)自动导入
  4. 然后把下列代码插入到vite.config.js的配置文件中
js 复制代码 
// vite.config.js
import { defineConfig } from 'vite'
// 复制这四个
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import {createStyleImportPlugin,ElementPlusResolve} from 'vite-plugin-style-import'

export default defineConfig({
  // ...
  plugins: [
    // ...
    
    // 从这开始复制
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    createStyleImportPlugin({
      resolves: [ElementPlusResolve()],
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          resolveStyle: (name) => {
            return `element-plus/theme-chalk/${name}.css`
          }
        }
      ]
    })
    // 停
  ],
})
  1. 使用一个Element Plus组件 npm run dev 重启项目 正常显示就OK啦。

Vite中配置proxy 解决跨域问题

引起跨域跟为什么能解决就不在这写了， 如果需要解决跨域问题的话 需要对vite.config.js里的defineConfig函数进行修改，需要里面的一个参数来拿到.env里面环境变量 操作如下

js 复制代码 
import { defineConfig, loadEnv } from 'vite' //多导入一个loadEnv

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import {createStyleImportPlugin,ElementPlusResolve} from 'vite-plugin-style-import'
//其他不变

// 需要改成箭头函数
export default defineConfig(({ mode, command }) => {
//拿到环境变量里的参数
  const env = loadEnv(mode, process.cwd())
  const { VITE_APP_BASE_URL, VITE_APP_BASE_API } = env
  
  //下面这不变
  return {
    plugins: [
      vue(),
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      }),
      createStyleImportPlugin({
        resolves: [ElementPlusResolve()],
        libs: [
          {
            libraryName: 'element-plus',
            esModule: true,
            resolveStyle: (name) => {
              return `element-plus/theme-chalk/${name}.css`
            }
          }
        ]
      })
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    
    //vite 跨域配置
    server: {
      port: 80, // 代理服务器端口 如端口被占用可修改
      host: true,
      open: true,
      proxy: {
        [VITE_APP_BASE_API]: {
          target: VITE_APP_BASE_URL,
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/dev-api/, '')
          // pathRewrite: {
          //   "^/api": "",
          // },
        }
      }
    }
  }
})

多层结构下代码演示

网络请求部分

状态管理部分

页面部分

最终形成一一对应，哪个组件有问题 只需要去对应的位置查看即可
相关推荐
excel6 分钟前
ES6 中函数的双重调用方式：fn() 与 fn\...``
前端
可乐爱宅着18 分钟前
全栈框架next.js入手指南
前端·next.js
你的人类朋友2 小时前
什么是API签名？
前端·后端·安全
会豪4 小时前
Electron-Vite (一）快速构建桌面应用
前端
中微子4 小时前
React 执行阶段与渲染机制详解（基于 React 18+ 官方文档）
前端
唐某人丶4 小时前
教你如何用 JS 实现 Agent 系统（2）—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子4 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_4 小时前
JavaScript 函数参数传递机制：一道经典面试题解析
前端·javascript
小徐_23334 小时前
uni-app vue3 也能使用 Echarts？Wot Starter 是这样做的！
前端·uni-app·echarts
RoyLin4 小时前
TypeScript设计模式：适配器模式
前端·后端·node.js
热门推荐
01GitHub 镜像站点02UV 工具安装与国内镜像源配置指南03UV安装并设置国内源04Claude Code 平替：OpenAI发布 Codex CLI ，GPT-5 国内直接使用0546个Nano-banana 精选提示词，持续更新中06A股预测还能更准？开源大模型Kronos带你跑通预测+回测全流程07conda中设置镜像地址（附所有可换的地址）08保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）09KGG转MP3工具|非KGM文件|解密音频10突破百度网盘的下载限速，两种方法教会你【超详细】