vue+vite+ts 开发项目

一、使用npm创建项目

npm create vite
# project name -> viteTs-demo
# select a framework -> vue
# select a variant -> vue+ts
cd viteTs-demo
npm install

可以使用vscode进行打开

二、使用TailwindCSS中的daisyUI插件，增加代码的易读性，多种主题可选，可自定义，组件也很多，使用起来也很方便，也有很顽强的适用性。

1.在项目中进行安装

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2.生成配置文件tailwind.config.js 和 postcss.config.js

npx tailwindcss init -p

3.在tailwind.config.js中配置purge，选项指定所有的 pages 和 components 文件

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

4.可以在style.css中引入使用

@tailwind base;
@tailwind components;
@tailwind utilities;

引入后，会显示警告状态，在.vscode文件见下创建一个settings.js文件

{
    "css.lint.unknownAtRules": "ignore"
}

可以取消警告提示
5.由于main.ts文件中已经引入style.css文件，故需要重复引入，如果是新创建了一个css文件，则需要在main.ts文件中引入使用。

三、安装daisyUI，并进行使用

npm i daisyui

1.安装成功后，在tailwind.config.cjs中进行引入

module.exports = {
  //...
  plugins: [require("daisyui")],
}

2.可以在页面中直接使用

<button class="btn">Button</button>

如需转载，要标明出处和作者，谢谢！