The official documentation for the construction of the project reads:

Build your first Vite project

Compatibility Note

Vite requires node.js version >= 12.0.0.

Use NPM:

npm init @vitejs/app
Copy the code

Using Yarn:

yarn create @vitejs/app
Copy the code

Then follow the prompts to operate!

You can also directly specify the project name and the template you want to use through additional command-line options. For example, to build a Vite + Vue project, run:

# NPM 6. X NPM init @vitejs/app my-vue-app --template vue # NPM 7+  npm init @vitejs/app my-vue-app -- --template vue # yarn yarn create @vitejs/app my-vue-app --template vueCopy the code

Supported template presets include:

vanilla
vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts
svelte
svelte-ts
Copy the code

Create a project

npm init @vitejs/app vite-elementPlus-admin -- --template vue
Copy the code

Install dependencies

cd vite-elementPlus-admin
yarn
Copy the code

Introduce the element – plus

yarn add element-plus
Copy the code

Simple wrapper element-Plus component calls

  1. Create the plugins folder in the SRC directory
  2. Create element.js in the plugins folder and import the element-plus component
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import localeZH from 'element-plus/lib/locale/lang/zh-cn'

export default (app) => {
  app.use(ElementPlus, { locale: localeZH })
}
Copy the code

Using sass

  1. The introduction of sass, sass – loader
yarn add --dev sass sass-loader
Copy the code
  1. Create a new style in the SRC directory to hold global styles
  2. Create a new index. SCSS in the styles folder
body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  margin: 0;
  padding: 0;
}

label {
  font-weight: 700;
}

html {
  height: 100%;
  box-sizing: border-box;
}

#app {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus {
  outline: none;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

// main-container global css
.app-container {
  padding: 20px;
}
Copy the code

Modify the main js

import { createApp } from "vue";
import App from "./App.vue";
import installElementPlus from "./plugins/element";

import "./styles/index.scss"

const app = createApp(App);

installElementPlus(app);

app.mount("#app");
Copy the code

Run the project

yarn dev
Copy the code