title: Vue爬坑date: 2018-07-16 18:34:56
tags: vue

axois请求

  1. let data = _this.$qs.stringify({
  2.           'user_name': _this.username,
  3.           'password': _this.password
  4.         });
  5.         _this.$http.post(_this.apiUrl("user/index/login"), data, {'Content-Type': 'application/x-www-form-urlencoded'})
  6.           .then((res) => {});

post、put：需要用qs包装data，(url, data, headers:{…})

get、delete: (url, {params:{…}, headers:{…}})

Router实现登陆拦截

先对路由添加meta字段：

  1. {
  2.   path: '/',
  3.   name: 'Document',
  4.   component: Document,
  5.   meta: {
  6.     // 添加该字段，表示进入这个路由是需要登录的
  7.     requireAuth: true,
  8.   }
  9. },

对登录页做判断：

  1. // 全局路由跳转拦截
  2. sessionStorage.setItem("token", "");
  3. router.beforeEach(function (to, from, next) {
  4.   if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限
  5.     let token = Vue.prototype.getCookie("token");
  6.     if (token) {
  7.       if (to.path === '/Login') {
  8.         next({
  9.             path: '/',
  10.           }
  11.         )
  12.       }
  13.       else{
  14.         next();
  15.       }
  16.     }
  17.     else {
  18.       if (to.path === '/Login') {
  19.         next()
  20.       }
  21.       else {
  22.         next({
  23.           path: '/Login',
  24.           query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由
  25.         })
  26.       }
  27.     }
  28.   }
  29.   else {
  30.     next();
  31.   }
  32. });

cookie

  1. //设置cookie
  2. Vue.prototype.setCookie = function (cname, cvalue, exdays) {
  3.   let d = new Date();
  4.   d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  5.   let expires = "expires=" + d.toUTCString();
  6.   // console.info(cname + "=" + cvalue + "; " + expires);
  7.   document.cookie = cname + "=" + cvalue + "; " + expires;
  8.   // console.info(document.cookie);
  9. };
  10. //获取cookie
  11. Vue.prototype.getCookie = function (cname) {
  12.   let name = cname + "=";
  13.   let ca = document.cookie.split(';');
  14.   for (let i = 0; i < ca.length; i++) {
  15.     let c = ca[i];
  16.     while (c.charAt(0) === ' ') c = c.substring(1);
  17.     if (c.indexOf(name) !== -1) return c.substring(name.length, c.length);
  18.   }
  19.   return "";
  20. };
  21. //清除cookie
  22. Vue.prototype.clearCookie = function () {
  23.   this.setCookie("token", "", -1);
  24. };
  25. //验证cookie
  26. Vue.prototype.checkCookie = function (token = "", expire_time = "") {
  27.   let $token = this.getCookie("token");
  28.   if ($token !== "") {
  29.     // console.log("token " + token);
  30.   } else {
  31.     if (token !== "" && token != null && expire_time !== "" && expire_time !== null) {
  32.       this.setCookie("token", token, 10);
  33.       this.setCookie("expire_time", expire_time, 10);
  34.     }
  35.   }
  36. };

向数组添加指定key的元素

push:

  1. _this.list.push({value:temp[i]["count"], name:temp[i]["category"]});

set:(如果预设为空的话会报错未定义)

  1. _this.$set(_this.list[i], 'value', temp[i]["count"]);
  2. _this.$set(_this.list[i], 'name', temp[i]["category"]);

vue-cli build配置

config/index.js

build相对路径： assetsPublicPath: ‘./‘,

  1. build: {
  2.   // Template for index.html
  3.   index: path.resolve(__dirname, '../dist/index.html'),
  5.   // Paths
  6.   assetsRoot: path.resolve(__dirname, '../dist'),
  7.   assetsSubDirectory: 'static',
  8.   assetsPublicPath: './',

build/utils.js

资源文件相对路径：publicPath:”../../“

  1. if (options.extract) {
  2.   return ExtractTextPlugin.extract({
  3.     use: loaders,
  4.     fallback: 'vue-style-loader',
  5.     publicPath:"../../"
  6.   })
  7. } else {
  8.   return ['vue-style-loader'].concat(loaders)
  9. }

隐去#

开启history模式：

src/router/index.js

  1. export default new Router({
  2.   mode: 'history',
  3.   base:'/dist/',
  4.   routes: [...]
  5. })

Appache:

并且在打包上传到服务器的dist中添加.htaccess文件，内容为：

  1. <IfModule mod_rewrite.c>
  2.   RewriteEngine On
  3.   RewriteBase /
  4.   RewriteRule ^dist\index\.html$ - [L]
  5.   RewriteCond %{REQUEST_FILENAME} !-f
  6.   RewriteCond %{REQUEST_FILENAME} !-d
  7.   RewriteRule . /dist/index.html [L]
  8. </IfModule>

Nginx:

  1. location / {
  2.   try_files $uri $uri/ /dist/index.html;
  3. }

assets和static的区别

assets中的文件会被webpack打包进项目，而static中的文件会直接引用。

assets：对于静态资源（css/js/image/video）要放置在assets中被打包后才正确。

css，js必须以import方式引入，image需要以require方式引入

static：对于类库，字体等文件，需要放在static下。

用Jetbrains打开项目只有文件没有文件夹

删除.idea（本机配置文件）

vue-cli build打包后CSS浏览器兼容前缀自动去除的问题

今天构建发现

原本是很正常的一个兼容性写法渐变。结果npm run build项目时

  1. background: -webkit-linear-gradient(left,#ccc,#fff)
  2. background: -moz-linear-gradient(left,#ccc,#fff);
  3. background: -o-linear-gradient(left,#ccc,#fff);
  4. background: linear-gradient(left,#ccc,@stop);

结果npm run build项目时

  1. background: linear-gradient(left,#ccc,@stop);

只剩下这一行，导致谷歌内核的全看不到样式。

原来是因为autoprefixer 使用了 browserslist 作为依赖

大家改一下看下自己package.json中的，即可。

  1. "browserslist": [
  2.   "> 1%",
  3.   "last 2 versions",
  4.   "last 10 Chrome versions",
  5.   "last 5 Firefox versions",
  6.   "Safari >= 6",
  7.   "ie > 8"
  8. ]