使用idea搭建Vue项目(路由，elementui，axios，vuex)

一. 初始化项目

1. 打开idea，点击：文件、New、项目，如下图所示
   

2. 选择：Static Web、Vue.js，点击下一个，如下图所示
   

3. 填写项目名称，以及可以更改项目的存储路径，点击完成，慢慢等待即可

4. 项目构建完之后，点击package.json文件，能看到以下红框中的信息，点击箭头所指的按钮即可运行，省去了在终端敲npm run serve运行指令，如下图所示
   

5. 上一步完成之后，以后想运行程序点击下图中的按钮即可，也省去了敲指令的功夫，如下图所示
   

6. 运行完成之后打开页面如下图所示
   

7. 删去一些不用的组件，样式以及图片等

• 打开src源代码文件夹，assets有一张logo.png，删去
  
• 打开components文件夹，把里面HelloWorld.vue组件删去
  
• 此时由于删去了一部分东西导致App.vue文件里少了一部分依赖关系会出错，我们也要修改一下，打开App.vue，删除下图中框出的代码即可
  
• 此时项目不会报错，打开页面就是空白页面，接下来就是安装路由，组件库以及axios，vuex等

二. 安装路由，ElementUI，axios，vuex

1. 路由

• npm install vue-router
  打开终端，输入上述指令即可
  

• 在src文件夹下建立router文件夹，router文件夹里面创建index.js文件
  

• 在index.js里面加入以下内容

import Vue from 'vue'  //引入Vue
import VueRouter from 'vue-router'  //引入vue-router
import Home from '...'  //先随便引入一个组件
Vue.use(VueRouter)  //使用vue-router
const routes = [  //创建路由，这里使用了上面引入的组件
  {
    path: '/',
    name: 'home',
    component: Home
  }
]
const router = new VueRouter({
  routes, 
  mode: 'history' //使URL不带#
})
export default router  //导出路由

• 在main.js里面引入路由
  

以上完成了对路由的下载及配置
2. ElementUI

• 打开终端，输入npm i element-ui -S
• 在main.js中引入ElementUI
  

以上完成了对ElementUI的下载及配置
3. axios

• 打开终端输入npm install axios

• 在main.js里面引入axios import axios from ‘axios’

• axios不能使用Vue.use(axios)方法，所以需要给Vue的原型添加一个方法，即Vue.prototype.$axios=axios，其中$axios任意起名，如下图所示
  

• 接下来就可以在任意组件中使用了，比如：

created:function(){
 this.$axios.get("http://192.168.2.52:5000/query_get",{"name":1})
 	.then(res=>{
  		console.log(res.data);
 	})
 	.catch(err=>{
 		console.log(err)
	})
}

以上完成了对axios的下载及配置
4. vuex

• 在终端输入npm install vuex --save
• 在src 下创建文件夹store，在store文件夹里创建store.js
  
• 在store.js里写入

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store=new Vuex.Store({
    state:{

    },
    mutations:{

    },
    getters:{

    }
})
export default store

• 在main.js里注入vuex
  

以上完成了对axios的下载及配置