本篇文章详细讲解在配置完vue2环境后如何快速搭建一个Vue框架和项目工程。（以智慧农业云平台为例）
2.1 Vue工程创建
2.1.1创建想要存放的Vue文件夹
找到想要存放的文件夹并在目录搜索框中，并用管理员的方式打开。
2.1.2创建Vue工程
2、安装vue命令
3、通过vue命令来创建vue工程
4、手动选择vue所需要的特征，只需要Babel（编译工具），Router（路由），并选择2.x版本vue
5、在选择完成剩余所需的配置后，vue会帮我们自动生成前端项目文件
2.2Vue项目工程的介绍
public:放静态文件的地方，比如html、静态图标等等。
src:项目的源码目录
src.assets:可以放一些logo、图片、自定义的样式等等
src.router: 定义路由，每个路由对应一个页面
src.views:视图文件
App.vue:所有页面的入口
main.js:所有配置的入口，可以导入项目所需要的包，然后组合在一起
vue.config.js: vue项目里的一些配置，可以配置端口，跨域等等。
2.2.2使用element-ui开发前台页面
Element-UI前端框架：Element - The world's most popular Vue UI framework
安装Element-UI：
npm i element-ui -s在main.js引入element-ui
import Vue from 'vue';
import ElementUI from 'element-ui';#
import 'element-ui/lib/theme-chalk/index.css';#
import App from './App.vue';Vue.use(ElementUI);#主要是标#的这三行代码new Vue({el: '#app',render: h => h(App)
});把官网给我们创建好的vue工程清理干净
App.vue
<template><div id="app"><router-view/></div>
</template>
HomeView.vue
<template><div></div>
</template><script>export default {name: 'HomeView',
}
</script>
在HomeView中写一个button按钮
<button>按钮</button>这里进入项目的顺序为首先进入app.vue看到<router-view>组件，然后进入router下面路由配置文件index.js文件下，因为默认是HomeView.vue，所以进入这个页面，因为之前写入了button按钮，所以会显示在页面上。
element顶部和边角会有默认的留白，如果我们不需要，我们可以选择清除空间自带的默认样式global.css,在src.assets目录下
body{margin: 0;padding: 0;
}
/*把所有的元素变成盒状模型*/
*{/* 外边距不会额外占用1px的像素 */box-sizing: border-box;
}并且在main.js里引入global.css
import '@/assets/global.css'生效
