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创建项目

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
> 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

?
1
npm install vue-router@4 -S

  在 src 目录新建 router/index.ts

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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

?
1
2
3
4
5
6
7
<template>
    <div class="home">
        <h1>欢迎来到首页</h1>
    </div>
</template>
 
<script setup lang="ts"></script>　

  创建 src/views/VueAbout.vue

?
1
2
3
4
5
6
7
8
<template>
    <div class="about">
        <h1>关于我们</h1>
        <p>这里是一些关于我们的信息。</p>
    </div>
</template>
 
<script setup lang="ts"></script>

  修改 App.vue

?
1
2
3
<template>
    <router-view />
</template>

  修改 main.ts

?
1
2
3
4
5
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 还允许开发者自定义需要自动导入的内容，提供了更大的灵活性。

插件安装命令：

?
1
2
3
>  npm i -D unplugin-auto-import
 
up to date in 2s 

配置文件 vite.config.ts：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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、使用包管理器

?
1
2
3
4
5
6
7
8
9
10
# 选择一个你喜欢的包管理器
 
# 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

?
1
2
3
4
5
6
7
8
<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

?
1
2
3
4
5
6
7
8
9
10
11
<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

posted @   左扬  阅读(274)  评论(0)  编辑  收藏  举报
相关博文：
· vuejs3.0 从入门到精通——项目创建
· vuejs3.0 从入门到精通——Visual Studio Code 使用 Vite 安装 TypeScript+Vue3 项目
· vite+vue3+ts 手把手教你创建一个vue3项目
· vue3创建项目，vite+js
· # Vue3 + Vite 实现项目搭建
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
levels of contents
点击右上角即可分享
微信分享提示