当前位置：首页 > wzjs >正文

专业做公司宣传网站的网络空间治理

wzjs 2025/9/2 16:37:03

专业做公司宣传网站的,网络空间治理,中国兰州网官网,重庆网站关键词排名优化目录项目环境搭建初始化vite脚手架及项目初始化第一步、检查node版本第二步、初始化项目命令，后台管理系统第三步、启动项目测试第三步、删除和修改项目文件第四步、更改标题第五步、更改ICO图标第六步、配置 vite.config.ts第七步、整合 SCSS (Sass)第八步、整合E…

项目环境搭建
- 初始化vite脚手架及项目初始化
- - 第一步、检查node版本
  - 第二步、初始化项目命令，后台管理系统
  - 第三步、启动项目测试
  - 第三步、删除和修改项目文件
  - 第四步、更改标题
  - 第五步、更改ICO图标
  - 第六步、配置 `vite.config.ts`
  - 第七步、整合 SCSS (Sass)
  - 第八步、整合ElementPlus
  - 第九步、封装SvgIcon组件，使用 h() 渲染函数实现

项目环境搭建

初始化vite脚手架及项目初始化

第一步、检查node版本

vite环境要求node.js版本高于16+，需要注意node版本，查看node版本号：

node -v

第二步、初始化项目命令，后台管理系统

npm init vue@3.7.0

这个指令将会安装并执行create vue，它是vue官方项目的脚手架工具，按下图图选择对应功能：
实战二、搭建Vue3+ElementPlus项目教程

第三步、启动项目测试

# 进入项目根目录
cd vue3-project
# 安装模块
npm install
# 启动开发环境
npm run dev

等待安装并访问 http://127.0.0.1:5173/
实战二、搭建Vue3+ElementPlus项目教程

第三步、删除和修改项目文件

删除src/assets 目录下的所有文件
删除src/components目录下的所有文件
删除 src/stores目录下的所有文件
删除 src/views 目录下的所有文件删除 main.ts 文件的 import './assets/main.css'
实战二、搭建Vue3+ElementPlus项目教程
修改 router/index.ts 文件如下：

将 App.vue 组件只保留三大顶级元素，多余代码都删除。

env.d.ts 文件添加 declare module '*.vue' 解决main.ts文件有红线报错问题：

/// <reference types="vite/client" />
// 声明文件 *.vue 文件，交给 vue 模块处理
declare module '*.vue' {import type { DefineComponent } from 'vue';const component: DefineComponent<{}, {}, any>;export default component;
}

实战二、搭建Vue3+ElementPlus项目教程

第四步、更改标题

找到index.html页面，修改 <title> 标签体内容： <title>Vite App</title>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" href="/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>手撸管理后台</title></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body>
</html>

实战二、搭建Vue3+ElementPlus项目教程

第五步、更改ICO图标

将你项目的favicon.ico文件粘贴到 public 目录下, 替换原有的图标。然后清除浏览器的缓存。注意：如果修改后没有成功则查看路径或者清空浏览器缓存即可显示或者ctrl+f5。
实战二、搭建Vue3+ElementPlus项目教程

实战二、搭建Vue3+ElementPlus项目教程

