从零搭建VueJS2.0+ElementUI单页面网站

前言

本人后端开发萌新一枚，最近在学习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