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

原文链接： https://blog.star7th.com/2022/05/2457.html

前言

每次初始化前端项目时候都需要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

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

import ElementPlus from 'element-plus' 
import 'element-plus/dist/index.css' 

use那里增加 use(ElementPlus)

安装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: [], 
  corePlugins: { 
    preflight: false, 
  }, 
}; 

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

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

打开./src/main.ts 文件，导入index.css

import "./index.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 里了

本文转自： https://blog.star7th.com/2022/05/2457.html
本站仅做收录，版权归原作者所有。