Write the Code. Change the World.

分类目录
12月 28

vue cli 配置 dev 的 host 和端口号

# vue.config.js  中

module.exports = {
  devServer: {
      port: 80, // 端口号,如果端口号被占用,会自动加1
      host: "sky.cn", //主机名, 127.0.0.1,  真机 0.0.0.0
      https: false, //协议
      open: true //启动服务时自动打开浏览器访问
  },

可是当: npm run dev 的时候,端口号却是 1024。 话说 mac 下启动 1024 以下的端口需要 root 权限。用 sudo 试试。

sudo npm run dev

当然,仅仅上边是不可以的。我们要修改 host,映射一下。

# mac 下
sudo vim /etc/hosts

# 增加
127.0.0.1 sky.cn

# windows 下
win + r -> drivers -> cd etc -> vim hosts

# 增加
127.0.0.1 sky.cn

这样,service 结果

  App running at:
  - Local:   http://sky.cn:80/
  - Network: http://sky.cn:80/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

优化

这个配置硬写在 vue.config.js 中。这样不好看。我们写在环境配置中。在 .env.development 中,新增配置:

# 配置 service 的域名
VUE_APP_HOST = 'sky.cn'

# 配置 service 的端口号
VUE_APP_PORT = '80'

然后,在 vue.config.js 中这样修改:

const host = process.env.host || process.env.VUE_APP_HOST || '127.0.0.1'
const port = process.env.port || process.env.VUE_APP_PORT || process.env.npm_config_port || 80

module.exports = {
  devServer: {
    host: host, //主机名, 127.0.0.1,  真机 0.0.0.0
    port: port, // 端口号,如果端口号被占用,会自动加1
    https: false, //协议
    open: true, //启动服务时自动打开浏览器访问
    overlay: {
      warnings: false,
      errors: true
    },
    before: ''
  },
  …

环境变量一说可以参考这里:https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F

12月 08

项目中,配置文件的作用是想当美丽的。这样使代码看起来好看,用起来还方便。不至于因为某个条件或场景还跑到逻辑里去修改。vue cli 里边就可以自己定义 .env.production .env.development .env

https://cli.vuejs.org/zh/guide/mode-and-env.html

有下边的概念:

  • 通过 process.env.xxx 来取。
  • 对象命名以 VUE_APP_ 开头。 如 VUE_APP_API
  • .env.production 和 .env.development 会覆盖 .env 中定义的。

如果不生效,配置不生效,可能是定义对象的时候没以 VUE_APP_ 开头

这里列举几个定义:

# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = 'http://117.24.6.252:8002'

# mode
VUE_APP_MODE = 'history'
12月 05

知识点方方面面。有时候不能全部都 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

12月 04

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

继续阅读

12月 03

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

  • 方式一
// 监听,当路由发生变化的时候执行
watch:{
  $route(to,from){
    console.log(to.path);
  }
}
  • 依旧方式一
watch: {
  $route: {
    handler: function(val, oldVal){
      console.log(val);
    },
    // 深度观察监听
    deep: true
  }
},

继续阅读

12月 03

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

操作一波

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

常规的使用。

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

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

继续阅读

12月 02

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

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

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

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

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

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

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

12月 01

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

实现步骤

完整的动画,经历了下边几个阶段:

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

继续阅读

11月 30

如果既想用 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 项目

继续阅读