Build a vue project based on vite from scratch

Create vue project with vite

Here we have installed the vite environment by default. If you have any questions, please refer to the on the official website Installation process.

Open cmd, point the directory to your code warehouse, and then enter the command.

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

# npm 7 +, additional double horizontal lines are required:
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

Where my Vue app is both the project name and the folder name.

In fact, vite has a lot of templates, but this time I create a record for vue project. Vite template can be used for reference Official website Document for.

After creating the project, don't forget to install the plug-in. Just run yarn or npm install in the root directory of the project.

Create project structure

This is the most basic structure of the project I created.

/Each page is saved in views. Each page has its own folder and manages its own unique / assets /styles folder.

This advantage is to manage page resources more clearly and locate resources quickly. Moreover, the resource name is more free. It can be named according to the resource function. There is no need to add a bunch of prefixes to cause the resource name to be too long (the same is true for the access path. Of course, it doesn't matter if you configure global path resolution).

Environment configuration of the project

The project should call different configuration items according to different scripts run by users. To achieve this effect, the project needs to know which environment the user is running.

Here we will use env to distinguish.

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

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'

export default ({ command, mode }) => {
  console.log(command, mode) // command is the script instruction, and mode is the calling 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 }
  let server = {
    host: ''

  if (mode !== 'development') {
    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()],

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.

Unified code style

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
  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

? What format do you want your config file to be in? ...  // Select profile form

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": [
    "parserOptions": {
        "ecmaVersion": 13, // This should be changed to 12
        "sourceType": "module"
    "plugins": [
    "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:

	<p>test too</p>

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: [
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module'
  plugins: [
  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.

Tags: Front-end npm Vue Vue.js

Posted on Mon, 08 Nov 2021 05:03:06 -0500 by Millar