关于项目的搭建官方文档是这样写的:
搭建第一个 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配置
安装依赖
cd vite-elementPlus-admin
yarn
引入element-plus
yarn add element-plus
简单封装element-plus组件调用
- src目录下新建plugins文件夹
- 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
- 引入sass,sass-loader
yarn add --dev sass sass-loader
- src目录下新建styles用于存放全局样式
- 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,https://www.charmingcheng.cn
