目录
1、创建项目
选择一个文件夹,用终端打开,输入:
npm init vite@latest
如下图所示,输入项目的文件名(这里是vuePro)--》选择vue--》再次选择vue
2、根据提示打开项目
依次输入以上三行命令,启动项目,画面是这个样子的⬇️
3、安装scss
⚠️注意是 sass 不是 scss ⬇️
(使用vite搭建项目只安装sass即可,不需要安装node-sass,sass-loader)
npm i sass
若是后面用scss时报错了重启一下项目
4、引入element-plus
参考官网:安装 | Element Plus
4.1 安装
npm install element-plus --save
4.2 完整引入
main.js:
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入el-icon(注意 icon 是需要额外引入的)
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
app.use(ElementPlus)
// el-icon
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
4.3 按需引入
安装:
npm install -D unplugin-vue-components unplugin-auto-import
main.js:(按需引入的方式引入 icon 就可以)
// 引入el-icon
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// el-icon
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
按需引入需要在 vite.config.js 做一些配置,参考 5 ⬇️
5、vite.config.js文件
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' // node中的内置模块
// elememt-plus按需引入才需要加上下面三行!!!!!!
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
const pathResolve = (dir) => {
return resolve(__dirname, ".", dir)
}
const alias = {
'@': pathResolve("src") // 别名,注意这个别漏了!!
}
alias['vue-i18n'] = 'vue-i18n/dist/vue-i18n.cjs.js'
// https://vitejs.dev/config/
export default ({ command }) => {
const prodMock = true;
return {
base: './',
resolve: {
alias
},
server: {
port: 3004, // 前端端口
host: '0.0.0.0',
open: true,
// proxy: { // 前端跨域 (需要跨域开启这一段)
// &#