Vue的使用

环境安装

1、安装node.js，npm是Node.js的包管理工具（package manager），Nodejs的安装程序默认安装。
下载地址：https://nodejs.org/en/
检测代码：node -v、npm -v
2、在cmd中直接使用npm来安装的一些工具的话会比较慢，所以我们使用淘宝的npm镜像安装相关依赖。
输入：npm install -g cnpm –registry=https://registry.npm.taobao.org
3、安装全局 vue-cli 脚手架，用于帮助搭建所需的模板框架。
安装代码：cnpm install -g vue-cli
检测代码：vue
4、创建项目
在 cmd 里输入：vue init webpack vue_test(项目文件夹名) ，依次出现下列选项：

提示目录已存在，是否继续：Y
Project name（工程名）:回车
Project description（工程介绍）：回车
Author：作者名
Vue build（是否安装编译器）:Y
Install vue-router（是否安装Vue路由）：Y
Use ESLint to lint your code（是否使用ESLint检查代码，我们使用idea即可）：N
Set up unit tests（安装测试工具）：N
Setup e2e tests with Nightwatch（测试相关）：N
Should we run `npm install` for you after the project has been created? (recommended)：N

5、输入cd vue_test进入文件夹 ，安装依赖，在 cmd 里输入：npm install。
6、运行：npm run dev，Ctrl+C退出运行

加入iview

iview官网：https://www.iviewui.com/
命令行代码：npm install --save iview
在main.js中加入：

import iView from 'iview'
import 'iview/dist/styles/iview.css' // 使用 CSS
Vue.use(iView)

如果main.js代码报错，是因为没有支持ES6的语法，alt+回车可以转换为ES6的语法。

使用axios

安装axios
npm install axios -S
安装完成后在main.js中加入以下代码

import axios from 'axios'
Vue.prototype.$axios = axios

这样就可以在全局中使用axios做请求了。
我们在表单校验通过的时候使用axios来请求后台。代码如下

 this.$axios({
              url: 'localhost:8081/rest/login',//请求的地址
               method: 'post',//请求的方式
               data: this.formInline//请求的表单数据
           }).then(res => {
               console.info('后台返回的数据', res.data);
           }).catch(err => {
               console.info('报错的信息', err.response.message);
           });

跨域问题

打开config下的index.js，将proxyTable修改为

proxyTable: {
        '/rest': {
            target: 'http://localhost:8081',	//设置你调用的接口域名和端口号 别忘了加http
            changeOrigin: true,
            pathRewrite: {
                '^/rest': ''			//这里默认是空
                }
          }
    }

vue周期函数

vue的生命周期函数，如create或者mounted

export default {
	data () {},
	created: function () {},
	methods: {}
	}

路由跳转

app.vue中须注明<router-view/>
方法一：使用router-link

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

方法二：使用this.router.push()方法
只有一个参数的时候，代表跳转地址，还可以增加一个参数传值

this.$router.push({name: "deepReadingDetail", params: {'id': data.id, 'title': data.title}});

注：path不能和params一起使用，否则params将无效，需要用name来指定页面。

this.$route.push({path: '/book', query: {'id', this.id}})

页面接收参数使用

this.$route.query.id