2021-06-02 vue 基础

提示：
vue cli：https://cli.vuejs.org/zh/guide/
vue cli https://cli.vuejs.org/zh/config/#devserver-proxy
webpack: https://webpack.docschina.org/configuration/dev-server/#root

---

前言

提示：vue3 基础

---

https://24kcs.github.io/

一、vue

示例：

二、使用步骤

1.引入库

代码如下（示例）：
量能使我们快速便捷地处理数据的函数和方法。

2.脚手架

npm install -g @vue/cli
vue create hello-world
cd hello-world
npm run server

3 组件

vue组件 = vue实例 = new Vue(options);
不同组件只是options不同。
三大核心概念：属性（自定义props、原生、特殊）、事件（普通、修饰符事件@）、插槽（普通、作用域）。
demo: 触发事件是通过this.$emit，返回值是什么
普通：v-slot:xxx v-slotxxx=“props”

三、antd-vue

vue create ant-design-vue-pro


ESLint + Prettier
保存和提交都lint

() Lint on save
() Lint and fix on commit
jest 测试运行器
In dedicated config files 配置文件单独存放
In dedicated config files Save this as a preset for future projects? (y/N) y 把当前配置保存起来，新建项目可以用

3.1 install component

安装
npm i ant-design-vue moment

To install it, you can run: npm install --save core-js/modules/es.object.to-string报错
遇到以上的提示问题，说明是版本问题，安装core-js的最新版本试试
npm install core-js@3.6.4
or
yarn add core-js@3.6.4

按照提示：npm install --save core-js 安装
或者 安装 npm install core-js@3 -save-dev
npm start serve

3.1.1 路由标签

<router-link to="/">Home</router-link> |      <router-link to="/about">About</router-link>

3.1.2 style import

css file address: import “ant-design-vue/dist/antd.css”
//用less可以自定义主题
import “ant-design-vue/dist/antd.less”

实用less的 pit:

注意报错信息：issues(问题）
https://github.com/ant-design/ant-motion/issues/44
1）vue报错信息居然把gitug中的问题文章地址提供给大家，这也是服了，一个大神给了这样一个方案，点赞最多。可以不降低less版本

{
  loader: "less-loader",
  options: {
    javascriptEnabled: true
  }
}

2）怎么才能开启javaScript，配置less-loader呢？
实际是webpack的配置，我们要自定义webpack，又因为我们项目是cli帮我们生成的，所以要遵循cli的webpack规则。请进入cli官网https://cli.vuejs.org/zh/ 或 进入配置参考标签，读一读https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
3）创建 vue.config.js,内容如下：
module.exports = {
// 选项…
}
在左侧菜单中找到cssloader相关的内容：

发现了：

module.exports = {
  css: {
    loaderOptions: {
      css: {
        // 这里的选项会传递给 css-loader
      },
      postcss: {
        // 这里的选项会传递给 postcss-loader
      }
    }
  }
}

修改css为less并把issues找到的开启javaScript相关的json贴进去

module.exports = {
    css: {
      loaderOptions: {
        less: {
            javascriptEnabled: true
        }
      }
    }
  }

 error  in ./node_modules/ant-design-vue/dist/antd.less

Syntax Error:

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      in D:\bdh\vue\antd-pro\demo\ant-design-vue-pro\node_modules\ant-design-vue\lib\style\color\bezierEasing.less (line 110, column 0)

《踩坑》Cannot read property ‘tapPromise‘ of undefined
npm uninstall compression-webpack-plugin
npm i compression-webpack-plugin@5.0.1

3.1.3 render函数替换路由组件的引入

import RenderRouterView from "../components/RenderRouterView.vue" VueRouter： path:"/user", component: RenderRouterView,

3.2 常用后台路由架构组成

3.2.1 首页dashboard路由配置

BasicLayout -> 除了路由组件外，还要引入如下组件：

1. Header
2. Footer
3. SiderMenu

3.2.2 form表单路由配置

import NotFound from "../views/404.vue"
const routes = [
  {
    path: "/user",
    component: () =>
      import(/* webpackChunkName: "layout" */ "../layouts/UserLayout.vue"),
    children: [
      {
        path: "/login",
        redirect: "/user/login",
      },
      {
        path: "/user/login",
        name: "login",
        component: () =>
          import(/* webpackChunkName: "login" */ "../views/User/Login.vue"),
      },
      {
        path: "/user/register",
        name: "register",
        component: () =>
          import(/* webpackChunkName: "home" */ "/src/views/User/Register.vue"),
      },
    ],
  },
   {
    path: "*",
    name:"404",
    component: NotFound
  }

3.2.3 路由加载动画

通过路由守卫（钩子）调用动画函数
progress(进展)
npm i nprogress

import Nprogress from "nprogress";

import "nprogress/nprogress.css";
router.beforeEach((to, from, next) => {
  Nprogress.start();
  next();
});
router.afterEach(() => {
  Nprogress.done();
});

四、布局

页面布局在antd-vue-pro官网选择

4.1 Vue中的watch与computed

转载：https://www.cnblogs.com/gunelark/p/8492468.html

4.2 插槽的使用slot

参考：https://www.cnblogs.com/l-y-c/p/13413359.html

五、菜单

5.1 单文件递归菜单

创建子菜单类，引入并实用菜单组件
样式值在组件间的传递props
computed 属性对外部数据变化的监控

5.2 路由转菜单

数据约定：有name属性需转菜单，增加隐藏菜单属性hideInMenu 、hideChildrenMenu。
注意：被隐藏的子路由执行后，仍然需要联动主路由菜单样式为选中，需要后续处理。ps：怎么处理呢？
传主路由相关参数，调用方法触发。

  getMenuData(routes) {
      // const menuData = [];
      const menuData = [];
      routes.forEach((item) => {
        //1.先处理外层：有name标签外层不是隐藏的
        if (item.name && !item.hideInMenu) {
          const newItem = { ...item };
          delete newItem.children;
          //1.1 在递归处理子节点（截断子节点，给过滤好的新节点）
          if (item.children && !item.hideChildrenMenu) {
            newItem.children = this.getMenuData(item.children);
          }
          menuData.push(newItem);
        } else if (
          //2.递归数据进来就是子节点，直接走递归
          !item.hideInMenu &&
          !item.hideChildrenMenu &&
          item.children
        ) {
          menuData.push(...this.getMenuData(item.children));
        }
      });
      return menuData;
    },

5.3 权限控制

组件控制和权限指令
函数式组件没有this，去掉template模版。
指令式组件弊端：只在初始化时加载。

六、图表

echarts/antV/icharts
debounce 防抖
抽象图表，希望option是父组件传入的。
深度监听（但是比较耗费资源）

七、mock

1.axios请求数据
解决：CR告警
Delete ␍eslint(prettier/prettier)
遇到一个问题记录一下，eslint(prettier/prettier) 一直提示Delete ␍，后面加上结尾符号还是不行，

在网上搜索了很多类似问题，解决方法简单粗暴，即使禁用掉这个结尾提示

在.eslintrc.js文件中添加

“endOfLine”:“auto”
不建议这么做，本来就是美化统一代码的工具，禁用掉没有意义了，
根据提示修改结尾符号没有的情况下多半是行尾序列号造成的。

如图提示让删除行尾序列号

7.1 配置开发环境代理

https://cli.vuejs.org/zh/config/#devserver-proxy
devServer.proxy
webpack: https://webpack.docschina.org/configuration/dev-server/#root

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}
//或者
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}
//webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        bypass: function (req, res, proxyOptions) {
          if (req.headers.accept.indexOf('html') !== -1) {
            console.log('Skipping proxy for browser request.');
            return '/index.html';
          }
        },
      },
    },
  },
};

