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

曾无好事来相访，赖尔高文一起予。这篇文章主要讲述一分钟教你快速搭建Vue脚手架（Vue-Cli）项目并整合ElementUI相关的知识，希望能为你提供帮助。
一、安装Node.js去官网下载最新版本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】
等待一会后出现以下界面
至此创建vue脚手架（vue-cli）项目成功
五、整合ElementUI1??安装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>