vue|一分钟教你快速搭建Vue脚手架（Vue-Cli）项目并整合ElementUI webstorm|javascript|vue.js|ci|开发语

哈喽！大家好，我是【Bug 终结者】，【CSDN新星创作者】，阿里云技术博主，51CTO人气博主，INfoQ写作专家

一位上进心十足，拥有极强学习力的【Java领域博主】

【Bug 终结者】博客的领域是【面向后端技术】的学习，未来会持续更新更多的【后端技术】以及【学习心得】。偶尔会分享些前端基础知识，会更新实战项目，面向企业级开发应用！
如果有对【后端技术】、【前端领域】感兴趣的【小可爱】，欢迎关注【Bug 终结者】

?????? 感谢各位大可爱小可爱！ ??????

文章目录

一、安装Node.js
- ?配置Node.js环境
- ?测试Node与npm
二、安装Vue-cli
三、创建Vue-cli项目
四、运行项目
五、整合ElementUI
- 1??安装ElementUI
- 2??引入ElementUI文件
- 3??测试ElemetUI组件
??往期精彩热文回顾
?小结

一、安装Node.js 去官网下载最新版本Node.js
下载Node.js
打开如下界面

vue|一分钟教你快速搭建Vue脚手架（Vue-Cli）项目并整合ElementUI

文章图片

推荐使用二进制文件下载，这样会对计算机减少更小的内存占用
下载完毕后配置环境变量
?配置Node.js环境 win+I --> 关于 --> 高级系统设置 --> 环境变量
配置NODE_HOME

文章图片

配置Path环境变量

文章图片

?测试Node与npm 输入测试命令

//查看安装的node版本号 node -v //查看npm的版本号 npm -v

文章图片

二、安装Vue-cli 【vue|一分钟教你快速搭建Vue脚手架（Vue-Cli）项目并整合ElementUI】安装最新vue-cli版本

//安装最新版本的vue/cli npm install -g @vue/cli//安装指定版本的vue/cli npm install -g @vue/cli@4.1.1

安装完成输入vue -V 测试

文章图片

出现以上输出即安装成功~
三、创建Vue-cli项目创建vue-cli项目

vue create demo

回车，出现以下界面

文章图片

回车即选择默认创建项目方式
过程有些长，耐心等待
最后出现如下界面即创建项目成功

文章图片

四、运行项目输入以下命令运行项目

npm run serve

文章图片

等待一会后出现以下界面

文章图片

至此创建vue脚手架（vue-cli）项目成功
五、整合ElementUI 1??安装ElementUI 输入以下命令安装ElementUI至demo项目

cd demo //进入刚刚创建的项目npm i element-ui -S //安装ElementUI文件

在安装ElementUI的时候报如下错误

文章图片

解决错误
输入以下命令

npm audit fix

文章图片

安装成功
2??引入ElementUI文件在main.js中引入elementui

import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)

如果显示无法引入，则在 packjson.json加入以下内容

"generator-star-spacing": "off", "no-tabs":"off", "no-unused-vars":"off", "no-console":"off", "no-irregular-whitespace":"off", "no-debugger": "off"

文章图片

3??测试ElemetUI组件 TestElementUI.vue

在App.vue加入引入该页面

运行项目

npm run serve

出现如下界面

文章图片

??往期精彩热文回顾 ?? Netty进阶 – 非阻塞网络编程实现群聊+私聊+心跳检测系统

?? Postman测试工具调试接口详细教程【向后端发送Json数据并接收返回的Json结果】

?? Java面向对象 — 吃货联盟订餐系统（完整版）

?小结以上就是【Bug 终结者】对Vue入门 – 搭建Vue脚手架（Vue-Cli）项目并整合ElementUI简单的理解，利用Vue命令行创建前端工程，及其方便，简便开发效率，创建项目这一块多练上几遍就会熟悉的，熟能生巧，相信自己，你永远是最棒的，加油~