从零创建 Vue2 + ElementUI 项目_如何新建一个vue2+element项目

从零创建 Vue2 + ElementUI 项目

在本机搭建前端脚手架环境

安装配置脚手架环境

配置环境变量把node的位置配置到path里

1.配置国内镜像

npm config set registry https://registry.npmmirror.com
1

2.安装vuecli

npm install -g @vue/cli
1

升级

npm update -g @vue/cli
1

3.查看当前vue版本

vue -V
1

使用VueCLI创建项目

1.新建项目

- vue create  ele-peoject (自定义的项目文件夹名称)
- 选最后一个 Manually select features
- Babel  Router  Vuex  CSS Pre-processors 
- 2.x
- 后续全回车
- successfully  **表示安装成功**
1
2
3
4
5
6

2.进入项目中,安装所需要的模块:

cb ele-peoject(文件名称)

npm  i  axios  -S               # axios封装发送请求
npm  i  element-ui  -S          # element框架
npm install echarts --save   # echarts图标库
1
2
3
4
5

3.在main.js中, 配置引入ElementUI组件

Vue的组件库ElementUI（适合写后台管理系统）

官方文档 https://element.eleme.cn/#/zh-CNnpm

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
1
2
3
4

在APP.vue，测试按钮组件

<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>
1
2
3
4
5
6
7
8

4.启动脚手架服务器

npm run serve #启动项目
1

• 浏览器访问地址 http://localhost:8080
• VSCode相关插件 Vetur Vue VSCodeSnippets