一分钟教你快速 搭建Vue脚手架（Vue-Cli）项目并整合ElementUI
Posted 小王Java
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一分钟教你快速 搭建Vue脚手架（Vue-Cli）项目并整合ElementUI相关的知识，希望对你有一定的参考价值。
一、安装Node.js
去官网下载最新版本Node.js
打开如下界面
推荐使用二进制文件下载，这样会对计算机减少更小的内存占用下载完毕后配置环境变量
⌚配置Node.js环境
win+I --> 关于 --> 高级系统设置 --> 环境变量
配置NODE_HOME
配置Path环境变量
⌚测试Node与npm
输入测试命令
//查看安装的node版本号
node -v
//查看npm的版本号
npm -v
二、安装Vue-cli
安装最新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
<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
出现如下界面
⛲小结
以上就是【小王 Java】对Vue入门 -- 搭建Vue脚手架（Vue-Cli）项目并整合ElementUI简单的理解，利用Vue命令行创建前端工程，及其方便，简便开发效率，创建项目这一块多练上几遍就会熟悉的，熟能生巧，相信自己，你永远是最棒的，加油~
如果这篇【文章】有帮助到你，希望可以给【小王 Java】点个赞
以上是关于一分钟教你快速 搭建Vue脚手架（Vue-Cli）项目并整合ElementUI的主要内容，如果未能解决你的问题，请参考以下文章