Build a vue project based on vite from scratch

Create env file

Here, I have prepared a folder (/ config) for configuration files for management. Here I mainly include the following configuration files:

.env // Default configuration file. Default configuration items will be configured here .env.development // Development environment profile .env.staging // Front and rear end joint commissioning environment configuration file .env.production // Production environment profile

The configuration file can contain all the environment configuration information you need, such as the current file root directory name, front-end port number, back-end IP, etc. Anything you need can be configured into the configuration information.

For example, my configuration in. env.staging is as follows:

# Front and rear end joint commissioning (the same as the back-end test service configuration) # Back end IP VITE_SERVER_IP='10.10.10.1' VITE_SERVER_PORT='8080' VITE_SERVER_ROOT='/server'

Note: Although we can configure the port number in vite.config.js, this configuration is invalid for vite preview. Therefore, I put the port side configuration in the script.
"serve": "vite preview --port 8102" here -- port is the instruction to configure the port number.

Dynamically change vite configuration based on Environment

Next, we need to let the configuration file judge what the current mode is, and distinguish the environment according to different modes to call different configuration files. Here we need the dotenv plug-in.

First, we need to install the dotenv plug-in:

npm install dotenv -D

Then do the following in vite.config.js file:

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 is the script instruction, and mode is the calling mode const envDir = `config` const envFiles = [`$/.env`, `$/.env.$`] 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: { [`$`]: { target: `http://$:$$`, changeOrigin: true, rewrite: (path) => path.replace(new RegExp(`^\$`), '') } } } } return defineConfig({ plugins: [vue()], server }) }

The basic principle of the implementation is to read the content of the configuration file through dotenv and assign it to process.env, so that the configuration of the configuration file can be called in the whole project.

The command here is the script instruction, and the mode is the calling mode.

According to these two keywords, you can 100% distinguish the startup environment. The rest is to configure your environment as needed.

Many front-end projects are completed by individuals, so this step is not necessary. However, when collaborative development is needed, unified code style is very important.

Different ideas have their own code formatting rules, and each engineer will have different code habits. This leads to a lot of unnecessary submissions or conflicts when submitting code to GIT. For example, if you use single quotation marks, he uses double quotation marks. The whole page will show code updates everywhere because one person formats the double quotation marks of the page into single quotation marks. This is not conducive to self-examination when uploading git, and it will also cause a lot of trouble to the small partners of branch merger.

Therefore, we require project developers to adopt a unified code style. Here, eslint is used for self inspection. Only the code that meets the standard can be uploaded.

So eslint( Official website )How to configure it?

Basic configuration

First, we need to install eslint.

npm install eslint -D

Initialize the eslint configuration.

npx eslint --init

The initialization process is very similar to vue, which can be selected according to individual needs.

? How would you like to use ESLint? ... To check syntax only // Check syntax only To check syntax and find problems // Check the syntax and find errors To check syntax, find problems, and enforce code style // Check syntax, find errors, and enforce code style ? What type of modules does your project use? ... // Module style JavaScript modules (import/export) // es6 module CommonJS (require/exports) // commonjs module None of these // None of them ? Which framework does your project use? ... // Project React Vue.js None of these ? Does your project use TypeScript? No / Yes ? Where does your code run? ... (Press <space> to select, <a> to toggle all, <i> to invert selection) // Operating environment ✔ Browser // browser ✔ Node ? How would you like to define a style for your project? ... Use a popular style guide // Use popular code styles Answer questions about your style // Customize according to the following Q & A Inspect your JavaScript file(s) // Use your. eslintrc.js file directly // Here I chose the first one ? Which style guide do you want to follow? ... // Select rules to use 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? ... // Select profile form JavaScript YAML JSON

If you directly use the preset rules, you will be asked here whether to install the relevant plug-ins. It is recommended to install directly.

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

Now you can see that your eslint is initializing the configuration for you. After initialization, a. eslintrc.js configuration file will appear in the root directory of the project. Open the file as follows:

module.exports = { "env": { "browser": true, "es2021": true }, "extends": [ "plugin:vue/essential", "airbnb-base" ], "parserOptions": { "ecmaVersion": 13, // This should be changed to 12 "sourceType": "module" }, "plugins": [ "vue" ], "rules": { } };

At this point, you will find that the eslint configuration file itself is reporting an error.

This problem is mainly the ecma version. Just adjust the version to 12.

Vue3 configuration

Here we need to talk about the configuration of vue3 in particular, because many new features of vue3, such as defineProps, will directly report errors in eslint. Therefore, if you are a small partner using vue3, you need to configure vue3.

First, we need to add support for defineProps, defineEmits, defineExpose and withDefaults.

Add a global attribute configuration as follows:

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

Secondly, we need to configure some syntax, such as multi label root.

Multi label root is as follows:

<template> <div>test</div> <p>test too</p> </template>

The configuration method only needs to change the plugin:vue/essential in the extended extensions attribute to plugin: Vue / vue3 essential.

The final configuration is as follows:

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' } };

At this point, the simplest vue project based on vite is completed. Of course, you can also add mock and vuex and router for the project, but not all projects will use them. I won't say it here (no doubt, vuex and router are really not used in some small projects).

Of course, this is a very complex configuration. I will sort it out and record it. If necessary, you can turn to my blog.

OK (￣▽ ￣) و， Thank you for reading and welcome to leave messages.

Add new comment

0 comments