Vue3笔记

环境配置

1. 先安装nodejs
   nodejs配置
2. vue-cli安装
   npm install -g @vue/cli
   yarn global add @vue/cli
3. 创建项目
   vue create 项目名
4. 安装ant-design-vue
   npm install ant-design-vue --save
   yarn add ant-design-vue
   npm info antd【查看安装版本】
   npm install --save @ant-design/icons【图标安装】
5. 图标使用
   按需引用

   <template>
   	<SmileOutlined />
   </template>
   import { SmileOutlined } from '@ant-design/icons';
   

   ant-design-vue2.0文档

vue.config.js

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

图片引用问题

Cannot find module ‘@/assets/xxx.png’ or its corresponding type declarations

shims-vue.d.ts文件添加以下内容

declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.bmp'
declare module '*.tiff'

打开包后，打开空白问题或本地打开html

router引用createWebHashHistory ，把createWebHistory修改为createWebHashHistory

import { createWebHashHistory } from 'vue-router'
const router = createRouter({
  history: createWebHashHistory(process.env.BASE_URL),
  routes
})

修改第三方组件样式要用deep深度选择器

在使用vue构建项目的时候，引用了第三方组件库，只需要在当前页面修改第三方组件库的样式以做到不污染全局样式。通过在样式标签上使用scoped达到样式只制作用到本页面，但是此时再修改组件样式不起作用。

更详情内容请点击：https://blog.youkuaiyun.com/idomyway/article/details/94659598

//.slick-slide为第三方组件样式
.ant-carousel {
  :deep(.slick-slide) {
    text-align: center;
    height: @height-carousel;
    line-height: @height-carousel;
    background: #364d79;
    overflow: hidden;
  }