vue开发笔记
环境的确认
node --versionnpm --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个请求，浏览器也会对这些请求做一些处理，可以查看链接
也可以通过如下的代码进行测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
const startTime = Date.now();
const q = new Array(12).fill(0).map(v => {
const p = new Promise((r) => {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
r();
}
};
xhr.open('GET', 'https://hacker-news.firebaseio.com/v0/topstories.json', true);
xhr.send();
});
return p;
});
Promise.all(q).then(rs => {
console.log(Date.now() - startTime);
});
</script>
</body>
</html>
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
