vue开发笔记

环境的确认

1. node --version
2. npm --version

全局安装 vue-cli

安装命令： npm install --global vue-cli

基于webpack模版的新项目

创建一个基于 webpack 模版的新项目，命令为： vue init webpack example_2，如果网速较慢，可以设置代理，例如
npm install -g cnpm --registry=https://registry.npm.taobao.org

项目文件目录说明

• build ：一些操作文件，使用命令 npm run * 例如 npm run build 时，就是指定这里的文件
• config ：配置文件，执行文件需要的配置信息
• node_modules ：执行完命令 npm install 之后，会创建该目录，用于存放所有依赖的模块
• src ：资源文件，所有的组件以及所有的图片都是在这里面
  • assets : 资源文件夹，放置图片等资源
  • components : 组件文件夹，写的所有组件都在这个目录下
  • App.vue ：应用组件，所有自己写的组件，都是在这个组件之上运行
  • main.js ： webpack 入口文件，webpack四大特征（entry 入口、 output输出、 loader加载器、 plugins插件），可以在项目文件 build/webpack.base.conf.js 中找到

如何编译

为了让vue项目文件在生产环境下运行，需要对vue项目进行编译，编译的命令是： npm run build
但是在执行该命令之前，需要修改一下文件 config/index.js 将其中 build 下的 assetsPublicPath 的内容 从 '/' 改为 './'，不然最后得到的代码中会出现找不到资源文件的报错信息。

vue-router路由

使用 vue-router 的时候，如何使路由的时候，浏览器中不出现 # 符号，这个时候，需要在配置文件 src/router/index.js 中在创建 Router 实例的时候，设置 mode: 'history'，具体可以参考地址

import的说明

在 import 的方式引入module的时候，有时候会遇到如下的例子 import Hello from '@/components/Hello' 这里的 @ 表示的意思其实就是项目根目录的意思，当然也可以设置成其他的符号来表示，具体可以参考地址，这些符号的快捷解析方式设置在文件 /build/webpack.base.conf.js 文件中

axios实现同步操作

由于 axios 中不能设置同步的配置项，但是为了实现同步请求的效果，例如先执行 axios 请求内容，请求的返回结果修改某一个变量，然后我们根据这个变量来做一些操作。
此时我们可以在调用axios的时候，将其封装在一个函数接口中，并且返回 promise 对象，例如如下：

function axiosGet() {
    return axios.get('/api/your-special-url/', {
        params: {
            id: this.id,
        }   
    })
    .then((response) => {
        console.log(response.data);
        this.valid = response.data.unique;  
        return this.valid;
    })
}

this.axiosGet()
.then((valid) => {
    if(valid) {
        console.log('axios get request over, and return valid to the sync code.')
    }
})

浏览器前端对并发请求的控制

浏览器对并发请求，是有一个控制的，就是说经管并发发出了N个请求，浏览器也会对这些请求做一些处理，可以查看链接
也可以通过如下的代码进行测试

webpack vue中设置开发环境设置跨域

需要在配置文件 /config/index.js 中设置 dev 变量的内容，例如跨域豆瓣的api

proxyTable: {
    '/doubanapi': {
        target: 'https://api.douban.com',
        secure: true,
        changeOrigin: true,
        pathRewrite: {
            '^/doubanapi': '/v2'
        }
    }
}

其中

• target 表示要跨域的网站
• secure 如果是https接口，需要配置这个参数为 true
• changeOrigin 这个参数是用来回避跨域问题，配置完之后发请求时，会自动修改http header里面的host, 但是不会修改别的
• pathRewrite 路径的替换规则，例如 axios.get('/doubanapi/list/xxx') 等效于 访问地址 https://api.douban.com/v2/list/xxx

例如测试请求数据

axios.get('/doubanapi/movie/search', 
  {
    params: {tag: "喜剧"}
  })
  .then((resp) => {
    console.log('douban response: ', resp);
  })
  .catch((err) => {
    console.error(err);
  });

在浏览器终端上显示的是请求的接口 http://localhost:8080/doubanapi/movie/search?tag=%E5%96%9C%E5%89%A7 ，由于经过了webpack的代理，所以后台实际上是请求了接口 https://api.douban.com/v2/movie/search?tag=%E5%96%9C%E5%89%A7