前端项目Vue3 + Typescript + ElementPlus + TailwindCSS初始化脚手架安装

每次初始化前端项目时候都需要start up，虽然没什么难度但是细节多、重复操作麻烦。所以不如留篇文章给自己以及他人参考，以免每次都要重新从零开始摸索配置。

安装Vue3

先打开命令行，cd到目标目录 。
准备安装vue-cli命令行工具：

npm install -g @vue/cli

我们选择可视化UI创建vue部分吧，省事一点。
执行命令vue ui 进入可视化界面。

再界面中，选择新建项目。选择Manual手动勾选配置。在新建过程中会让你选择配置，我选择的配置有：

创建vue3项目
使用typescript
使用css预处理器sass
使用vuex状态管理
使用router多页面
使用eslint+prettier

我目前只是使用可视化界面来初始化vue3部分，接下来的操作还是用命令行。前端生态挺多东西都是依赖命令行操作的。所以在命令行窗口ctrl+c 结束vue ui进程吧。

安装 ElementPlus

由于我本人使用vscode ，它本身的自动格式化代码似乎跟vue3项目格式有点不兼容（我已经忘记了我的vscode当初是如何配置的了），所以可以在项目目录下新建文件.prettierrc ， 内容如下：

{
  "singleQuote": false
}

接着安装 ElementPlus

npm install element-plus -S

安装ElementPlus图标

npm install @element-plus/icons-vue -S

打开src/main.ts ， 在前面import处增加

import ElementPlus from 'element-plus'
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import 'element-plus/dist/index.css'

该文件下方的createApp(App).use那行删掉，改为下面：

const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
app.use(store).use(router).use(ElementPlus).mount("#app");

安装TailwindCSS

命令如下：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

打开tailwind.config.js，覆盖内容为：

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

创建./src/tailwind.css文件 ，填充内容如下：

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

打开./src/main.ts 文件，导入tailwind.css ( 为防止冲突，请放在import "element-plus/dist/index.css"的前面 )

import "./tailwind.css";

准备启动开发

默认情况里，vue-cli官方使用npm run serve 命令启动开发环境。由于个人习惯，我想用npm run dev 启动开发环境。
打开package.json， 在scripts对象下增加属性

"dev": "npm run serve",

然后执行npm run dev ,打开http://localhost:8080/ 就可以预览了。

为了测试ElementPlus + TailwindCSS是否能正常使用，可打开src/views/HomeView.vue , 在html部分插入

<h1 class="text-5xl font-bold underline">TailwindCSS</h1>
<el-button type="primary">ElementPlus按钮</el-button>

预览一下界面是否正常。

由于 src/App.vue 是会影响全局视图的，实际使用中势必会影响到业务组件。所以清理一下vue示例自带的一些代码，将src/App.vue的内容覆盖为

<template>
  <router-view />
</template>

然后，业务组件都可以写在 ./src/views 里了