从零搭建VU3项目

从零搭建 VU3 项目

1.初始化 vue3 项目

1
npm create vite@latest

2.导入 element-plus

1
npm install element-plus --save

在根目录下的main.ts中加入

1
2
3
4
5
//element-plus
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";

createApp(App).use(ElementPlus).mount("#app");

其中createApp(App) 是 Vue 3 的新方法，用于创建一个 Vue 应用实例。App 是你的根组件。

.mount("#app") 是将 Vue 应用实例挂载到 DOM 上。"#app" 是你想要挂载的元素的选择器，通常是一个 id。我们使用 .use(ElementPlus) 来添加 Element Plus 插件，最后将应用挂载到 id 为 ‘app’ 的元素上。

官方写法为，其实是一样的。

1
2
3
4
5
6
7
8
9
10
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

1
2
3
4
5
6
7
// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

Volar 是一个为 Vue 3 提供语言服务支持的 Visual Studio Code 扩展。它提供了诸如类型检查、自动完成、重构等功能，以帮助开发者更有效地编写和维护 Vue 3 代码。Volar 是基于 TypeScript 语言服务和 Vue 3 的编译器 API 构建的，因此它能够提供非常准确和高效的类型检查和错误报告。

3.安装 tailwindcss

1
2
npm install -D tailwindcss
npx tailwindcss init

在根目录生成的 tailwind.config.js 内修改

1
2
3
4
5
6
7
8
9
10
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{vue,js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {},
  },
  plugins: ["prettier-plugin-tailwindcss"],
}

其中 content 指的是需要识别的文件命，由于这里是 vue 项目，所以与官网有所不同。plugins 加了一个美化插件，可以自动排序 tailwindcss 的样式，使页面更加整洁。

在 src 目录下新建一个 tailwind.css

这是在 Tailwind CSS 中使用的指令。

  • @tailwind base;：这个指令会引入 Tailwind CSS 的基础样式。这包括一些预设的样式，如 box-sizing，padding，margin 等。

  • @tailwind components;：这个指令会引入由 Tailwind CSS 生成的组件样式。这些样式是由你在配置文件中定义的组件生成的。

  • @tailwind utilities;：这个指令会引入 Tailwind CSS 的工具类样式。这些是 Tailwind CSS 的主要部分，提供了大量的工具类，用于构建你的界面。

1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;

在终端输入，运行命令行（CLI）工具扫描模板文件中的所有出现的 CSS 类（class）并编译 CSS 代码。使用 Tailwind CSS 的命令行工具，监视 ./src/tailwind.css 文件的变化，一旦文件发生变化，就将其编译到 ./dist/css/tailwind.css 文件。

1
npx tailwindcss -i ./src/tailwind.css -o ./dist/css/tailwind.css --watch

在根目录下的 index.html 中加入引用编译后的文件即可

1
<link href="/dist/css/tailwind.css" rel="stylesheet" />