Electron结合React和TypeScript进行开发
结合React+TypeScript进行Electron开发1. electron基本简介
electron是使用JavaScript，HTML和CSS构建 跨平台 的 桌面应用程序 。我们可以使用一套代码打包成Mac、Windows和Linux的应用，electron比你想象的更简单，如果把你可以建一个网站，你就可以建一个桌面应用程序，我们只需要把精力放在应用的核心上即可。
为什么选择electron？Electron 可以让你使用纯JavaScript调用丰富的原生APIs来创造桌面应用。你可以把它看作是专注于桌面应用。 在PC端桌面应用开发中，nwjs和electron都是可选的方案，它们都是基于Chromium和Node的结合体，而electron相对而言是更好的选择方案，它的社区相对比较活跃，bug比较少，文档相对利索简洁。 electron相对来说比nw.js靠谱，有一堆成功的案例：Atom编辑器 Visual Studio Code WordPress等等。 Node.js的所有内置模块都在Electron中可用。 2. 快速上手2.1 安装React(template为ts)yarn create react-app electron-demo-ts --template typescript2.2 快速配置React
工程架构
index.html electron App
App.tsx import React from ＂react＂ export default function App() { return ( App )}
index.tsx import React from ＂react＂;import ReactDOM from ＂react-dom/client＂;import App from ＂./App＂;import reportWebVitals from ＂./reportWebVitals＂; const root = ReactDOM.createRoot( document.getElementById(＂root＂) as HTMLElement);root.render( // // ); // If you want to start measuring performance in your app, pass a function// to log results (for example: reportWebVitals(console.log))// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitalsreportWebVitals();2.3 安装electron
将 electron 包安装到您的应用程序的devDependencies .// npmnpm install --save-dev electron// yarnyarn add --dev electron2.4 配置main.js、preload.js和package.json文件
main.js // 导入app、BrowserWindow模块// app 控制应用程序的事件生命周期。事件调用app.on(＂eventName＂, callback)，方法调用app.functionName(arg)// BrowserWindow 创建和控制浏览器窗口。new BrowserWindow([options]) 事件和方法调用同app// Electron参考文档 https://www.electronjs.org/docsconst {app, BrowserWindow, nativeImage } = require(＂electron＂)const path = require(＂path＂)// const url = require(＂url＂); function createWindow () { // Create the browser window. const mainWindow = new BrowserWindow({ width: 800, // 窗口宽度 height: 600, // 窗口高度 // title: ＂Electron app＂, // 窗口标题,如果由loadURL()加载的HTML文件中含有标签，该属性可忽略 icon: nativeImage.createFromPath(＂public/favicon.ico＂), // ＂string＂ || nativeImage.createFromPath(＂public/favicon.ico＂)从位于 path 的文件创建新的 NativeImage 实例 webPreferences: { // 网页功能设置 webviewTag: true, // 是否使用<webview>标签 在一个独立的 frame 和进程里显示外部 web 内容 webSecurity: false, // 禁用同源策略 preload: path.join(__dirname, ＂preload.js＂), nodeIntegration: true // 是否启用node集成 渲染进程的内容有访问node的能力,建议设置为true, 否则在render页面会提示node找不到的错误 } }) // 加载应用 --打包react应用后，__dirname为当前文件路径 // mainWindow.loadURL(url.format({ // pathname: path.join(__dirname, ＂./build/index.html＂), // protocol: ＂file:＂, // slashes: true // })); // 因为我们是加载的react生成的页面，并不是静态页面 // 所以loadFile换成loadURL。 // 加载应用 --开发阶段 需要运行 yarn start mainWindow.loadURL(＂http://localhost:3000＂); // 解决应用启动白屏问题 mainWindow.on(＂ready-to-show＂, () => { mainWindow.show(); mainWindow.focus(); }); // 当窗口关闭时发出。在你收到这个事件后，你应该删除对窗口的引用，并避免再使用它。 mainWindow.on(＂closed＂, () => { mainWindow = null; }); // 在启动的时候打开DevTools mainWindow.webContents.openDevTools()} app.allowRendererProcessReuse =true; // This method will be called when Electron has finished// initialization and is ready to create browser windows.// Some APIs can only be used after this event occurs.app.whenReady().then(() =>{ console.log(＂qpp---whenready＂); createWindow();}) // Quit when all windows are closed.app.on(＂window-all-closed＂, function () { // On macOS it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q console.log(＂window-all-closed＂); if (process.platform !== ＂darwin＂) app.quit()}) app.on(＂activate＂, function () { // On macOS it＂s common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (BrowserWindow.getAllWindows().length === 0) createWindow()}) // In this file you can include the rest of your app＂s specific main process// code. You can also put them in separate files and require them here.
package.json
这时候我们来修改 package.json 文件。配置启动文件，添加 main 字段，我们这里也就是main.js文件。如果没有添加，Electron 将尝试加载包含在package.json 文件目录中的index.js 文件。配置运行命令，使用 ＂electron＂: ＂electron .＂ 区别于react的启动命令 ＂start＂: ＂react-scripts start＂, 安装concurrently: yarn add concurrently { ... ＂main＂: ＂main.js＂, // 配置启动文件 ＂homepage＂: ＂.＂, // 设置应用打包的根路径 ＂scripts＂: { ＂start＂: ＂react-scripts start＂, // react 启动命令 ＂build＂: ＂react-scripts build＂, ＂test＂: ＂react-scripts test＂, ＂eject＂: ＂react-scripts eject＂, ＂electron＂: ＂electron .＂, // electron 启动命令 ＂dev＂: ＂concurrently ＂npm run start＂ ＂npm run electron＂＂ },}
preload.js window.addEventListener(＂DOMContentLoaded＂, () => { const replaceText = (selector, text) => { const element = document.getElementById(selector) if (element) element.innerText = text } for (const dependency of [＂chrome＂, ＂node＂, ＂electron＂]) { replaceText(`${dependency}-version`, process.versions[dependency]) }})
此时的工程架构
2.5 运行electron项目先 yarn start 然后再开一个终端yarn electron 或者是 npm run dev
其实我们就可以看出Electron就是一个应用套了一个谷歌浏览器壳子，然后里面是前端页面。 2.6 打包项目
使用 electron-packager 依赖： yarn add --dev electron-packager
package.json配置打包命令： ＂package＂: ＂electron-packager . bleak-electron-app --platform=win32 --arch=x64 --overwrite --electron-version=18.1.0 --icon=./public/favicon.ico＂
配置解释： electron-packager <应用目录> <应用名称> <打包平台> <架构x86 还是 x64> <架构> <electron版本> <图标>overwrite 如果输出目录已经存在，替换它
然后运行命令： yarn package
打包时间慢的话可按照下面两种方式优化: 方法1：在执行electron-packager前先运行set ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/方法2：在electron-packager命令行加入参数--download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/(Windows x64)完整版如下：electron-packager . bleak-electron-app --platform=win32 --arch=x64 --overwrite --electron-version=18.0.4 --download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/
然后运行 bleak-electron-app-win32-x64 里面的exe文件就可以了。
3. 自动刷新页面
当你用react开发的时候，网页内容会自动热更新，但是electron窗口的main.js中代码发生变化时不能热加载。
安装插件electron-reloader： yarn add --dev electron-reloadernpm install --save-develectron-reloader
然后在路口引用插件: const reloader = require(＂electron-reloader＂)reloader(module)
就可以实现electron插件热更新。 4. 主进程和渲染进程
Electron运行package.json的main脚本的进程称为 主进程 。在主进程中运行的脚本通过创建web页面来展示用户节面，一个Electron应用总是有且只有一个主进程。
由于Electron使用了Chromium来展示web页面，所以Chromium的多进程架构也被使用到，每个Electron钟大哥web页面运行在它的叫 渲染进程 的进程中。
在普通的浏览器中，web页面无法访问操作系统的原生资源。然而Electron的用户在Node.js的API支持下可以在页面中和操作系统进行一些底层交互。
ctrl + shift + i 打开渲染进程调试(devtools)
默认打开调试： // 在启动的时候打开DevToolsmainWindow.webContents.openDevTools()5.定义原生菜单、顶部菜单5.1 自定义菜单
可以使用Menu菜单来创建原生应用菜单和上下文菜单。 首先判断是什么平台，是mac还是其他： const isMac = process.platform === ＂darwin＂创建菜单模板：
其是由一个个MenuItem组成的，可以在菜单项官网API查看。 const template = [ // { role: ＂appMenu＂ } // 如果是mac系统才有 ...(isMac ? [{ label: app.name, submenu: [ { role: ＂about＂ }, { type: ＂separator＂ }, { role: ＂services＂ }, { type: ＂separator＂ }, { role: ＂hide＂ }, { role: ＂hideOthers＂ }, { role: ＂unhide＂ }, { type: ＂separator＂ }, { role: ＂quit＂ } ] }] : []), // { role: ＂fileMenu＂ } { label: ＂文件＂, submenu: [ isMac ? { role: ＂close＂ } : { role: ＂quit＂, label: ＂退出＂ } ] }, // { role: ＂editMenu＂ } { label: ＂编辑＂, submenu: [ { role: ＂undo＂, label: ＂撤消＂ }, { role: ＂redo＂, label: ＂恢复＂ }, { type: ＂separator＂ }, { role: ＂cut＂, label: ＂剪切＂ }, { role: ＂copy＂, label: ＂复制＂ }, { role: ＂paste＂, label: ＂粘贴＂ }, ...(isMac ? [ { role: ＂pasteAndMatchStyle＂ }, { role: ＂delete＂ }, { role: ＂selectAll＂ }, { type: ＂separator＂ }, { label: ＂Speech＂, submenu: [ { role: ＂startSpeaking＂ }, { role: ＂stopSpeaking＂ } ] } ] : [ { role: ＂delete＂, label: ＂删除＂ }, { type: ＂separator＂ }, { role: ＂selectAll＂, label: ＂全选＂ } ]) ] }, // { role: ＂viewMenu＂ } { label: ＂查看＂, submenu: [ { role: ＂reload＂, label: ＂重新加载＂ }, { role: ＂forceReload＂, label: ＂强制重新加载＂ }, { role: ＂toggleDevTools＂, label: ＂切换开发工具栏＂ }, { type: ＂separator＂ }, { role: ＂resetZoom＂, label: ＂原始开发工具栏窗口大小＂ }, { role: ＂zoomIn＂, label: ＂放大开发工具栏窗口＂}, { role: ＂zoomOut＂, label: ＂缩小开发工具栏窗口＂ }, { type: ＂separator＂ }, { role: ＂togglefullscreen＂, label:＂切换开发工具栏全屏＂ } ] }, // { role: ＂windowMenu＂ } { label: ＂窗口＂, submenu: [ { role: ＂minimize＂, label:＂最小化＂ }, ...(isMac ? [ { type: ＂separator＂ }, { role: ＂front＂ }, { type: ＂separator＂ }, { role: ＂window＂ } ] : [ { role: ＂close＂, label: ＂关闭＂ } ]) ] }, { role: ＂help＂, label: ＂帮助＂, submenu: [ { label: ＂从Electron官网学习更多＂, click: async () => { const { shell } = require(＂electron＂) await shell.openExternal(＂https://electronjs.org＂) } } ] }]根据模板创建menu: const menu = Menu.buildFromTemplate(template)设置菜单: Menu.setApplicationMenu(menu)5.2 给菜单定义点击事件
可以通过 click 属性来设置点击事件5.3 抽离菜单定义
创建一个menu.js： const {app, Menu } = require(＂electron＂) const isMac = process.platform === ＂darwin＂ const template = [ // { role: ＂appMenu＂ } // 如果是mac系统才有 ...(isMac ? [{ label: app.name, submenu: [ { role: ＂about＂ }, { type: ＂separator＂ }, { role: ＂services＂ }, { type: ＂separator＂ }, { role: ＂hide＂ }, { role: ＂hideOthers＂ }, { role: ＂unhide＂ }, { type: ＂separator＂ }, { role: ＂quit＂ } ] }] : []), // { role: ＂fileMenu＂ } { label: ＂文件＂, submenu: [ isMac ? { role: ＂close＂ } : { role: ＂quit＂, label: ＂退出＂ } ] }, // { role: ＂editMenu＂ } { label: ＂编辑＂, submenu: [ { role: ＂undo＂, label: ＂撤消＂ }, { role: ＂redo＂, label: ＂恢复＂ }, { type: ＂separator＂ }, { role: ＂cut＂, label: ＂剪切＂ }, { role: ＂copy＂, label: ＂复制＂ }, { role: ＂paste＂, label: ＂粘贴＂ }, ...(isMac ? [ { role: ＂pasteAndMatchStyle＂ }, { role: ＂delete＂ }, { role: ＂selectAll＂ }, { type: ＂separator＂ }, { label: ＂Speech＂, submenu: [ { role: ＂startSpeaking＂ }, { role: ＂stopSpeaking＂ } ] } ] : [ { role: ＂delete＂, label: ＂删除＂ }, { type: ＂separator＂ }, { role: ＂selectAll＂, label: ＂全选＂ } ]) ] }, // { role: ＂viewMenu＂ } { label: ＂查看＂, submenu: [ { role: ＂reload＂, label: ＂重新加载＂ }, { role: ＂forceReload＂, label: ＂强制重新加载＂ }, { role: ＂toggleDevTools＂, label: ＂切换开发工具栏＂ }, { type: ＂separator＂ }, { role: ＂resetZoom＂, label: ＂原始开发工具栏窗口大小＂ }, { role: ＂zoomIn＂, label: ＂放大开发工具栏窗口＂}, { role: ＂zoomOut＂, label: ＂缩小开发工具栏窗口＂ }, { type: ＂separator＂ }, { role: ＂togglefullscreen＂, label:＂切换开发工具栏全屏＂ } ] }, // { role: ＂windowMenu＂ } { label: ＂窗口＂, submenu: [ { role: ＂minimize＂, label:＂最小化＂ }, ...(isMac ? [ { type: ＂separator＂ }, { role: ＂front＂ }, { type: ＂separator＂ }, { role: ＂window＂ } ] : [ { role: ＂close＂, label: ＂关闭＂ } ]) ] }, { role: ＂help＂, label: ＂帮助＂, submenu: [ { label: ＂从Electron官网学习更多＂, click: async () => { const { shell } = require(＂electron＂) await shell.openExternal(＂https://electronjs.org＂) } } ] }] const menu = Menu.buildFromTemplate(template)Menu.setApplicationMenu(menu)
然后在 main.js 中createWindow 的方法使用require 调用:const createWindow = () => { ...... require(＂./menu＂) ......}5.4 自定义顶部菜单
我们可以自定义顶部菜单,通过以下两个步骤进行： 先通过frame创建无边框窗口。 function createWindow () { const mainWindow = new BrowserWindow({ ...... frame: false }) }然后再通过前端页面布局设置顶部菜单
如果想让顶部菜单支持拖拽，可以加如下css： -webkit-app-region: drag;5.5 在渲染进程中使用主进程方法remote和electron（点击创建新窗口）
我们想要通过 remote 来使用主进程方法和功能。 首先要安装 @electron/remote yarn add @electron/remote在主进程main.js中配置remote： const remote = require(＂@electron/remote/main＂)remote.initialize() const createWindow = () => { let mainWindow = new BrowserWindow({ ...... webPreferences: { // 网页功能设置 ...... nodeIntegration: true, // 是否启用node集成 渲染进程的内容有访问node的能力,建议设置为true, 否则在render页面会提示node找不到的错误 contextIsolation : false, //允许渲染进程使用Nodejs } }) remote.enable(mainWindow.webContents)}在渲染进程中使用remote的BrowserWindow：App.tsx import React from ＂react＂// 使用electron的功能// const electron = window.require(＂electron＂)// 使用remoteconst { BrowserWindow } = window.require(＂@electron/remote＂) export default function App() { const openNewWindow = () => { new BrowserWindow({ width:500, height:500 }) } return ( App <button onClick={openNewWindow}>点我开启新窗口</button> )}
我们想要通过使用electron提供给渲染进程的API： const electron = window.require(＂electron＂)
然后从electron中提取方法。 5.6 点击打开浏览器
使用electron中的shell可以实现此功能： import React from ＂react＂// 使用electron的功能// const electron = window.require(＂electron＂)// 使用remote// const { BrowserWindow } = window.require(＂@electron/remote＂)// 使用shellconst { shell } = window.require(＂electron＂) export default function App() { const openNewWindow = () => { shell.openExternal(＂https://www.baidu.com＂) } return ( App <button onClick={openNewWindow}>点我开启新窗口打开百度</button> )}6. 打开对话框读取文件6.1 读取文件
主进程中的dialog模块可以显示用于打开和保存文件、警报等的本机系统对话框。
因为dialog模块属于主进程，如果我们在渲染进程中需要使用则需要使用remote模块。
App.tsx import React,{ useRef } from ＂react＂// 使用electron的功能// const electron = window.require(＂electron＂) // 使用remote// const remote = window.require(＂@electron/remote＂)// const { BrowserWindow } = window.require(＂@electron/remote＂)const { dialog } = window.require(＂@electron/remote＂) // 使用shellconst { shell } = window.require(＂electron＂) // 使用fsconst fs = window.require(＂fs＂) export default function App() { // ref const textRef = useRef<HTMLTextAreaElement | null>(null) const openNewWindow = () => { shell.openExternal(＂https://www.baidu.com＂) } const openFile = () => { const res = dialog.showOpenDialogSync({ title: ＂读取文件＂, // 对话框窗口的标题 buttonLabel: ＂读取＂, // 按钮的自定义标签, 当为空时, 将使用默认标签。 filters: [ // 用于规定用户可见或可选的特定类型范围 //{ name: ＂Images＂, extensions: [＂jpg＂, ＂png＂, ＂gif＂, ＂jpeg＂, ＂webp＂] }, //{ name: ＂Movies＂, extensions: [＂mkv＂, ＂avi＂, ＂mp4＂] }, { name: ＂Custom File Type＂, extensions: [＂js＂] }, { name: ＂All Files＂, extensions: [＂*＂] }, ] }) const fileContent:string = fs.readFileSync(res[0]).toString(); (textRef.current as HTMLTextAreaElement).value = fileContent } return ( App Test <button onClick={openNewWindow}>点我开启新窗口打开百度</button> <button onClick={openFile}>打开文件</button> <textarea ref={textRef}></textarea> )}6.2 保存文件
保存文件需要使用dialog函数里的 showSaveDialogSync ，与之前的读取文件所用到的showOpenDialogSync 类似:const saveFile = () => { const res = dialog.showSaveDialogSync({ title:＂保存文件＂, buttonLable: ＂保存＂, filters: [ { name: ＂index＂, extensions: [＂js＂]} ] }) fs.writeFileSync(res, textRef.current?.value)}7. 定义快捷键7.1 主线程定义
引入 globalShortcut const {app, BrowserWindow, nativeImage, globalShortcut } = require(＂electron＂)
注册快捷键打印字符串、窗口最大化、窗口最小化、关闭窗口。 const createWindow = () => { ...... // 注册快捷键 globalShortcut.register(＂CommandOrControl+X＂, () => { console.log(＂CommandOrControl + X is pressed＂) }) globalShortcut.register(＂CommandOrControl+M＂, () => { mainWindow.maximize() }) globalShortcut.register(＂CommandOrControl+T＂, () => { mainWindow.unmaximize() }) globalShortcut.register(＂CommandOrControl+H＂, () => { mainWindow.close() }) // 检查快捷键是否注册成功 // console.log(globalShortcut.isRegistered(＂CommandOrControl+X＂))} // 将要退出时的生命周期，注销快捷键app.on(＂will-quit＂, () => { // 注销快捷键 globalShortcut.unregister(＂CommandOrControl+X＂) // 注销所有快捷键 globalShortcut.unregisterAll()})7.2在渲染进程中定义
通过retmote来定义 const { globalShortcut } = window.require(＂@electron/remote＂) globalShortcut.register(＂Ctrl+O＂, () => { console.log(＂ctrl+O is pressed.＂)})8. 主进程和渲染进程通讯
在渲染进程使用ipcRenderer，主进程使用ipcMain，可以实现主进程和渲染进程的通讯：
App.tsx ......import React,{ useState, useRef } from ＂react＂const { shell, ipcRenderer } = window.require(＂electron＂)export default function App() { // state const [windowSize, setWindowSize] = useState(＂max-window＂) ...... // 传参 const maxWindow = () => { ipcRenderer.send(＂max-window＂, windowSize); if(windowSize === ＂max-window＂) { setWindowSize(＂unmax-window＂) } else { setWindowSize(＂max-window＂) } } ...... return ( <button onClick={maxWindow}>与主进程进行通讯，窗口最大化或取消窗口最大化</button> )}
main.js const {app, BrowserWindow, nativeImage, globalShortcut, ipcMain } = require(＂electron＂)const createWindow = () => { let mainWindow = ...... ...... // 定义通讯事件 ipcMain.on(＂max-window＂, (event, arg) => { if(arg === ＂max-window＂) { mainWindow.maximize() } else if (arg === ＂unmax-window＂) { mainWindow.unmaximize() } }) ......}......
原文链接：Electron结合React和TypeScript进行开发 - bleaka - 博客园</pre><hr>
<div class="middle_list"><a href="at_79804.html">2021年Q2全球笔记本出货量6560万台</a>笔记本电脑在疫情期间是很多人在家学习的。居家办公的主要工具。所以在销量上应该也是很多人比较好奇。那么随着8月的到来。很多的消息都是有了一定的数据。不少的人就在看。最新的数据的消息了<a href="at_79805.html">区块链助力农业生鲜质量安全，腾讯计划三年扶持百个地标品牌</a>继淘宝京东拼多多等电商平台推出助农战略之后，腾讯也加入了数字助农的行列。8月5日，腾讯安全发布战略新品腾讯安心平台，通过一物一码区块链等技术，实现商品从生产过程流通过程营销过程的全<a href="at_79806.html">当贝投影仪成2021年黑马斩获成长力第一品牌</a>2021年上半年，智能投影市场取得高速增长。洛图科技（RUNTO）最新数据显示，2021年16月，累计销量达到172。3万台。其中在618大促的带动下，6月智能投影市场销量为38。<a href="at_79807.html">2021年了，互联网公司还搞酒桌文化</a>也就这昨天吧，大家都挺熟悉的阿里巴巴曝出了这么件事儿领导劝酒女下属并且猥亵。配合这个消息一起流通的，是一份事件梳理长文，看文笔应该是受害人亲自写的。差评君还是根据受害人写的长文，稍<a href="at_79808.html">移动空调到底是不是鸡肋？威力台式空调评测</a>大家好，我是梦想是个猪，今天为大家带来的是一款移动空调的使用评测。移动空调的使用场景讲道理，每年夏天，我都打心底感谢威利斯开利，要不是他老人家发明了空调，我可能早就热死了炎炎夏日的<a href="at_79809.html">新技术新模式助力中建五局项目物资验收数智化创新</a>物资成本怎么管？建筑工程领域，物资成本占工程成本的5070，而混凝土钢材等大宗物资成本又占整体物资成本的6080，控制物资尤其是大宗物资的成本是项目降本增效的重要工作。随着施工企业<a href="at_79810.html">DIY从入门到放弃USB3。2Gen22什么鬼</a>USB可以说是电脑中使用最为广泛的接口，而且随着技术的进步，接口的功能和速度也在不断增加，消费者有了更高的需求，自然会追求更高更快更强的USB接口。但是这个接口的命名就有了问题，一<a href="at_79811.html">Redmi10曝光这外观和配置真超值</a>近日，海外爆料人IshanAgarwal带来了一组疑似为Redmi10系列的新机渲染图。从图中可以看到，Redmi10在正面屏幕上采用了和自家旗舰机型类似的居中挖孔屏设计，屏幕的尺<a href="at_79812.html">比亚迪汉EV被迫降价？新推标准续航版豪华型，综合补贴20。98万</a>很多人都说比亚迪汉EV，这次是被迫降价！都是因为特斯拉的MODEL3降价了！国内的造车新势力又不应战，总不能特斯拉亮剑，大家都不怯战吧？所以比亚迪汉EV这次，在续航减少99KM的基<a href="at_79813.html">三星向预购GalaxyZFold3的客户每人赠送一个NotePack手机壳礼包</a>据泄密者Snoopy称，今年我们看不到三星GalaxyNote，但三星为其GalaxyZFold3提供了SPen的支持，为了答谢客户，三星将向所有预购三星GalaxyZFold3的<a href="at_79814.html">双色车身，2。88万元起售，朋克多多即将上市，MINIEV慌不慌</a>此前很长一段时间，诸多品牌都对微型电动车避之不及，生怕因此拉低档次，遭受消费者冷嘲热讽。但五菱宏光剑走偏锋，抓住消费者用车需求变化，以MINIEV横扫市场，销量上连续多月稳坐冠军宝</div>
<div class="middle_page"><a href="/ukj/ls_8167.html"><<<</a><a href="/ukj/ls_8166.html"><<</a><a href="/ukj/ls_8165.html"><</a><span>－</span><a href="/ukj/ls_8163.html">></a><a href="/ukj/ls_8162.html">>></a><a href="/ukj/ls_8161.html">>>></a></div></div>
<div class="middle_right"><a href="https://www.vkhz.com/think.html"><img src="/static/vkhz.png" width="100%"></a><a href="at_153868.html">李柯等高管减持套现，比亚迪虚高市值谁来接盘？</a>引言归根到底，股价和市值依旧是一个水中月镜中花，虚的很。风口过后，技术优势不再品牌劣势凸显，比亚迪八千亿的市值由谁来接盘？小米创始人雷军有个经典理论，即飞猪理论。所谓站在风口上，猪<a href="at_153869.html">长安马自达CX30EV上市，补贴后售价15。98万起</a>世代革新，驭电前行。心怀憧憬，进击新境。纯电科技，专为驾享而生。9月26日，长安马自达基于eSKYACTIVe创驰蓝天电气化技术为中国市场打造的首款纯电SUV车型MAZDACX30<a href="at_153870.html">马赫动力家族再添战将，风神全新AX7马赫版上市</a>9月26日晚，东风风神品牌首款搭载马赫动力并被喻为公路火箭的SUV全新AX7马赫版在天津滨海航母主题公园举办上市发布会，共推出1。5T涡轮增压发动机马赫动力1。5T直喷涡轮增压发动<a href="at_153871.html">长安欧尚X7PLUS上市倒计时，又一国民SUV神车诞生</a>近日，长安欧尚首款PLUS旗舰产品长安欧尚X7PLUS上市时间揭晓，新车将于10月17日正式上市，并推出7重预售豪礼2大金融置换2大现金红包的新车预定政策。新车金融置换政策公布，下<a href="at_153872.html">普洛斯隐山资本荣登首届PERE全球不动产科技投资20强榜眼</a>日前，全球私募不动产投资领域权威媒体PERE（PrivateEquityRealEstate）发布首届PERE全球不动产科技投资20强（PEREProptechTop20）榜单，普<a href="at_153873.html">为企业打造新增长动力，卓越李华将重点布局城市更新市场</a>随着我国城市化日趋成熟，在新增土地开发平稳提升的同时，城市更新市场正在以快速增长势头引发外界的关注，也吸引了大量房地产企业进入。在这其中，卓越集团就是这一市场的重要参与者。卓越李华<a href="at_153874.html">全新第二代GS8量产下线，预售火爆订单突破5000台</a>10月12日，全新第二代GS8在传祺广州工厂量产下线。自10月1日预售开启，全新第二代GS8目前累计订单已经突破5000台，新车未上市就已经是爆款。全新第二代GS8预售价18。88<a href="at_153875.html">ID。4CROZZ碰撞测试优秀，大众电动车不再偷工减料了？</a>引言迪斯再如何焦虑，大众ID。系列依旧得放低姿态奋力一搏！提到神车大众，你的第一反应是什么？我想，不少同仁或许跟笔者有类似感叹，这货太具有双面性了。一方面，大众汽车长期以来在中国市<a href="at_153876.html">在座的谁能打？充电5分钟续航超200公里的纯电动车即将到来</a>引言伴随着AIONVPlus的上市，尤其后续6C速率超充车型的加速推出，广汽埃安在引领行业超快充技术发展的同时，也势必将对整个新能源汽车行业产生进一步引领和巨大推动作用。2021年<a href="at_153877.html">评测自带小爱同学，魔耳智能鼠标来了，价格不到一包烟钱</a>鼠标作为常用的PC配件，它的发展和进步一直以来都备受人们的关注，近日，魔耳智能声学科技有限公司推出了一款全新的产品魔耳智能鼠标M1，可谓再次刷新了人们对于传统的鼠标的认知，它在鼠标<a href="at_153878.html">极狐携两款车型登陆武汉车展，极智能极安全</a>10月21日26日，作为中部地区顶级车展的武汉国际汽车展也在武汉国际博览中心拉开序幕。武汉拥有华中地区独有的影响力和辐射力，武汉国际车展也是具有风向标意义的国家级产业展示平台，每年<div class="middle_right_youlian"></div></div></div>
</body></html>