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

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

​​下载Node.js​​
打开如下界面

推荐使用二进制文件下载，这样会对计算机减少更小的内存占用下载完毕后配置环境变量

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

配置NODE_HOME配置Path环境变量

输入测试命令

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

安装最新vue-cli版本

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

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

安装完成输入vue -V 测试

出现以上输出即安装成功~

创建vue-cli项目

vue create demo

回车，出现以下界面

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

过程有些长，耐心等待

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

输入以下命令运行项目

npm run serve

等待一会后出现以下界面

至此创建vue脚手架（vue-cli）项目成功

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

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

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

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

输入以下命令

npm audit fix

安装成功

在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"

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命令行创建前端工程，及其方便，简便开发效率，创建项目这一块多练上几遍就会熟悉的，熟能生巧，相信自己，你永远是最棒的，加油~