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

高度可配置：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="/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="/src/main.ts"></script>
  </body>
</html>

3.3网页标题的效果

4.基础框架文件配置

5.设置路由配置

5.1安装 router

 npm install vue-router

5.2创建路由及配置页面

/routes.ts 创建路由

export default [
  {
    // 首页
    path: '/',
    component: () => import('../views/layout/index.vue'),
    children: []
  },
  {
    // 登录
    path: '/login',
    name: 'login',
    component: () => import('../views/login/index.vue'),
    children: []
  }
];

/index.js添加路由配置

import routes from './routes';
import { createRouter, createWebHashHistory } from 'vue-router';

export const router = createRouter({
  history: createWebHashHistory(),
  routes: [...routes]
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
  next();
});

// 全局后置守卫
router.afterEach((to, from) => {});

export default router;

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

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

//自动按需引入Element-Plus
cnpm install element-plus --save
cnpm i -D unplugin-vue-components unplugin-auto-import unplugin-element-plus


//icon图标自动导入
cnpm install @element-plus/icons-vue
cnpm i -D unplugin-icons

//在页面中发现没有Icon图标，需要单独下载一个插件：
cnpm install @iconify-json/ep

/vite.config.ts文件


//element-plus按需引入
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import ElementPlus from 'unplugin-element-plus/vite';

// 自动导入图标
import Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver';



..plugins: [
      vue(),
      AutoImport({
        resolvers: [
          // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
          ElementPlusResolver(),
          // 自动导入图标组件
          IconsResolver({
            prefix: 'Icon'
          })
        ],
        dts: 'types/auto-generate/auto-import.d.ts'
      }),
      Components({
        resolvers: [
          // 自动注册 Element Plus 组件
          ElementPlusResolver(),
          // 自动注册图标组件
          IconsResolver({
            enabledCollections: ['ep']
          })
        ],
        dts: 'types/auto-generate/components.d.ts'
      }),
      ElementPlus({}),
      // 导入图标组件
      Icons({
        autoInstall: true
      })
    ]

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

cnpm install @iconify-json/ep

格式必须这么写：<i-ep-xxx />或<IEpSearch />

<template>
  <div>
    layout页面
    <el-button>Default</el-button>
    <el-icon><i-ep-Search /></el-icon>
    <i-ep-Search />
    <IEpSearch />
    <IEpEdit width="24" height="24" style="margin-right: 8px" />
    <IEpDelete width="24" height="24" style="margin-right: 8px" />
  </div>
</template>

页面效果

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

cnpm install vite-plugin-svg-icons

配置页面./vite.config.ts

// svg-icons
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
 plugins: [
      vue(),
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), 'src/assets/svgs')],
        // 指定symbolId格式
        symbolId: 'icon-[dir]-[name]'
      }),
      ...
    ]

./main.ts中引入

// SvgIcon
import 'virtual:svg-icons-register';

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

    <div class="svg-icon-box">
      <svg>
        <use :xlink:href="`#icon-demo`"></use>
      </svg>
    </div>

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

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

 AutoImport({
        // 自动导入pinia, Vue 相关函数，如：createPinia, ref, reactive, toRefs, computed, watch等
        imports: ['pinia','vue'],
      )}

6.3.2自动导入pinia

下载安装包

npm i pinia

配置./main.ts

//pinia
import pinia from './stores/index';

const app = createApp(App);

//pinia
app.use(pinia);

配置./store/index.ts

// import { createPinia } from 'pinia'   
const pinia = createPinia();
export default pinia;

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

测试创建./store/user.ts，引入组件，打印效果

7.配置路径设置

./vite.config.ts

    const pathSrc = path.resolve(__dirname, 'src');

    ...
    plugins: [
    ],
    resolve: {
      alias: {
        // '@': fileURLToPath(new URL('./src', import.meta.url))
        '@': pathSrc,
        '@api': pathSrc + '/api',
        '@scss': pathSrc + '/assets/scss',
        '@assets': pathSrc + '/assets',
        '@com': pathSrc + '/components',
        '@utils': pathSrc + '/utils',
        '@views': pathSrc + '/views',
        '@store': pathSrc + '/stores',
        '@viewsConfig': pathSrc + '/viewsConfig'
      },
      extensions: ['.ts', '.js', '.mjs', '.jsx', '.tsx', '.json']
    }

8.格式化配置scss

./main.ts

//配置scss
import './assets/styles/index.scss';

./styles/index.scss

9.配置自适应适配

下载安装包

cnpm install postcss-px-to-viewport

配置./vite.config.ts


     import pxtovw from 'postcss-px-to-viewport';

     ...
     plugins：[]
     css: {
        postcss: {
        plugins: [
          pxtovw({
            viewportWidth: 1920, // UI设计稿的宽度
            unitPrecision: 5, // 转换后的精度，即小数点位数
            viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
            unitToConvert: 'px', // 要转化的单位
            selectorBlackList: ['.igonre'], // 指定不转换为视窗单位的类名，
            minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
            mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
            exclude: [], // 设置忽略文件，用正则做目录名匹配
            propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
            fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
            replace: true, // 是否转换后直接更换属性值
            landscape: false // 是否处理横屏情况
          })
        ]
      }
    }

三：项目中错误总结

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

报错信息如下：

[remote rejected] master -> master (pre-receive hook declined)

git push不上去的原因在于只有项目的管理员或者项目的管理员指派的具有相应权限的人才能进行pus要进行项目的push,就算是创建者也不行：

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

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

报错信息如下:

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

知识分子李云龙

关注

14
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue3实战教程：从概念到部署的完整项目搭建

太久没有进行从0到1进行项目搭建，日常的组件维护及组价的开发让我快忘记如何从头搭建一个完整的项目，正好借这个机会好好回忆下以往的知识。测试创建./store/user.ts，引入组件，打印效果例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
复制链接

扫一扫