NVM+NODE+VUE+combination API+VITE+TS+Router+VUEX+ElementUI+SASS builds a complete front-end project

Environment: MAC

1. Purpose of this article

Quickly build a complete project structure

2. Solving problems

1. Multi-version node management
2. nvm installation
3. brew installation
4. Vite + Vue initialization project
5. Router installation
6. Sass installation
7. ElementUI installation
8. Vuex installation
9. Project configuration integration
10. Simple page construction, jump, parameter passing, and store saving

3. Environment setup

3.1 Install NVM

The full name of NVM is node.js version management. It is a node version management tool. Using NVM, you can easily install and manage multiple Node.js versions. This is very helpful in scenarios where different projects may require different Node.js versions.

Method 1

Take v0.39.1 as an example

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

The latest version installation command can be viewed here

Method 2 Brew

The full name of Brew is Homebrew, which is a software package management tool on Mac systems.
If you don’t have brew, install brew first

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

View installed version

brew -v

Install nvm

brew install nvm

Installation result check

nvm -v

View and install version

nvm ls

As shown in the picture, my default version is v12.22.12.

Install new version

nvm install nvm install v18.14.2

Switch version

nvm use v18.14.2

4. Initialization project

Use vite to create a vite + vue project

npm init vite@latest my-vue-app-name(project name)

Select framework Vue

Select language TS

The initialization is completed as follows

npx: 1 Installed successfully, took 2.055 seconds
? Select a framework: ? Vue
? Select a variant: ? TypeScript

Scaffolding project in /Users/zhanghuan/Desktop/my-vue-app-name...

Done. Now run:

  cd my-vue-app-name
  npm install
  npm rundev

First cd to the project directory

cd my-vue-app-name

then install

npm install

Don’t rush to run and continue to install the dependencies we need.

5. Other dependencies

5.1 Install routing

npm install vue-router

5.2 Installing Sass

npm install -D sass

5.3 Install Vuex

npm install vuex@next --save

5.4 Install ElementUI

Install element-plus dependencies

npm install element-plus --save

Introducing element-plus dependencies, the effect is to load on demand and automatically import, without having to import again and again ourselves.

npm install -D unplugin-vue-components unplugin-auto-import
npm install unplugin-element-plus

6. Configuration items

6.1 Run the project

VSCode-Terminal-Create a new terminal and run the command

npm run dev

Note: If the node version is too low, it will not run. Please be careful to switch the node version.

The effect is as follows:

6.2 Remove default page content and styles

Modify App.vue

<script setup lang="ts">

</script>

<template>
  <div class="vue-app">
  <router-view></router-view>
  </div>

</template>

<style scoped>
.vue-app {<!-- -->
  background-color: white;
  width: 100vw;
  height: 100vh;
}
</style>

Modify style.css

:root {<!-- -->
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

body {<!-- -->
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}

#app {<!-- -->
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

@media (prefers-color-scheme: light) {<!-- -->
  :root {<!-- -->
    color: #213547;
    background-color: #ffffff;
  }
}

Now it’s just a blank slate when I run out.

6.3 Construct your own page

Create the following directory structure

Structure description:

Create a new directory views to store the interface, construct two interfaces, Login and Home, and configure their ts and scss files.

Login.vue

<script lang="ts">
import Login from './login'
export default Login
</script>

<template>
  <div class="login">
  </div>
</template>

<style scoped lang="scss">
@import 'login';
</style>

login.ts

import {<!-- --> defineComponent } from "vue"

export default defineComponent ({<!-- -->
  name: 'LoginPage',
  setup() {<!-- -->

    return {<!-- -->

    }
  }
})

login.scss

.login {<!-- -->

}

Home is similar and will not be repeated.

6.4 Configuring routing

Create a new directory router and add the index.js file to manage routes. The contents are as follows

import {<!-- --> createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'

const router = createRouter({<!-- -->
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {<!-- -->
      path: '/',
      name: 'login',
      component: Login,
      children: [
      ]
    },
    {<!-- -->
      path: '/home',
      name: 'home',
      component: () => import('../views/Home.vue')
    },
  ]
})

export default router

6.5 Set ElementUI configuration

vite.config.js

import {<!-- --> defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {<!-- --> ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'

// https://vitejs.dev/config/
export default defineConfig({<!-- -->
  plugins: [
    vue(),
    AutoImport({<!-- -->
      resolvers: [ElementPlusResolver()],
    }),
    Components({<!-- -->
      resolvers: [ElementPlusResolver()],
    }),
    ElementPlus({<!-- -->
      useSource: true
    })
  ]
})

6.6 Use ElementUI and router to implement an input box and jump parameters

mian.ts add and use

import router from './router'
app.use(router)

Login.vue

<script lang="ts">
import Login from './login'
export default Login
</script>

<template>
  <div class="login">
    <div class="form-container">
      <el-form :inline="true" :model="formInline" class="demo-form-inline form">
      <el-form-item label="Approver">
        <el-input v-model="formInline.user" placeholder="Approver"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSave">Save</el-button>
      </el-form-item>
    </el-form>
    </div>
    <div class="btn-container">
      <el-button type="primary" @click="toHome">Go to homepage</el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import 'login';
</style>

login.ts

import {<!-- --> defineComponent, ref } from "vue"
import {<!-- --> useRouter } from "vue-router"

export default defineComponent ({<!-- -->
  name: 'LoginPage',
  setup() {<!-- -->
    const router = useRouter()
    const formInline = ref({<!-- -->
      user: ''
    })
    const onSave = () => {<!-- -->
      console.log('submit!')
    }
    const toHome = () => {<!-- -->
      const info = {<!-- -->
        user: formInline.value.user,
      }
      router.push({<!-- -->
        name: 'home',
        query: info
      })
    }
    return {<!-- -->
      formInline,
      onSubmit,
      toHome
    }
  }
})

To implement the function, click to jump, jump from Login to Home, and transfer the input content to the Home interface

Home.vue

<script lang="ts">
import Home from './home'
export default Home
</script>

<template>
  <div class="home">
    <h1>This is the homepage</h1>
    <span>query parameters: {<!-- -->{<!-- --> query }}</span>
    <button @click="backToLastPage">Return to previous page</button>
  </div>
</template>

<style scoped lang="scss">
@import "home"
</style>

home.ts

import {<!-- --> useRoute, useRouter } from "vue-router"
import {<!-- --> defineComponent, ref } from "vue"

export default defineComponent ({<!-- -->
  name: 'HomePage',
  setup() {<!-- -->
    const router = useRoute()
    const vueRouter = useRouter()
    const query = ref(router.query)
    const user = ref('')
    const backToLastPage = () => {<!-- -->
      vueRouter.back()
    }
    return {<!-- -->
      query,
      user,
      backToLastPage
    }
  }
})

6.7 Using vuex

Click the storage button of Login to store the effect, and take it out at Home.
Create new folders store and module user.ts

Add module store.ts, referencing the user.ts with namespace we created before. The advantage of adding module is that the logic is divided into business blocks, which facilitates management.

import {<!-- --> createStore } from "vuex";
import user from './store/user'
export default createStore({<!-- -->
  modules: {<!-- -->
    user
  }
})

mian.ts add and use

import store from './store'
app.use(store)

login.ts

import {<!-- --> useStore } from "vuex"
const store = useStore()
const onSave = () => {<!-- -->
  store.dispatch('user/setUserAction',formInline.value.user)
}

home.ts

import {<!-- --> useStore } from "vuex"
const store = useStore()
const user = ref(store.getters['user/currentUser'])

The effect is as follows:

7. Project source code

-Full project download-