vue3.0+electron+element-plus项目搭从0开始建教程（1）

最新推荐文章于 2025-09-29 07:28:24 发布

原创最新推荐文章于 2025-09-29 07:28:24 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vscode

本教程详细介绍了如何从零开始搭建Vue3.0+Electron项目，包括安装Node.js、Vue CLI，以及自定义配置Vue项目，如选择Vue版本、设置路由模式、配置CSS预处理器和代码风格检查工具。

1、安装node.js
Download | Node.jshttps://nodejs.org/en/download/

安装node时，npm页自动给安装上了

node -v  -- 查看node版本

npm -v  --  -- 查看npm 版本

2、安装vue-cli

 // 切换npm 镜像源路径（看自身需求，网络好，可不切换用默认）
npm config set registry https://registry.npm.taobao.org

// 全局安装yarn（看自身需求用哪个习惯）

npm  install -g yarn

// 检查是否安装成功 
  yarn -v

// 切换淘宝镜像：
yarn config set registry https://registry.npm.taobao.org

// 全局安装：install 可以简写为 i
npm install -g @vue/cli

// 查看vue cli 版本
 vue -V

3、vue项目搭建

// 创建vue 在项目文件夹下打开cmd窗口
vue create 你要创建的项目名称  -- 注意不能含有大写字母，只能纯小写字母

说明

1. default 是使用默认配置
2. Manually select features 是自定义配置
选择

Manually select features

自定义配置

说明

Choose Vue Version 选择vue版本
Babel 转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
TypeScript TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
Progressive Web App (PWA) Support 渐进式Web应用程序
Router vue-router（vue路由）
Vuex vuex（vue的状态管理模式）
CSS Pre-processors CSS 预处理器（如：less、sass）
Linter / Formatter 代码风格检查和格式化（如：ESlint）
Unit Testing 单元测试（unit tests）
E2E Testing e2e（end to end）测试

说明：

如果你创建的是vue3选3.x 否则选2.x 这里是选vue版本

说明

是否使用class风格的组件语法，如果在项目中想要保持使用TypeScript的class风格的话，建议选择y

说明

使用Babel与TypeScript一起用于自动检测的填充？建议Y

说明

Yes 是 history模式

No 是 hash模式

Router利用了浏览器自身的hash模式和history模式的特性来实现前端路由（通过调用浏览器提供的接口）

由于electron用的是hash所以选N

说明

这是配置CSS预编译

Sass/SCSS (with dart-sass) sass官方主推，推荐
Less 推荐
Stylus 不推荐

主要为css解决浏览器兼容、简化CSS代码等问题

配置语法检测工具

说明

ESLint with error prevention only 只进行报错提醒
ESLint + Airbnb config 不严谨模式
ESLint + Standard config 正常模式
ESLint + Prettier 严格模式

TSLint只有在选择TypeScript时才会存在

提供一个插件化的javascript代码检测工具，ESLint + Prettier //使用较多

选择

ESLint + Prettier

说明配置什么时候进行代码规范检测

Lint on save 保存时检测
Lint and fix on commit 修复和提交时检测

选1即可

选择如何存放配置

说明

In dedicated config files 存放在专用配置文件中
In package.json 存放在package.json中

看自身需求

保存当前选择的配置项

说明

是否保存当前选择的配置项？

如果当前配置是经常用到的配置，建议选择y存储一下当前配置项

如果只是临时使用的话就不需要存储了

敲回车等待生成好即可