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