Vue+Element UI脚手架搭建

一. node.js安装：

1. Element是由饿了么开发的一款基于前端框架vue.js的UI框架，而vue.js是基于node.js的，所以使用前需要下载node。

2. node下载：：https://nodejs.org/zh-cn/ ；
   不了解vue可参考：https://cn.vuejs.org/v2/guide/index.html ；
   不了解node.js可参考菜鸟教程: https://blog.csdn.net/javahighness/article/details/79702157
   

3. 下载后打开命令行窗口输入node -v,如果现实版本号证明成功。
   

二. vue脚手架安装：

4. node安装完后需要下载vue,在命令行输入:npm install vue ；
5. 使用vue需要安装vue脚手架框架：npm install -g vue-cli（其中-g表示全局安装）
6. 然后新建一个工作空间，命令行进入该目录（win10只需在工作空间空白处按住shift右键在此处打开PowerShell窗口）
7. 进入工作空间后输入：vue init webpack project_name（项目名称）,
   按提示进行初始化(按回车，配置安装默认为yes)
   
   初始化完成后会出现命令提示输入提示命令cd deom ; npm run dev;
   
   完成后会出现访问地址，打开浏览器访问即可
   

三. Element组件安装：

8. Vue脚手架安装成功后,便可以安装Element组件；
   Element官网地址： http://element-cn.eleme.io/#/zh-CN
   Element 脚手架 代码git地址： https://github.com/ElementUI/element-starter.git
   
   点击Clone or download 将代码clone或者download到本地，进入element-starter目录命令行（同上）
9. 进去后输入：npm install -g yarn下载yarn(资源管理系统)，
   然后执行：npm install
   最后执行：npm run dev
   然后根据提示，在浏览器打开 http://127.0.0.1:8010
   
   证明安装成功

四. Element访问流程：

10. 接下来进入element-starter下的src文件夹，新建三个文件夹分别是view(自己的页面)，components(自己的组件），router(路由）

11. 然后在view里面新建Login文件夹（不同页面放在不同的文件夹），在文件夹里面新建index.html
    
    data(){}里面存放数据，Created(){}里面执行方法，methods：{}里面定义方法（默认为空就行，我的代码是之前写的）

12. 在router下新建routers.js；
    在命令行输入：npm install vue-router --save；下载路由
    
    配置路径，path是跟在项目的webpack.config.js中的devserver的host:port路径后面,
    
    export default routes; 导入main.js里面的router

13. 修改main.js文件
    Vue.use(vuerouter)使用vue-router组件;
    const router：定义一个路由常量，mode:history表示在地址栏输入时不需要输入#号（默认他自带的有#号）
    注意：途中三个名字要相同，否则访问不成功
    

14. 然后在改目录命令行输入：npm run dev 跑起来，在浏览器输入localhost:8010可以看见访问成功
    
    根据以上流程你可以修改path路径获取页面信息。

五. 访问服务器接口：

1. 下载axios ,一个基于 promise 的 HTTP 库,使用他来访问接口，
   在element-starter目录命令行输入npm install vue-router --save
   修改webpack.config.js中的target该为访问路径到端口号结束
   
   修改App.vue文件，添加一个路由的标签
   

修改main.js文件导入axios

修改index.html

在改目录命令行输入：npm run dev 跑起来，在浏览器输入localhost:8010可以看见访问成功