从零开始搭建基于vite的vue项目

用vite创建vue项目

这里我们默认已经安装好了vite环境，如有疑问，可以参考官网的安装流程。

打开cmd，将目录指向你的代码仓库，然后输入一下命令。

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue

其中my-vue-app既是项目名称也是文件夹名称。

其实vite的模板是非常多的，不过我这次是针对vue项目的一次创建记录。vite可使用模板可以参考官网的文档。

创建项目之后，不要忘记安装插件，只要在项目根目录下运行yarn或者npm install就可以了。

创建项目结构

这是我创建的项目的最基本结构。

/views中保存的是每一个页面，每一个页面都有属于自己的文件夹，并单独管理自己的独有的/assets /styles文件夹。

这样的优势是更加清晰的管理页面资源，可以快速定位资源位置。而且资源的名称也更加自由，按照资源功能命名就可以了，不需要加一堆前缀造成资源名称过长（访问路径同理，当然如果你配置了全局路径解析那就无所谓了）。

项目的环境配置

项目要根据用户运行不同的脚本，而调用不同的配置项。想要达到这个效果，项目就需要知道用户运行的是哪个环境。

这里我们要使用env进行区分。

创建env文件

在这里我为配置文件专门准备了一个文件夹（/config）进行管理。这里我主要包括一下配置文件：

.env // 默认配置文件，这里会配置默认的配置项
.env.development // 开发环境配置文件
.env.staging // 前后端联调环境配置文件
.env.production // 生产环境配置文件

配置文件可以包含你所需要的所有环境配置信息，比如当前文件根目录名称、前端端口号、后端IP等等。只要是你需要的都可以配置到配置信息中。

例如，我在.env.staging中的配置如下：

# 前后端联调(同后端测试服务配置)
# 后端IP
VITE_SERVER_IP='10.10.10.1'
VITE_SERVER_PORT='8080'
VITE_SERVER_ROOT='/server'

注：虽然我们可以在vite.config.js中对端口号进行配置，但是这个配置对vite preview是无效的。因此，我将端口方的配置放在了脚本中。
"serve": "vite preview --port 8102"这里的--port就是对端口号进行配置的指令。

根据环境动态更改vite配置

接下来，我们需要让配置文件判断现在是什么模式，根据不同的模式区分环境，以调用不同的配置文件。这里我们就需要dotenv这个插件了。

首先我们要安装dotenv这个插件：

npm install dotenv -D

然后在vite.config.js文件中进行如下操作：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import dotenv from 'dotenv'
import fs from 'fs'

// https://vitejs.dev/config/
export default ({ command, mode }) => {
  console.log(command, mode) // command 是脚本指令，mode是调用的模式
  const envDir = `config`
  const envFiles = [`${envDir}/.env`, `${envDir}/.env.${mode}`]

  for (const file of envFiles) {
    const envConfig = dotenv.parse(fs.readFileSync(file))
    process.env = { ...process.env, ...envConfig }
  }
  console.log(process.env.VITE_PORT)
  let server = {
    host: '0.0.0.0'
  }

  if (mode !== 'development') {
    server = {
      ...server,
      proxy: {
        [`${process.env.VITE_BASE_PATH}`]: {
          target: `http://${process.env.VITE_SERVER_IP}:${process.env.VITE_SERVER_PORT}${process.env.VITE_SERVER_ROOT}`,
          changeOrigin: true,
          rewrite: (path) =>
            path.replace(new RegExp(`^\${process.env.VITE_BASE_PATH}`), '')
        }
      }
    }
  }

  return defineConfig({
    plugins: [vue()],
    server
  })
}

实现的基本原理就是通过dotenv读取配置文件内容，然后赋值给process.env，这样在整个项目中都可以调用配置文件的配置了。

这里的command 是脚本指令，mode是调用的模式。

根据这两个关键字，就可以百分百区分开启动的环境了。剩下的就是根据需要，配置你的环境。

统一代码风格

前端很多项目是由个人完成的，所以这一步并不是必要的。但是，当需要多人协同开发的时候，统一代码风格就很重要了。

