vue学习记录

Posted on

前言

近来学了一下vue，用脚手架打了个项目，简单记录一下

官方文档：https://cli.vuejs.org/zh/guide/

安装环境

安装最新版本的vue-cli，我一开始安装的是旧版本的，出现了很多其他的问题，于是我就直接卸了旧版本装新版本了，安装可以用npm也可以用yarn，因为我都是用npm，所以下面也只写npm

卸载旧版本

1
npm uninstall vue-cli -g

安装新版本

1
npm install -g @vue/cli

检查版本

1
vue --version

创建项目

可以通过命令行创建

1
vue create test

也可以通过phpstorm/webstorm创建

1

在mac下有可能会遇到各种Error: EACCES: permission denied权限问题

这里给出了解决办法 https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally

我用的是以下这种方法

2

建议直接在.bash_profile中修改，因为修改.profile的话，后面我用npm安装express的时候，会出现-bash: express: command not found的问题，直接修改.bash_profile可以解决这个问题

这里可以设置npm的全局安装目录的权限。打开终端，输入如下命令:

1
2
sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}
sudo chmod -R 777 /usr/local/lib/node_modules

修改.npm目录的权限

1
sudo chown -R $(whoami) ~/.npm

运行项目

1
2
3
4
5
Successfully created project test.
Get started with the following commands:

$ cd test
$ npm run serve

看到如下即启动成功

3

4

安装vue-router

使用图形化界面安装

1
$ vue ui

5

安装成功后可以在项目文件夹看到多一个router的文件夹

6

目录结构

要修改的主要就是src目录

assets

主要存放静态文件，比如img

components

功能级组件，可被装在views里面

router

Index.js配置路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const routes = [
  {
    path: '/',   //访问路径
    name: 'home',   //路由名称
    component: Home  //路由对应的组件
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

views

页面级组件

组件

创建组件

7

使用组件

要使用组件，就一定要先导入并定义，不然会报错

8

查看结果

9

传递数据

父组件向子组件传递

若只传递一个数据

About.vue，绑定一个动态数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <div class="about">
    <h1>This is an about page</h1>
    <!--    传递数据-->
    <get-data v-bind:name="name"></get-data>
  </div>
</template>

<script>
  import getData from "@/components/getData";
  export default {
    data: function(){
      return{
        // 一个数据
        name: "Glarcy",
        // 多个数据
        userData:{
          name: "Glarcy",
          intro: "弟弟来了"
        }
      }
    },
    components: {
      getData
    }
  }
</script>

getData.vue，子组件通过设置props属性获取值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
    <div>Hello,{{name}}</div>
</template>

<script>
    export default {
        name: "getData",
        props: ['name']
    }
</script>

<style scoped>

</style>

13

若需要传递多个数据，可以这么绑定

1
<get-data v-bind="userData"></get-data>

getData.vue

1
2
3
4
5
6
7
8
9
10
<template>
    <div>{{name}}:{{intro}}</div>
</template>

<script>
    export default {
        name: "getData",
        props: ['name','intro']
    }
</script>

14

子组件向父组件传递

getData.vue，子组件可以使用 $emit 触发父组件的自定义事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
    <div>
        <p>Hello,{{name}}</p>
        <p>intro:{{intro}}</p>
        <button @click="hidden">hidden</button>
    </div>
</template>

<script>
    export default {
        name: "getData",
        props: ['name','intro'],
        methods:{
            hidden: function () {
                let data = {'show':false};
                this.$emit('hide',data);
            },
        }
    }
</script>

About.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template>
  <div class="about">
    <h1>This is an about page</h1>
<!--    传递数据-->
    <get-data @hide="hide" v-if="show" v-bind="userData"></get-data>
  </div>
</template>

<script>
  import getData from "@/components/getData";
  export default {
    data: function(){
      return{
        show: true,
        userData:{
          name: "Glarcy",
          intro: "弟弟来了"
        }
      }
    },
    components: {
      getData
    },
    methods:{
      hide: function (data) {
        this.show = data.show
      }
    }
  }
</script>

数据交互

与后台交互获取数据，我使用的是axios库

官方文档：http://www.axios-js.com/zh-cn/docs/

安装

1
npm install axios

引入axios

在main.js中引用

1
2
import axios from 'axios'
Vue.prototype.$axios = axios;

配置默认值

指定将被用在各个请求的配置默认值，更多参考官方文档

1
2
3
4
//请求地址
axios.defaults.baseURL = 'http://xxx.xxx.xxx.xxx';
//请求数据类型
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

发送请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
methods: {
    get: function () {
       axios
           .get('/get.php?a=123')
           .then(function (res) {
                window.console.log(res)
            })
            .catch(function (err) {
                window.console.log(err)
            })
    },
    post: function () {
       let params = new URLSearchParams();
       params.append('a','123');
       axios
           .post('/post.php',params)
           .then(function (res) {
                window.console.log(res)
           })
           .catch(function (err) {
                window.console.log(err)
           })
    }
},

但是会出现跨域问题

10

跨域问题

之前开发的时候有跨域问题都是找后台，这里通过配置devServer解决

修改默认请求地址

1
axios.defaults.baseURL = '/api';

新建vue.config.js

https://cli.vuejs.org/zh/config/#vue-config-js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
module.exports = {
    /* webpack-dev-server 相关配置 */
    devServer: {
        /* 自动打开浏览器 */
        open: true,
        /* 设置为0.0.0.0则所有的地址均能访问 */
        host: '0.0.0.0',
        /* 本地localhost端口 */
        port: 8080,
        /* 使用代理 */
        proxy: {
            '/api': {
                /* 目标代理服务器地址 */
                target: 'http://xxx.xxx.xxx.xxx',
                pathRewrite: {'^/api' : ''},
                /* 允许跨域 */
                changeOrigin: true,
            },
        },
    },
};

proxy的意思就是当我们请求/api/get.php时，实际上是请求http://xxx.xxx.xxx.xxx/api/get.php，如果不想/api被传递，我们则需要重写路径，将/api置为空，这样就不会有错了

11

12

后记

具体的语法看官方文档，熟悉之后，就可以快乐使用了，有些组件不想自己打的话，vue还有一套现成的组件库element-ui，我觉得不错，非常方便，按需使用。