Vue-Cli

[WangShuXian6]

Vue-Cli

https://cli.vuejs.org/zh/

[WangShuXian6]

配置 vant

https://github.com/youzan/vant https://youzan.github.io/vant/

安装 vant

npm i vant -S

安装 babel-plugin-import

npm i babel-plugin-import -D

使用 babel-plugin-import 修改./babel.config.js 新增如下代码

module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}

使用 vant ./src/views/Home.vue

<template>
<div class="home">
<van-button round type="danger">圆形按钮</van-button>
</div>
</template>

[WangShuXian6]

vue-cli 请求代理

使用 vue-cli-plugin-axios-ts https://www.npmjs.com/package/vue-cli-plugin-axios-ts https://github.com/axios/axios

vue ui 安装 vue-cli-plugin-axios-ts 插件

---

开发环境下跨域 https://cli.vuejs.org/zh/config/#css-loaderoptions https://github.com/chimurai/http-proxy-middleware#proxycontext-config 项目根目录下新建 vue.config.js

module.exports = {
// baseUrl: process.env.NODE_ENV === 'production'
//     ? '/wechat/'
//     : '/',

devServer: { proxy: { '/app': { target: 'http://taoke-admin.yueyuweb.cn/v1/app/', ws: true, changeOrigin: true, pathRewrite: { '^/app': '' } } } } }

>Home..vue
```vue
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

<script lang="ts">
  import {Component, Vue} from "vue-property-decorator";
  import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src

  @Component({
    components: {
      HelloWorld,
    },
  })
  export default class Home extends Vue {
    created() {
      console.log("home");
      console.log(this.$axios)
      this.$axios({
        method: "get",
        url: "/app/notices",
        headers: {
          nosign: 1,
          memberid: "3aecqG4PAW7sTaM8nemT5DEU41ZZn38cGLcbbJvX"
        }
      }).then((res) => {
        console.log("res---", res)
      }).catch((error) => {
        console.log("error---", error)
      })

    }
  }
</script>

---

[WangShuXian6]

Vue 引入 AMD 模块

require('./utils/lib/MaiJs.js')
declare const Mai: any

const mai = new Mai('1', '2')

[WangShuXian6]

vue 去掉 tslint eslint 验证

tsconfig.json 中 注释掉 include 下的 src 目录

tsconfig.json 中 exclude 下增加 "src"

.eslintrc.js 中注释掉 extends下的@vue/prettier```@vue/typescript