2、快速搭建Vue框架以及项目工程

本篇文章详细讲解在配置完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'

生效