Vite2+Vue3学习笔记（一）：Vue3.0项目搭建及配置过程

---

theme: orange

参考链接：如何在 Vite 中使用 Element UI + Vue 3 - 知乎

前言

本人职场小白，公司让学习Vite和Vue3并搭建项目Demo，借这个机会自己尝试写写博客，主要目的是搭项目，所以原理性的知识没有过多阐述，写博客时也根据步骤复现了，对于新手直接跟着操作就可以把项目搭起来，少走了很多弯路，希望对大家有帮助。

文中参考链接都有附上，参考时可以看看，如果有任何错误或意见也欢迎大家指点。

项目码云Gitea地址

Vite-Demo: 使用vite2.0及vue3.0并集成Element Plus，开发后台管理系统demo。

一、使用Vite脚手架搭建项目Demo

Vite官网：开始 | Vite 官方中文文档

随着 Vue 3 一起推出的还有一个强大的新一代打包工具 Vite, 一个面向现代浏览器，基于原生模块系统 ESModule 实现了按需编译的 Web 开发构建工具，恰恰就解决了上述 Webpack 的痛点。

Vite 主要的优势有三点：

• 快速冷启动服务器
• 即时热模块更换（HMR）
• 真正的按需编译

1.初始化项目

1）安装

npm init @vitejs/app 项目名 --template vue

npm init @vitejs/app test-demo-1 --template vue

• package.json

{
  "name": "test-demo-1",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.16"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.9.3",
    "vite": "^2.6.4"
  }
}

2）运行项目

cd test-demo-1
npm install
npm run dev

3）目录结构

4）配置项目运行IP

修改vite.config.js。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    server: {
        host: '0.0.0.0',
        port: '5000' // 自定义端口号
    }
});

2.引入UI框架Element Plus

Element UI 不负众望已经完成支持了。Element Plus 是饿了么 Element UI 团队推出的适配了 Vue 3 的全新版本，新增了很多实用组件，体验非常好。

官网：安装 | Element Plus

1）安装

npm i element-plus / npm install element-plus

npm i element-plus

• package.json

{
  "name": "test-demo-1",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "element-plus": "^1.2.0-beta.3",
    "vue": "^3.2.16"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.9.3",
    "vite": "^2.6.4"
  }
}

2）全局引入

修改项目入口文件，引入Element Plus库和相关样式文件。

• src/main.js

import { createApp } from 'vue';
import App from './App.vue';

// 引入Element Plus
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

3）页面使用

终端Ctrl C终止运行，再次启动项目。

修改src/components/HelloWorld.vue文件的Button：

count is: {{ count }}

3.全局修改Element Plus主题颜色

1）安装sass和scss

npm i scss
npm i sass

• package.json

{
  "name": "test-demo-1",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "element-plus": "^1.2.0-beta.3",
    "sass": "^1.43.5",
    "scss": "^0.2.4",
    "vue": "^3.2.16"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.9.3",
    "vite": "^2.6.4"
  }
}

2）根据官方文档新建自定义样式文件

官方文档：主题 | Element Plus

• src/styles/element-plus.scss

/* 只需要重写你需要的即可 */
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": green,
    ),
  ),
);

// 如果只是按需导入，则可以忽略以下内容。
// 如果你想导入所有样式:【必需】
@use "element-plus/theme-chalk/src/index.scss" as *;

3）入口文件引入自定义样式文件

注意：一定要在element-plus的index.css后面引入，否则自定义样式文件不会生效。

// 引入Element Plus
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

// 引入自定义样式文件
import './styles/element-plus.scss';

4）页面使用

重新刷新页面，可以看到刚刚引入的el-button已经变成自定义的绿色了。因为el-button本身设置了--el-color-primary样式，所以直接生效。

• style标签中使用

.el-aside {
  color: var(--el-color-primary);
}

• template元素中使用

  ......