7.2 跨域请求

软一峰
http://www.ruanyifeng.com/blog/2016/04/cors.html
https://www.ruanyifeng.com/blog/developer/

7.3 js中修改样式

在js中是无法写单文件组件的，可以写jsx。
vuejs-jsx gethub地址：
https://github.com/vuejs/jsx

   //强制不使用lint语法检查
        /* eslint-disable no-unused-vars */
        // eslint-disable-next-line prettier/prettier
        message: h => {
          <div>
            请求错误<span style="color:red">{status}</span>:{options.path}
          </div>;
        },

八、组件

8.1 form表单

双向绑定模式

antd模式：

九、iconfont

https://www.iconfont.cn/

可以修改文件名。

## 9.1 自定义图标 1）可以公司设计图标，上传到平台 2） 可以放在项目中引用 ## 9.2 主题定制 找到antdv的主题定制，复制modifyVars到vue.config的less属性下面， modifyVars中所有变量否可以修改 // If you are using less-loader@5 please spread the lessOptions to options directly modifyVars: { 'primary-color': '#1DA57A', 'link-color': '#1DA57A', 'border-radius-base': '2px', },

https://github.com/vueComponent/ant-design-vue/issues/325

附录：

1.1 代码告警去除

warning Insert · prettier/prettier
解决：执行 npm run lint --fix

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}

2 插件

2.1 Ant Design Vue helper 官方提供

3 单选框

v-model获取值与.value取值的区别（v-model原理分析）
本文链接：https://blog.csdn.net/qq_41635167/article/details/85736936

三、vite

https://www.vitejs.net/guide/
rollup打包
按需更新

异常

vue 启动报错：TypeError: Cannot read property 'range' of null

问题原因为babel-lint版本过高问题导致。
解决方式：降低版本，比如7/8都可以。

修改package.json

"devDependencies": {
    "babel-eslint": "^7.2.3",
 }

rm -rf node_modules
npm cache clean
npm install
npm cache clean // 暴力清缓存：npm cache clean --force