Original link: https://blog.star7th.com/2022/05/2457.html
foreword
Every time you initialize a front-end project, you need to start up. Although it is not difficult, there are many details and repeated operations are troublesome. So it’s better to leave an article for yourself and others to refer to, so as not to have to explore the configuration from scratch every time.
Install Vue3
First open the command line and cd to the target directory.
Prepare to install the vue-cli command line tool:
npm install -g @vue/cli
Let’s choose the visual UI to create the vue part, save a little trouble.
Execute the command vue ui to enter the visual interface.
On the interface, select New Project. Select Manual to manually check the configuration. During the new creation process, you will be asked to choose a configuration. The configurations I chose are:
创建vue3项目使用typescript使用css预处理器sass使用vuex状态管理使用router多页面使用eslint+prettierI currently only use the visual interface to initialize the vue3 part, and the next operation is still using the command line. Many things in the front-end ecosystem rely on command line operations. So end the vue ui process in the command line window ctrl+c.
Install ElementPlus
Since I use vscode myself, its own automatic formatting code seems to be a bit incompatible with the vue3 project format (I have forgotten how my vscode was configured at the beginning), so I can create a new file .prettierrc in the project directory, the content is as follows :
{ "singleQuote": false }
Then install ElementPlus
npm install element-plus -S
Open src/main.ts and add it at the previous import
import ElementPlus from 'element-plus' import 'element-plus/dist/index.css'
Use there to increase use(ElementPlus)
Install TailwindCSS
The command is as follows:
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p
Open tailwind.config.js and override the content as follows:
module.exports = { content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"], theme: { extend: {}, }, plugins: [], corePlugins: { preflight: false, }, };
Create the ./src/index.css file and fill it with the following:
@tailwind base; @tailwind components; @tailwind utilities;
Open the ./src/main.ts file and import index.css
import "./index.css";
Ready to start development
By default, vue-cli officially uses the npm run serve command to start the development environment. Due to personal habits, I want to start the development environment with npm run dev.
Open package.json and add properties under the scripts object
"dev": "npm run serve",
Then execute npm run dev and open http://localhost:8080/ to preview it.
In order to test whether ElementPlus + TailwindCSS can be used normally, you can open src/views/HomeView.vue and insert it in the html part
<h1 class="text-5xl font-bold underline">TailwindCSS</h1> <el-button type="primary">ElementPlus按钮</el-button>
Preview whether the interface is normal.
Since src/App.vue affects the global view, it is bound to affect business components in actual use. So clean up some of the code that comes with the vue example and overwrite the content of src/App.vue as
<template> <router-view /> </template>
Then, business components can be written in ./src/views
This article is reprinted from: https://blog.star7th.com/2022/05/2457.html
This site is for inclusion only, and the copyright belongs to the original author.