第六步、配置 `vite.config.ts`

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({// 开发服务器选项，参考：https://cn.vitejs.dev/config/server-options.html#server-hostserver: {open: true, //启动服务时自动打开浏览器访问port: 8888, //端口号， 如果端口号被占用，会自动提升1},plugins: [vue(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

第七步、整合 SCSS (Sass)

SCSS是Sass3引入的新语法，其语法完全兼容CSS3，并且继承了Sass的强大功能，Sass和SCSS其实是同一种东西，都成为Sass,两者之间不同之处有：

文件扩展名不同：Sass是以.sass后最为扩展名，而Scss是以.scss后缀为扩展名。
语法书写方式不同：sass是以严格的缩进语法规则来书写，不带大括号{}和;

安装SCSS
```
npm install sass -D
```
安装完成后查看是否有对应的依赖
开发中，每个项目都会有一个通用样式文件，里面定义了一些初始化的通用样式，供项目使用，在src目录下创建一个styles目录，将app.scss通用样式文件复制到src/styles目录下，再在src/styles目录下创建一个index.scss文件作为SCSS的跟文件，然后将app.scss导入到文件中。【如果没有该文件，私信我，或者去github随便下载一个base.scss即可，没有也行】

在 src/main.ts 中导入 '@/styles/index.scss'

// 导入样式文件
import '@/styles/index.scss'

实战二、搭建Vue3+ElementPlus项目教程

在App.vue 中测试样式是否生效

<template><div><span class="mr20">你好！</span><span>我不好</span></div>
</template>
<style lang="scss">
// 编写 scss 代码
</style>

实战二、搭建Vue3+ElementPlus项目教程

第八步、整合ElementPlus

ElementPlus是饿了么平台推出的一套基于Vue3开发的后台页面组件库，ElementUI是基于Vue2组件库。
Vue-ElementPlus官网

ElementPlus 安装：将 element-plus 模块通过本地安装为生产依赖。
```
 npm install element-plus --save
```

完整引入 ElementPlus 组件和Icon图标
在 src\styles\index.css 导入样式文件 element-plus\dist\index.css
实战二、搭建Vue3+ElementPlus项目教程
全局注册 ElementPlus 图标组件，安装ElementPlus图标库

npm install @element-plus/icons-vue

创建 src\utils\setGlobal 文件：

import {type App} from 'vue';
// element-plus图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
// element-plus图标以 ele- 开头
export function useElIcon(app: App) {// 全局注册所有element-plus图标for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(`ele-${key}`, component);}
}

实战二、搭建Vue3+ElementPlus项目教程

在 src\main.ts 中导入 element-plus 和汉化文件，并让它们生效

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import router from './router';
// 整合ElementPlus
import ElementPlus from 'element-plus';
// @ts-ignore 汉化
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
// 样式文件，elemen-plus样式在index.scss中导入了
import '@/styles/index.scss';
// 图标
import { useElIcon } from '@/utils/setGlobal';
const app = createApp(App);
app.use(createPinia());
app.use(router);
app.use(ElementPlus, { locale: zhCn });
// 全局注册图标`ele-`开头（样式在index.scss中）
useElIcon(app);
app.mount('#app')

测试测试：App.vue 中添加使用按钮，是否整合成功：

第九步、封装SvgIcon组件，使用 h() 渲染函数实现

Vue提供了一个h()渲染函数，用于创建虚拟DOM(vnodes)

h()是Hyperscript的简称，意思是“能生成HTML超文本标记语言的JavaScript”

h()接收三个参数
         参数1【必传】，可以是一个原生元素字符串，也可以是一个vue组件对象。
         参数2【可选】，要传递prop/attributes。
         参数3【可选】，子节点，类型：{String | Array | Object | h()}，如果不传参数2，参数3可作为函数第2个参数传递。

第3个参数使用h() 时，建议使用函数返回。否则控制有警告： Non-function value encountered for default slot. Prefer function slots for better performance.

h() 接收的参数1 如果是字符串组件名，可以使用 resolveDirective 函数来解决动态加载组件实例。

创建图标通用组件： /src/components/svgIcon/index.vue

<script setup lang='ts'>
import { h, resolveComponent } from "vue";
const props = withDefaults(defineProps<{name?: string; // 图标名称color?: string; // 图标颜色size?: number; // 图标大小}>(),{name: "",size: 18,}
);
const render = () => {if (props.name?.startsWith("ele-")) {return h(resolveComponent("el-icon"),{ color: props.color, size: props.size },() => h(resolveComponent(props.name)));} else {return h("i");}
};
</script>
<template><!--模板中直接引用虚拟Dom --><render />
</template>

在 src/utils/setGlobal.ts 将 svgIcon/index.vue 注册为全局组件

import { type App } from 'vue';
// element-plus图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
// 图标组件
import SvgIcon from '@/components/svgIcon/index.vue';
// element-plus图标以 ele- 开头
export function useElIcon(app: App) {// 全局注册所有element-plus图标for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(`ele-${key}`, component);}// 图标组件 +++++app.component('SvgIcon', SvgIcon);
}

测试是否生效，app.vue页面代码如下：

<template><div><el-icon><ele-Search /></el-icon><SvgIcon name="ele-Search"></SvgIcon><el-button type="primary">Primary</el-button></div>
</template>
<style lang="scss">
// 编写 scss 代码
</style>