创建vue项目(在IDEA上)

技术背景

Node.js

Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快,性能非常好。 Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞I/O模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。总结一下,node,js提供了javascript在浏览器以外的一个执行环境,满足一些特定的场景需求。

npm

npm 是 Node.js 的包管理和分发工具。它可以让 javascript 开发者能够更加轻松的共享代码和共用代码片段,并且通过 npm 管理你分享的代码也很方便快捷和简单。通过npm可以更方便的引用和分析基于Node.js开发的类库和插件。

webpack

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。通过webpack可以把基于模块开发的前端工程代码打包成可以在浏览器使用的格式。

vue

vue是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件系统和vue生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。在开发中vue会把使用vue语法修饰的html标签与js对象进行绑定,从而使html值变化时可以同步修改js对象,js对象值变化时可以在页面暂时,使开发从复杂的document操作中解脱出来。

vue-cli

vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-dev-server的支持,相当于启动了一个请求服务器,给你搭建了一个测试环境,只关注开发就OK。

ElementUI

ElementUI 是一套基于 Vue.js 的用户界面组件库,它提供了丰富的 UI 组件,能够帮助开发者快速构建现代化的 Web 应用程序。ElementUI 的设计风格简约大方,易于定制和使用,适用于各种类型的项目。ElementUI 提供了诸如按钮、表单、对话框、菜单、表格、图表等常用的 UI 组件,同时也支持国际化和主题定制。通过 ElementUI,开发者可以快速搭建用户友好的界面,提升开发效率。

创建项目

首先需要下载和安装Node.js

Node.js --- Download

一路往下默认安装,安装好后cmd使用node -vnpm -v检查安装好没

然后用npm安装vue-cli

npm install --global vue-cli

安装好后用vue -V检查安装好没

接下来就可以用IDEA创建vue项目了

进入发现已经生成基础文件夹了

点右上角运行

点击生成的url

​​​​​​​

相关推荐
testleaf22 分钟前
前端面经整理【1】
前端·面试
BillKu24 分钟前
Vue3 + TypeScript + Element Plus 表格行按钮不触发 row-click 事件、不触发勾选行,只执行按钮的 click 事件
vue.js·elementui·typescript
好了来看下一题24 分钟前
使用 React+Vite+Electron 搭建桌面应用
前端·react.js·electron
啃火龙果的兔子24 分钟前
前端八股文-react篇
前端·react.js·前端框架
小前端大牛马31 分钟前
react中hook和高阶组件的选型
前端·javascript·vue.js
刺客-Andy31 分钟前
React第六十二节 Router中 createStaticRouter 的使用详解
前端·javascript·react.js
秋田君2 小时前
深入理解JavaScript设计模式之策略模式
javascript·设计模式·策略模式
萌萌哒草头将军3 小时前
🚀🚀🚀VSCode 发布 1.101 版本,Copilot 更全能!
前端·vue.js·react.js
GIS之路3 小时前
OpenLayers 图层叠加控制
前端·信息可视化
90后的晨仔3 小时前
ArkTS 语言中的number和Number区别是什么?
前端·harmonyos