foreword
On August 5, 2021, Vue officially released version 3.2. At the same time, You Yuxi, the author of Vue, also said on his personal Weibo: "< script setup > + TS + Volar = really fragrant"; on January 22, 2022, Vue official Announcing Vue3 as the new default.
Today's Vue3 is unstoppable. Of course, there is a new way to build a new Vue3 project. Today, I will take you to familiarize yourself with the new way to build a Vue3 project.
Build steps:
Download node version > 16.0
Create a directory, such as (vue3Study)
Open the terminal with the IDE tool and enter the command
npm init vue@latest
Next, we will enter the answers to the following questions in order to help create the project:
Project name: project name, default value: vue-project, you can enter the desired project name, Chinese is not recommended here.
Add TypeScript? Add TypeScript component? Default: No.
Add JSX Support? Whether to add JSX support? Default: No.
Add Vue Router for Single Page Application development? Whether to add Vue Router route management component for single page application development? Default: No.
Add Pinia for state management? Whether to add Pinia component for state management? Default: No.
Add Vitest for Unit testing? Add Vitest for unit testing? Default: No.
Add an End-to-End Testing Solution? The default value is No, Cypress, Playwright
(Add Cypress for both Unit and End-to-End testing? Whether to add Cypress for unit testing and end-to-end testing? Default value: No.)
Add ESLint for code quality? Whether to add ESLint for code quality inspection? Default: No.
### 安装 element-plus
npm install element-plus --save
### ElementPlus 全局引入 main.ts
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
### ElementPlus 按需引入 自动引入 --.vue文件直接使用
1、 安装unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
2、 下列代码插入到你的 Vite 或 Webpack 的配置文件中
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
3、.vue文件中直接使用 <el-button type="primary">Primary</el-button>
### ElementPlus 按需引入 手动引入
1、 安装 unplugin-element-plus 来导入样式
npm i unplugin-element-plus -D
2.1、 vite.config.ts--- （所有的样式）
import ElementPlus from 'unplugin-element-plus/vite'
export default defineConfig({
// ...
plugins: [ElementPlus()],
})
.vue文件---
import { ElButton } from 'element-plus'
export default {
components: { ElButton },
}
<el-button type="primary">Primary</el-button>
2.2 只使用组件API话：（在.vue中单独使用组件的样式）
.vue文件---
import { ElButton } from 'element-plus'
import 'element-plus/es/components/button/style/css'
<el-button type="primary">Primary</el-button>
