从零搭建VueJS2.0+ElementUI单页面网站_用vue2运行一个网站-优快云博客

本文介绍如何通过NodeJS安装Vue环境，并结合ElementUI组件库进行前端项目的快速搭建过程。主要内容包括安装NodeJS及npm，使用vue-cli脚手架初始化项目，以及引入并配置ElementUI。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

本人后端开发萌新一枚，最近在学习springboot搭建web项目，前端框架选择基于Vue2.0的饿了么组件ElementUI（ElementUI-github），本文旨在记录如何搭建Vue+ElementUI进行前端开发。

准备

NodeJS（npm）
Webstorm （前端IDE）
Nginx（后期用来转发请求到后台服务器）（后期补充）

正文

一、安装nodejs

1）目前nodejs集合了npm所以去node.js官网下载后安装即可；

2）安装完成后，在cmd下输入“node -v”、“npm -v”查看是否安装正确；

二、搭建vue环境

1）全局安装脚手架vue-cli，npm install -g vue-cli

2）创建项目：cd ./xxx/xxx/workspace，vue init webpack project_name（你的项目名），过程中按回车，全选N（vue-router建议选择Y）

至此vue环境搭建完成。

测试：cd ./xxx/xxx/your_project -> npm install -> npm run dev -> 浏览器输入地址，显示如下证明成功

三、安装ElementUI

1）运行 npm i element-ui -S

2）webstorm打开项目，打开src/main.js，引入如下代码

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

Vue.use(ElementUI);
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { Welcome },
})

接下来就可以愉快的使用elementUI组件啦，使用方法参考https:element.eleme.io