非你网

知识点方方面面。有时候不能全部都 get 到。碰到一个是一个。

这样就这样

• src/assets 文件夹和 src/static 文件夹。

assets 和 static 两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下，这是相同点 
assets中存放的静态资源文件在项目打包时，也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传，所谓打包简单点可以理解为压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器
static中放置的静态资源文件就不会要走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器。因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是static中的资源文件由于没有进行压缩等操作，所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。

• webpackConfig.name 的使用

让 html 的title 动态的变换。就这样用吧。请看清看。

https://blog.csdn.net/weixin_43972992/article/details/102657462

bootstrap 非常好用的地方就是自适应。做自适应网站， bootstrap 是最好不过的工具了。那么，在多大浏览器尺寸下，对 div 进行详细的隐藏和显示操作是其中一个很重要的环节。试试看。

下边这张图，已经很明白的告诉你该怎么做了。

一个网站全部都是安安静静的文字和图片。这样总感觉少了点什么。特别是在 pc 上。那么使用 css 就可以让你的文字和图片动起来。网站也就会有色彩一些了。动动你的小手，多敲敲几行代码吧。

操作一波

• 我们可以使用 transition 实现。

https://www.w3school.com.cn/cssref/pr_transition.asp

.avatar {
    transition:top 0.3s ease;
}

但是，transition 需要逻辑去触发。比如鼠标移上去了。或 js 给与其对应的属性变化了。这样对于默认就想看到动画效果比较麻烦。
继续阅读

对于一个完整的站点，有网站展示页面和后台页面。通常，网站展示页面的头部，底部是公共的，中间部分根据需要进行填充。而后台有顶部，侧边菜单，以及底部实现。这个和网站展示页又有所不同。那么，想进行公共部分的抽离，我们就需要定义自己的模板。也就是 layout。

操作一波

我们先去看看文档： https://router.vuejs.org/zh/installation.html

我们先完成第一阶段的部署： https://blog.vini123.com/525

• 第一步，修改从前的 App.vue 文件。这里仅仅放一个

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

继续阅读

某些时候，在一些全局的场景中。我们可能会对某个特殊路由进行处理。这个时候，路由的变化就很有用了。来变变变。

• 方式一

// 监听,当路由发生变化的时候执行
watch:{
  $route(to,from){
    console.log(to.path);
  }
}

• 依旧方式一

watch: {
  $route: {
    handler: function(val, oldVal){
      console.log(val);
    },
    // 深度观察监听
    deep: true
  }
},

继续阅读

使用本地图片，本来是可以直接使用的。可，如果是动态的话，常规的方式是不行了。比如，根据某个数据，动态的渲染本地的图片直接来就不行。那终究是有方法的。

操作一波

假如我们的图片存放在 src/assets/image/icons/ 下，有很多张，都是以 png 图片。

常规的使用。

<div>
    <img src="@/assets/image/icons/love.png" alt="love" />
</div>

这样就可以了。可如果是下边这样的情形呢。

继续阅读

使用 vue，一般都会使用到 vuex（状态管理）和路由（vue router）还有 axios 的。可见 vuex 是多么重要。

vuex 干啥呢。 说到 vuex ，都会带上状态管理。对，就是状态管理。它用来存储响应组件里的状态。我们经常会用到 v-model, 数据变化了，对应的渲染也跟着变化了。可 v-model 是小的玩意，是在当前组件中使用的。vuex 是全局的，对应着整个完整的项目。

想象一下这样的场景。我人在登录页面。使用登录，登录成功，并返回到上一个路由。在返回到上一个路由中，没做任何的数据请求，但是在上一个路由的对应的 ui 界面上，已经显示出了用户的头像昵称这些信息。这是什么鬼，这就是状态管理所带来的影响。

跨组件，跨路由，及时响应。数据驱动渲染。

还有，vuex 中的数据是暂时的。所谓暂时，是指在当前的浏览器里（刷新浏览器就没了），在当前使用的小程序里（小程序手动处理掉进程再进来就没了）。但暂时是能跨越组件和路由噢。上边就已经说过。可及时是暂时的，也是有方法使其长久。

怎么使其长久呢。我们可以使用 cookie，可以使用 localStorage 来搞定。

好了，到此仅仅是文字上说明 vuex 能干啥。下边就落地吧。
继续阅读

以前用 jquery ，实现有限的内容的无缝滚动蛮方便。vue 也一样方便。来喵喵。

实现步骤

完整的动画，经历了下边几个阶段：

• 对整个列表实现上移动画
• 将列表的第一个数据移动到最后一个，并且复位这个列表（虽然列表位置复位了，可数据在同一时间更新了。使得看不出变化）。

继续阅读

如果既想用 bootstrap 框架，又想用 vue 的语法。那 bootstrap-vue 就是个不错的选择。

官网：https://bootstrap-vue.org/

怎么做呢

• 第一步，用脚手架先建立一个空的 vue 项目。

vue create btvue.cn

# 如果提示 bash: vue: command not found，那就是 vue cli 没有装。装一下。
# https://cli.vuejs.org/zh/guide/installation.html
npm install -g @vue/cli

# 然后再 vue create btvue.cn 
# 就这样创建了一个基础的 vue 项目

继续阅读

cropperjs 很多年中，对处理图片裁切做的体验非常棒。几个项目中，也使用过。那时候还是使用 jquery 这种传统的方式。现在想整一个使用 vue 和 element ui 组合在一起的模板。

cropperjs： https://github.com/fengyuanchen/cropperjs

photo-editor：https://github.com/fengyuanchen/photo-editor

继续阅读