3 posts tagged with "vue"

vue2中v-model​

<div v-model="title"></div>

它实际上是下面写法的语法糖

<div :value="title" @input="title = $event"></div>

vue2中sync​

<div title.sync="title"></div>

它实际上是下面写法的语法糖

<div :value="title" @update:title="title = $event"></div>

可以发现其实v-model和sync都差不多，v-model中value属性和input事件是一对，sync中自定义属性title和update:title是一对。可以说sync是v-model的超集，v-model也可以算是sync表单情况的语法糖。

vue3中v-model​

在vue2中v-model和sync是类似的功能，所以作者做了优化，将两种写法合并到一起，为了降低心智吧。

<div v-model="title"></div>

他实际上是下面写法的语法糖

  <div :modelValue="title" @update:modelValue="title = $event"></div>

可以看到vue3中不再是value属性和input事件，而是 modelValue 属性和update: modelValue 事件

sync写法

<div v-model:title="title"></div>

环境条件​

基于vue-cli创建的项目

需求场景​

vue-cli构建的项目在build之后会生成dist目录，我们需要把dist目录里面的index.html上传至服务器，css，js，img等其他文件上传至oss。

步骤一：修改vue.config.js中的publicPath​

const ossUrlPrefix='test.oss-cn-shanghai.aliyuncs.com';
module.exports = {
  publicPath:process.env.NODE_ENV == "development" ? '/' : ossUrlPrefix,
 }

步骤二：新建.deploy.config.js,修改package.json​

module.exports = {
  distPath: './dist',
  jsonPath: './deploy.version.json',
  maxVersionCountOfMode: 5,
  oss: {
    accessKeyId: '',
    accessKeySecret: '',
    region: 'oss-cn-shanghai',
    bucket: 'test',
    prefix: (mode, version) => {
      return mode + '@' + version
    },
  },
  stag: {
    host: '',
    username: '',
    password: '',
    serverPath: '',
  },
  prod: {
    host: '',
    username: '',
    password: '',
    serverPath: '',
  },
}

{
  "scripts": {
    "deploy:stag": "oss-deploy upload stag",
    "clear:stag": "oss-deploy clear stag",
    "deploy:prod": "oss-deploy upload prod",
    "clear:prod": "oss-deploy clear prod"
  }
}

步骤三：build & deploy​

npm run build:prod
npm run deploy:prod

详细文档​

https://www.npmjs.com/package/@urcloud/oss-deploy

vue cli添加typescript​

vue add typescript

vue cli 移除typescript​

步骤一：移除npm依赖

npm remove @vue/cli-plugin-typescript
npm remove typescript

步骤二： 将所有ts文件改为js