vue3学习——vite+vue3.0创建项目

一、项目的创建

使用 npm：

npm init @vitejs/app <project-name>
cd <project-name>
npm install
npm run dev

使用yarn

yarn create @vitejs/app <project-name>
cd <project-name>
yarn
yarn dev

二、配置项目在服务器启动时自动在浏览器中打开应用程序

三、引入ant-design-vue

yarn add ant-design-vue@next

使用

四、引入less并配置

yarn add less less-loader --dev

注意这里有一个坑，注意这里一定要加–dev。
如果不加，less的依赖会被写入dependencies中。
但是less和less-loader要放在package.json文件里的devDependencies里的。

下面两个命令是一样不可以的，都是写到 dependencies
npm install less less-loader
npm install less less-loader --save

配置的过程也有一些坑：
1、引入less之后在main.ts中讲引入的antd的样式文件修改为less

import ‘ant-design-vue/dist/antd.less’;

此时项目出现了报错

我们在vite.config.js文件中进行配置

这时报错消失，less的设置起作用了。
2、但是，第二个坑来了
我修改代码热更新之后打开浏览器，都生效了。

但是我刷新页面之后，antd的样式出现了问题，自己写的less的样式没有问题。

这个还未解决。。。