一分钟教你快速 搭建Vue脚手架(Vue-Cli)项目并整合ElementUI

一、安装Node.js

去官网下载最新版本Node.js

​下载Node.js​

打开如下界面

一分钟教你快速 搭建Vue脚手架(Vue-Cli)项目并整合ElementUI推荐使用二进制文件下载,这样会对计算机减少更小的内存占用下载完毕后配置环境变量

⌚配置Node.js环境

win+I –> 关于 –> 高级系统设置 –> 环境变量

配置NODE_HOME一分钟教你快速 搭建Vue脚手架(Vue-Cli)项目并整合ElementUI配置Path环境变量一分钟教你快速 搭建Vue脚手架(Vue-Cli)项目并整合ElementUI

⌚测试Node与npm

输入测试命令

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

一分钟教你快速 搭建Vue脚手架(Vue-Cli)项目并整合ElementUI

二、安装Vue-cli

安装最新vue-cli版本

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

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

安装完成输入vue -V 测试

一分钟教你快速 搭建Vue脚手架(Vue-Cli)项目并整合ElementUI出现以上输出即安装成功~

三、创建Vue-cli项目

创建vue-cli项目

vue create demo 

回车,出现以下界面一分钟教你快速 搭建Vue脚手架(Vue-Cli)项目并整合ElementUI

回车即选择默认创建项目方式

过程有些长,耐心等待

最后出现如下界面即创建项目成功

一分钟教你快速 搭建Vue脚手架(Vue-Cli)项目并整合ElementUI

四、运行项目

输入以下命令运行项目

npm run serve

一分钟教你快速 搭建Vue脚手架(Vue-Cli)项目并整合ElementUI

等待一会后出现以下界面

一分钟教你快速 搭建Vue脚手架(Vue-Cli)项目并整合ElementUI至此创建vue脚手架(vue-cli)项目成功

五、整合ElementUI

1️⃣安装ElementUI

输入以下命令安装ElementUI至demo项目

cd demo //进入刚刚创建的项目

npm i element-ui -S //安装ElementUI文件

在安装ElementUI的时候报如下错误一分钟教你快速 搭建Vue脚手架(Vue-Cli)项目并整合ElementUI解决错误

输入以下命令

npm audit fix

一分钟教你快速 搭建Vue脚手架(Vue-Cli)项目并整合ElementUI安装成功

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"

一分钟教你快速 搭建Vue脚手架(Vue-Cli)项目并整合ElementUI

3️⃣测试ElemetUI组件

TestElementUI.vue

<template>
<el-button type="primary">普通按钮</el-button>
</template>

<script>
export default {
name: "TestElementUI"
}
</script>

<style scoped>

</style>

在App.vue加入引入该页面

<template>
<div id="app">
<el-container>
<el-aside>
<Menu/>
</el-aside>
<el-main>
<router-view/>
</el-main>
</el-container>
</div>
</template>

<script>
import Menu from './views/TestElementUI.vue'
export default {
components: { Menu },
name: 'App'
}
</script>

运行项目

npm run serve

出现如下界面一分钟教你快速 搭建Vue脚手架(Vue-Cli)项目并整合ElementUI

小结

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

如果这篇【文章】有帮助到你,希望可以给【小王 Java】点个赞,创作不易,如果有对【后端技术】、【前端领域】感兴趣的小可爱,也欢迎关注️️️ 【小王 Java】️️️,我将会给你带来巨大的【收获与惊喜】!

文章版权声明

 1 原创文章作者:8871,如若转载,请注明出处: https://www.52hwl.com/36437.html

 2 温馨提示:软件侵权请联系469472785#qq.com(三天内删除相关链接)资源失效请留言反馈

 3 下载提示:如遇蓝奏云无法访问,请修改lanzous(把s修改成x)

 免责声明:本站为个人博客,所有软件信息均来自网络 修改版软件,加群广告提示为修改者自留,非本站信息,注意鉴别

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年7月15日 下午5:08
下一篇 2023年7月15日 下午5:08