vite2 + vue3 + vue-router4 + vuex4 + element-plus 实战(一)-项目搭建

关于项目的搭建官方文档是这样写的:

搭建第一个 Vite 项目

兼容性注意
Vite 需要 Node.js 版本 >= 12.0.0。

使用 NPM:

npm init @vitejs/app

使用 Yarn:

yarn create @vitejs/app

然后按照提示操作即可！

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:

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

支持的模板预设包括：

vanilla
vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts
svelte
svelte-ts

创建项目

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

修改vite.config.js配置

见vite.config.js

安装依赖

cd vite-elementPlus-admin
yarn

引入element-plus

yarn add element-plus

简单封装element-plus组件调用

1. src目录下新建plugins文件夹
2. plugins文件夹下新建element.js,导入element-plus组件

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

使用sass

1. 引入sass,sass-loader

yarn add --dev sass sass-loader

2. src目录下新建styles用于存放全局样式
3. styles文件夹下新建index.scss

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

修改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");

运行项目

yarn dev

image.png

我的博客：https://www.charmingcheng.top/article/2.html