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

搭建步骤:

  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": "",
          // },
        }
      }
    }
  }
})

多层结构下代码演示

网络请求部分

状态管理部分

页面部分

最终形成一一对应,哪个组件有问题 只需要去对应的位置查看即可
相关推荐
Asort15 分钟前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
无双_Joney33 分钟前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥35 分钟前
前端必学的 CSS Grid 布局体系
前端·css
ccnocare36 分钟前
选择文件夹路径
前端
艾小码37 分钟前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
闰五月37 分钟前
JavaScript作用域与作用域链详解
前端·面试
泉城老铁41 分钟前
idea 优化卡顿
前端·后端·敏捷开发
前端康师傅41 分钟前
JavaScript 作用域常见问题及解决方案
前端·javascript
司宸43 分钟前
Prompt结构化输出:从入门到精通的系统指南
前端