不同的IDEA有自己的代码格式化规则，每一个工程师在一些代码习惯上也会有差异。这样就造成在提交代码到git的时候，产生了很多不必要的提交或者冲突。比如你用了单引号，他用了双引号。整个页面都会因为一个人将页面的双引号格式化成了单引号，而到处显示代码更新。这样不利于你在上传git的时候做自查，也会给分支合并的小伙伴造成不小的麻烦。

所以，我们要求项目开发人员要采用统一的代码风格。这里使用eslint进行自查，只有符合标准的代码，才允许上传。

那么eslint（官网）要如何配置呢？

基础配置

首先，我们需要安装eslint。

npm install eslint -D

初始化eslint配置。

npx eslint --init

初始化过程和vue很像，根据个人需要进行选择即可。

? How would you like to use ESLint? … 
  To check syntax only  // 仅检查语法
  To check syntax and find problems // 检查语法并发现错误
  To check syntax, find problems, and enforce code style // 检查语法、发现错误并强制代码风格

? What type of modules does your project use? …  // 模块风格
  JavaScript modules (import/export) // es6模块
  CommonJS (require/exports) // commonjs模块
  None of these // 都不是

? Which framework does your project use? …  // 所在项目
  React
  Vue.js
  None of these
  
? Does your project use TypeScript?   No / Yes

? Where does your code run? …  (Press  to select,  to toggle all,  to invert selection) // 运行环境
✔ Browser // 浏览器
✔ Node

? How would you like to define a style for your project? … 
  Use a popular style guide // 使用流行的代码风格
  Answer questions about your style // 根据后面的问答自定义
  Inspect your JavaScript file(s) // 直接使用你的.eslintrc.js文件

// 这里我选择了第一个
? Which style guide do you want to follow? …  // 选择使用的规则
  Airbnb: https://github.com/airbnb/javascript
  Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

? What format do you want your config file to be in? …  // 选择配置文件形式
  JavaScript
  YAML
  JSON

如果你直接采用预置的规则，到这里就会询问你是否安装相关插件。推荐直接安装就可以了。

eslint-plugin-vue@latest eslint-config-airbnb-base@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.22.1
? Would you like to install them now with npm?   No / Yes

现在，你可以看到你的eslint正在为你初始化配置。初始化结束后，项目的根目录会出现一个.eslintrc.js配置文件。打开文件，内容如下：

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:vue/essential",
        "airbnb-base"
    ],
    "parserOptions": {
        "ecmaVersion": 13, // 这里要改为12哦
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
};

此时你会发现，eslint的配置文件本身就在报错。

这个问题主要是ecma版本的问题，将版本调整到12就可以了。

Vue3配置

这里vue3的配置我们要特别说一下，因为vue3很多新的特性，例如defineProps会直接在eslint报错。所以，如果是使用vue3的小伙伴，就需要针对vue3进行一些配置。

首先，我们需要添加对defineProps、defineEmits、defineExpose、withDefaults的支持。

增加一个globals的属性配置，配置如下：

globals: {
  defineProps: 'readonly',
  defineEmits: 'readonly',
  defineExpose: 'readonly',
  withDefaults: 'readonly'
}

其次，我们要对一些例如多标签root的语法配置。

多标签root如下：

<template>
	<div>testdiv>
	<p>test toop>
template>

配置方法只要将扩展extends属性中的plugin:vue/essential改成plugin:vue/vue3-essential就可以了。

最终配置如下：

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  },
  extends: [
    'airbnb-base',
    'plugin:vue/vue3-essential'
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: [
    'vue'
  ],
  rules: {
    'comma-dangle': ['error', 'never'],
    'vue/multi-word-component-names': 'off'
  }
};

总结

到此一个基于vite的最简单的vue项目就搭建完成了。当然你也可以为项目增加mock，增加vuex和router，但并不是所有项目都会用到的，我这里就不说了（不用怀疑，vuex和router有的小项目中还真是用不到）。

当然，这种挺复杂的配置，我肯定会梳理记录一下的。有需要可以翻翻我的博客哈。

好嘞ヽ(￣▽￣)و，感谢阅读，欢迎留言交流。