当前位置：首页 > article >正文

Vue学习记录之一（介绍及脚手架的使用）

article 2024/9/24 19:24:42

一、背景知识介绍

1、构建工具介绍

Vite, Webpack,Rollup, Parce

构建工具	优点	缺点
Vite	- 快速启动，秒级热更新，更快的构建速度，更好的开发体验； - 支持 Vue3 和 ES modules 的原生特性，轻松实现按需加载。 - 对于单页应用和小型项目的构建效率高 - 可以快速地启动开发服务器 - 能够快速实现 SSR - 对于ESM的支持更加友好	- 对于大型项目构建效率不高 - 不支持IE11及以下浏览器
Webpack	- 功能强大、可配置性高 - 支持各类资源的处理、打包和优化 - 支持热重载和模块热替换 - 社区支持广泛、插件丰富	- 学习成本较高，配置文件繁琐，构建速度慢； - 初学者可能会遇到各种问题，需要不断深入学习和实践； - 大型项目的构建成本可能较高。 - 初次构建时间长 - 构建速度较慢
Rollup	- 构建速度快、效率高 - 生成的代码体积小 - 对代码进行静态分析和优化 - 支持Tree shaking等高级特性	- 对于需要动态加载的项目不太友好 - 配置较为复杂 - 处理HTML、CSS、图片等资源相对不太方便
Parce	- 零配置、自动化高 - 开箱即用、易上手 - 支持多种资源的打包和优化 - 构建速度较快	- 对于一些高级需求不太友好 - 不支持Tree shaking - 社区生态相对不够完善

2、包管理/依赖更新工具

npm, pnpm, yarn
npm: 安装Node.js 后就可以使用
pnpm: 即使没有Node.js，也可以直接安装pnpm,也可以使用npm安装，npm install -g pnpm
yarn: npm install -g yarn

3、框架的选择

脚手架（框架）:用于初始化，创建项目，选择性安装需要的插件，指定统一的风格，生成demo。

React是一个用于构建Web应用程序UI组件的JavaScript库，主要用于构建UI
Angular是一个由Google支持的基于TypeScript的JavaScript框架。这是一个非常受欢迎的前端开发框架。Angular是作为Angular 2或Angular发布的，它构成了AngularJS（框架的第一个版本）的重写。
Vue.js是讨论最多且发展最快的JavaScript框架之一
Vanilla 是一款以Openresty为基础的框架，它以简洁、高效的特性吸引了众多开发者的目光。Vanilla不仅仅是一个简单的工具集，更是一个完整的生态系统，提供了一系列组件，如Bootstrap、Router、Controllers、Models和Views，帮助开发者快速构建稳定且高性能的Web应用程序。

二、项目的部署

Vue2 的脚手架有一种：VueCli

Vue3 的脚手架有两种：VueCli + Vite

Vite: 是优化了rollup构建工具, VueCli 使用的Webpack构建工具。

推荐使用 Vue3 + Vite

# 1、构建项目
pnpm create vite@latest 项目名称 #npm create vite@latest 项目名称
# 2、选择大框架
    Vanilla
>   Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others
# 3、选择语言
    TypeScript
    JavaScript
>   Customize with create-vue ↗
    Nuxt ↗   #也是Vue的一个轻量级框架。可用来创建服务端渲染 (SSR) 应用，也可充当静态站点引擎生成静态站点应用。
#TypeScript 是 JavaScript 的超集，增加了静态类型检查。通过在代码中显式声明变量的类型，TypeScript 提供了更强的类型安全性，能在编译时捕获类型错误
# 4、    
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否 / 是
正在初始化项目 C:\Users\Administrator\Desktop\dk-ruoyi\demo3...

项目初始化完成，可执行以下命令：

  cd demo3
  pnpm install
  pnpm dev

在这里插入图片描述
目录介绍

project-name
│
├── public                  # 静态资源
│   ├── index.html          # HTML 模板
│   └── favicon.ico         # Favicon
│
├── src
│   ├── assets              # 资源文件
│   ├── components          # 组件
│   ├── router              # 路由
│   ├── views               # 页面
│   ├── store               # 状态管理
│   ├── styles              # CSS/SCSS/SASS/LESS 样式
│   ├── utils               # 工具函数
│   ├── directives          # 自定义指令
│   ├── mixins              # 混入
│   ├── types               # TypeScript 类型定义
│   ├── App.vue             # 主组件
│   ├── main.ts             # 入口文件
│   └── vite-env.d.ts       # Vite 类型定义
│
├── tests                   # 单元测试
│   └── *.test.ts           # 测试文件
│
├── .env                    # 环境变量
├── .eslintrc.js            # ESLint 配置
├── .gitignore              # Git 忽略文件
├── index.html              # 入口 HTML
├── package.json            # 依赖配置
├── tsconfig.json           # TypeScript 配置
├── vite.config.ts          # Vite 配置
└── yarn.lock               # 依赖锁文件（如果使用 yarn）

如果上面没有选择路由，也可以单独安装

pnpm install vue-router@4

然后在src中建立router文件夹，文件夹中建立index.ts文件。内容如下：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',name: 'home',component: HomeView
    },
    {
      path: '/about', name: 'about', component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

然后在main.ts中加入

import router from './router'

在app.vue中加入：

三、安装EelementUI及使用

1、安装

在package.json中同时存在dependencies 和 devDependencies。

dependencies中的模块将在生产环境中使用，而devDependencies中的模块仅在开发过程中使用

npm install <module> --save       #或yarn add <module>或  pnpm install <modulue>模块将被添加到dependencies。
npm install <module> --save-dev   #yarn add <module> --dev，模块将被添加到devDependencies
pnpm install element-plus

2、引入

1、全部引入

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'  //新增
import 'element-plus/dist/index.css'    //新增
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)                    //新增
app.mount('#app')

2、按需引入

需要安装2个插件, 如果是使用pnpm构建的项目，则在项目中不可以npm, 均由pnpm代替。

pnpm install -D unplugin-vue-components unplugin-auto-import

然后在vite.config.ts中添加配置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'     //新增1
import Components from 'unplugin-vue-components/vite'  //新增2
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'  //新增3

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    AutoImport({  //新增4
      resolvers: [ElementPlusResolver()],
    }),
    Components({  //新增5
      resolvers: [ElementPlusResolver()],
    }),
  ],
  // 可以修改主机地址端口号等
  server:{
    host: "127.0.0.1",
    port: 3001
    open: true   //自动打开浏览器
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

然后在页面中直接使用样式即可。有时候会出现错误提示，可以修改tsconfig.json的include项中添加“* * / *.d.ts”, 中间没有空格，这里的空格是防止typora。

3、Icon图标的安装

Element Plus中如果想使用Icon图标，不能直接使用，需要单独安装才能用。

pnpm install @element-plus/icons-vue

如果使用PyCharm中terminal中安装，先使用ctrl+c 退出。

全局注册, 在main.ts

import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'   //新增
const app = createApp(App)
//新增for语句
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.use(createPinia())
app.use(router)
app.mount('#app')

然后在页面中直接使用即可。
最后在工具中启动运行
在这里插入图片描述