Vue3实战教程：从概念到部署的完整项目搭建

知识分子李云龙

已于 2024-07-10 13:56:12 修改

阅读量7.7k

点赞数 54

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript npm css3 前端框架

于 2024-07-10 13:45:25 首次发布

本文链接：https://blog.csdn.net/A_Liyulong/article/details/140206727

2.添加服务配置(/vite.config.ts)

3.添加网页标题及图标

3.1创建/public/AppConfig.js

3.2/index.html中修改link中icon，图片存在public下，引入AppConfig配置项

6.添加全局配置（ElementPlus，svg注册等）

6.1 ElementPlus组件按需引入，下载安装包

注意：icon按需引入必须下载插件，格式有严格要求

6.2 SVG图标转换为vue组件：下载安装包

注意：virtual:svg-icons-register 是一个由 vite-plugin-svg-icons 插件创建的虚拟模块，它用于注册所有被包含在指定目录下的 SVG 图标。当 Vite 构建项目时，这个插件会遍历你配置的目录，加载所有的 SVG 文件，并将其转换为可以被当作 Vue 组件使用的格式。这些图标会被注册到全局，这样你就可以在项目的任何地方直接使用它们，而无需显式地导入每个图标。

6.3 自动导入 pinia、 Vue 相关函数

6.3.1自动导入vue，修改./vite.config.ts

6.3.2自动导入pinia

注意：因为pinia已经在./vite.config.ts中导入，所以不需要重新引入，当然也可以直接全部在main.ts中定义

1.新建gitlab项目后首次上传gitlab报错

报错信息如下：

解决方案：让管理者先创建master分支，自己在获得开发权限进行分支拉取，开辟新分支并推送

2.IE下浏览器运行项目白屏报错，谷歌运行正常。

报错信息如下:

解决方案：在vite.config.ts下transpileDependencies添加通配符‘*’转译所有依赖。

前言

太久没有进行从0到1进行项目搭建，日常的组件维护及组价的开发让我快忘记如何从头搭建一个完整的项目，正好借这个机会好好回忆下以往的知识。

一、项目的搭建

选取对应的构建工具，各种优缺点是我通义查的，描述比较全面，简单来说一般使用的
webpack适合复杂项目
vite构建快，配置简单
rollup暂时没用过

Webpack

优点：

高度可配置：Webpack 提供了丰富的插件和加载器系统，可以处理各种类型的资源，如 CSS、JavaScript、图片等，几乎可以满足所有复杂的项目需求。
模块热替换（Hot Module Replacement, HMR）：在开发过程中，Webpack 支持模块热替换，可以在不刷新页面的情况下更新代码，提高开发效率。
广泛社区支持：由于其流行度高，Webpack 拥有庞大的社区和丰富的文档，遇到问题时容易找到解决方案。

缺点：

配置复杂：Webpack 的高度可配置性也意味着配置文件可能变得非常复杂，对于初学者来说上手难度较大。
构建速度慢：尽管最新版本的 Webpack 在性能上有所改进，但在大型项目中，初次构建仍然可能需要较长时间。

Rollup

优点：

构建速度快：Rollup 使用静态分析来构建项目的依赖图，并只打包项目实际使用的部分，因此构建速度非常快。
简洁的配置：Rollup 的配置相对简单，对于不需要复杂配置的项目来说，可以快速上手。
支持 ES6+ 模块：Rollup 专注于 ES6 模块的打包，可以很好地处理现代 JavaScript 代码。

缺点：

生态相对较小：相比 Webpack，Rollup 的插件生态系统较小，对于一些特定的需求可能需要自己编写插件或者寻找替代方案。
学习曲线：虽然配置简单，但对于初次接触 Rollup 的开发者来说，理解其工作原理和概念仍有一定的学习成本。

Vite

优点：

开发服务器启动速度快：Vite 利用浏览器原生的 ES 模块支持，在开发阶段直接加载源代码，无需等待打包过程，极大提升了开发效率。
热模块替换（HMR）：Vite 的 HMR 实现非常高效，能够实时更新代码而无需刷新页面，提高了开发体验。
易于上手：Vite 的配置简单，开箱即用，适合快速搭建项目。

缺点：

生产环境构建速度：虽然 Vite 的开发服务器启动速度快，但在生产环境下的构建速度相比 Rollup 可能会稍慢一些。
兼容性：Vite 高度依赖于现代浏览器的特性，对于旧版浏览器的支持可能不如其他构建工具全面。

二、使用vite搭建vue3+ts

1.项目创建

npm create vite@latest


//输入你的想要创建的项目名称
Project name: » vite-project
//选择想要使用的框架
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
>   Vue
    React
    Preact
    Lit
    Svelte
//选择使用的数据类型
? Select a variant: » - Use arrow-keys. Return to submit.
    JavaScript
>   TypeScript
    Customize with create-vue
    Nuxt
//出现下面的就成功了 ，然后cv就可以
Done. Now run:
  cd test
  npm install
  npm run dev

2.添加服务配置(/vite.config.ts)

//现有配置项
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 修改为箭头函数方便后续添加变量
export default defineConfig(()=>{

 return {
   server: {
      // 将此设置为 0.0.0.0 或者 true 将监听所有地址，包括局域网和公网地址。
      host: true,
      port: 8888,
      // 设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口
      strictPort: false,
      //表示服务器将在启动时自动打开浏览器并访问指定 URL
      open: true,
      //设置代理设置
      proxy: {
        // 选项写法
        // '/api': {
        //   target: 'http://xxxxxxxx.com',
        //   // ws: true
        ////允许修改请求的源地址。
        //   changeOrigin: true,
        ////对请求的路径进行重写，将 /api 替换为空字符串。
        //   rewrite: (path) => path.replace(/^\/api/, '')
        // }
      },
      // 指定服务器响应的 header
      headers: {}
    },
   plugins: [vue()],
 }
})

3.添加网页标题及图标

3.1创建/public/AppConfig.js

备注：在这里设置Appconfig 是为了后期方便添加或修改全局配置文件


window.AppConfig = {
  // 系统名称
  name: '集中视频xxxxx端'
};
//系统名称
document.title = window.AppConfig.name || '';

3.2/index.html中修改link中icon，图片存在public下，引入AppConfig配置项


<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/https/blog.csdn.net/xxx.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>

    <script type="text/javascript" src="./AppConfig.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/https/blog.csdn.net/src/main.ts"></script>
  </body>
</html>