vuejs3.0 从入门到精通——项目搭建
项目搭建
一、环境准备
| 软件名称 | 软件版本 |
| node | v20.9.0 |
| npm | 10.1.0 |
| Windows 10 专业版 | 22H2 |
| vue | 3.3.4 |
| vue/cli | 5.0.8 |
| vue-router | 4.2.5 |
| vite |
4.4.11 |
| vitest | 0.34.6 |
| pinia | 2.1.7 |
| vue-tsc | 1.8.19 |
| jsdom | 22.1.0 |
二、vite创建项目
> npm create vite@latest saas √ Select a framework: » Vue √ Select a variant: » Customize with create-vue ↗ Vue.js - The Progressive JavaScript Framework √ 是否使用 TypeScript 语法？ ... 否 / 是 √ 是否启用 JSX 支持？ ... 否 / 是 √ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是 √ 是否引入 Pinia 用于状态管理？ ... 否 / 是 √ 是否引入 Vitest 用于单元测试？ ... 否 / 是 √ 是否要引入一款端到端（End to End）测试工具？ » 不需要 √ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是 √ 是否引入 Prettier 用于代码格式化？ ... 否 / 是 正在构建项目 D:\worker-vue3\saas... 项目构建完成，可执行以下命令： cd saas npm install npm run format npm run dev
三、安装 router
npm install vue-router@4 -S
在 src 目录新建 router/index.ts
import { createRouter, createWebHistory, } from 'vue-router'
const routes = [
{
path: '/',
redirect: '/home',
},
{
name: 'home',
path: '/home',
component: () => import("../views/Home.vue")
},
{
name: 'index',
path: '/about',
component: () => import("../views/About.vue")
}
]
const router = createRouter({
scrollBehavior: () => ({ left: 0, top: 0 }),
history: createWebHistory(),
routes,
})
router.beforeEach((to, from, next) => {
next()
})
export default router
创建 src/views/VueHome.vue
<template>
<div class="home">
<h1>欢迎来到首页</h1>
</div>
</template>
<script setup lang="ts"></script>
创建 src/views/VueAbout.vue
<template>
<div class="about">
<h1>关于我们</h1>
<p>这里是一些关于我们的信息。</p>
</div>
</template>
<script setup lang="ts"></script>
修改 App.vue
<template>
<router-view />
</template>
修改 main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.ts'
createApp(App).use(router).mount('#app')
四、插件
4.1、unplugin-auto-import
unplugin-auto-import 是一个针对 Vue 3 的插件，它主要解决了在 Vue 项目中自动导入 API 或组件的问题。这个插件能够减少开发者在编写代码时需要手动导入的 API 或组件的数量，从而简化代码并提高其可读性。
具体来说，unplugin-auto-import 插件能够帮助开发者在以下方面提高效率：
- 自动导入 Vue 组件：在 Vue 项目中，通常需要手动导入所需的组件，这会增加不少重复性的工作。使用 unplugin-auto-import 插件后，它可以自动扫描代码中的组件使用情况，并自动导入所需的组件，从而减少了手动导入的工作量。
- 自动导入 Vue Composition API：Vue 3 引入了 Composition API，这使得代码更加模块化和可重用。然而，手动导入这些 API 也是一件繁琐的事情。unplugin-auto-import 可以自动检测代码中使用的 API，并自动导入它们。
- 自定义导入：除了默认的自动导入行为外，unplugin-auto-import 还允许开发者自定义需要自动导入的内容，提供了更大的灵活性。
插件安装命令：
> npm i -D unplugin-auto-import up to date in 2s
配置文件 vite.config.ts：
import { defineConfig } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// import AutoImport from "@vitejs/plugin-vue"
import AutoImport from 'unplugin-auto-import/vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
vueJsx(),
//配置插件
AutoImport({
imports: ["vue", "vue-router"],
dts: 'src/auto-import.d.ts' // 路径下自动生成文件夹存放全局指令
})
],
resolve: {
//配置路径别名
alias: {
'@': path.resolve(__dirname, './src')
},
},
});
五、Element-PLUS
https://element-plus.org/zh-CN/
5.1、环境支持
Element Plus 可以在支持 ES2018 和 ResizeObserver 的浏览器上运行。 如果您确实需要支持旧版本的浏览器，请自行添加 Babel 和相应的 Polyfill 。
由于 Vue 3 不再支持 IE11，Element Plus 也不再支持 IE 浏览器。
|
|
|
|
|
| Edge ≥ 79 | Firefox ≥ 78 | Chrome ≥ 64 | Safari ≥ 12 |
5.2、使用包管理器
# 选择一个你喜欢的包管理器 # NPM $ npm install element-plus --save # Yarn $ yarn add element-plus # pnpm $ pnpm install element-plus
5.3、浏览器直接引入
直接通过浏览器的 HTML 标签导入 Element Plus，然后就可以使用全局变量 ElementPlus 了。
根据不同的 CDN 提供商有不同的引入方式， 我们在这里以unpkg(https://unpkg.com/)和jsDelivr(https://www.jsdelivr.com/)举例。 你也可以使用其它的 CDN 供应商。
5.3.1、unpkg
<head> <!-- Import style --> <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /> <!-- Import Vue 3 --> <script src="//unpkg.com/vue@3"></script> <!-- Import component library --> <script src="//unpkg.com/element-plus"></script> </head>
5.3.2、jsDelivr
<head>
<!-- Import style -->
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"
/>
<!-- Import Vue 3 -->
<script src="//cdn.jsdelivr.net/npm/vue@3"></script>
<!-- Import component library -->
<script src="//cdn.jsdelivr.net/npm/element-plus"></script>
</head>
5.4、快速开始
https://www.cnblogs.com/zuoyang/p/17817681.html
