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

Bug 终结者

已于 2022-03-06 16:17:49 修改

阅读量4.3k

点赞数 32

分类专栏： vue从入门到成神文章标签：开发语言 webstorm javascript vue.js ci

于 2022-03-03 10:37:13 首次发布

本文链接：https://blog.csdn.net/weixin_45526437/article/details/123247055

版权

vue从入门到成神专栏收录该内容

5 篇文章 8 订阅

订阅专栏

📢📢📢📣📣📣

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

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

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

❤️❤️❤️ 感谢各位大可爱小可爱！ ❤️❤️❤️

一、安装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

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>

运行项目