Vue3工程化项目搭建

这篇具有很好参考价值的文章主要介绍了Vue3工程化项目搭建。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Vue3工程化项目搭建

源码:vue3-quick-start

预览:vue3-quick-start

一、何为工程化

工程化概述

前端工程化大致可以分为模块化、组件化、规范化和自动化。

规范化

  • 项目目录结构
  • 语法提示
  • 编码风格规范
  • 联调规范
  • 文件命名规范
  • 代码样式规范
  • git flow

模块化

模块化是指将一个文件拆分成多个相互依赖的文件,最后进行统一的打包和加载,这样能够很好的保证高效的多人协作。

例如:ES6 Module、CommonJS、AMD、CMD

组件化

组件化则是对UI层面的拆分,将页面拆分成多个组件,每个组件包含自己的样式、逻辑和模板,最后组合成完整的页面。

例如:vue组件

自动化

  • 自动化构建
  • 自动化测试
  • 自动化部署
  • 自动化文档生成

::: 工程化的优势 一个字,降本增效
:::


接下来,一起搭建一个Vue3工程化项目

二、项目搭建

:::tip 提示 Node版本:16.0.0+
建议使用 pnpm
:::

可以使用官方脚手架vue-cli或者vite选择vue模板来创建一个 Vue 应用

vue-cli 搭建

pnpm create vue@latest

vite 搭建

pnpm create vite

这里选择使用vue-cli来创建项目,选项都可以选择Yes

帮你完成Ts,Jsx,Vue Router,Pinia,Cypress,Eslint,Prettier的配置

Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue3-quick-start
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Cypress
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...

Done.

下载完成之后,执行如下启动项目

cd vue3-quick-start
pnpm install
pnpm format
pnpm dev

如下:项目成功启动

  VITE v4.4.2  ready in 1064 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

点击http://127.0.0.1:5173/即可访问

Vue3工程化项目搭建,工程化,Vue,大前端,vue3,vite,vite+vue3+ts,工程化,vue3工程化,vue3+ts

至此,全都使用脚手架生成代码

完整目录如下,可以看到Eslint和Prettier也已填加

Vue3工程化项目搭建,工程化,Vue,大前端,vue3,vite,vite+vue3+ts,工程化,vue3工程化,vue3+ts

三、规范化

目录规范

├── src/
    ├── api/                       // 接口请求目录
    ├── assets/                    // 静态资源目录
        ├── logo.png
    ├── common/                    // 通用类库目录
    ├── components/                // 公共组件目录
    ├── router/                    // 路由配置目录
    ├── store/                     // 状态管理目录
    ├── style/                     // 通用样式目录
    ├── utils/                     // 工具函数目录
    ├── views/                     // 页面组件目录
        ├── Home                   // 页面组件目录
            ├── index.vue          // 页面组件
            ├── type.ts            // 页面组件类型定义
            ├── index.ts           // 页面组件逻辑
            ├── index.scss         // 页面组件样式 
            ├── __tests__	       // 页面组件测试 
    ├── App.vue
    ├── main.js
├── tests/                         // 单元测试目录
├── tsconfig.json                  // JavaScript 配置文件
├── vite.config.js                 // Vite 配置文件
└── package.json                   // 项目配置文件
├── .env                           // 公共配置文件
├── .env.development               // 开发环境配置文件
├── .env.production                // 生产环境配置文件 
├── .eslintrc.js                   // eslint 配置文件
├── .gitignore                     // git 忽略文件
├── .prettierrc.js                 // prettier 配置文件

代码规范

这里通过 EditorConfig + ESLint + Prettier来实现代码规范

Eslint和Prettier默认已配置集成,这里需要做下修改并添加webstorm自动修复

1、修改.eslintrc.js

eslint Find and fix problems in your JavaScript code

@vue/eslint-config-prettier/skip-formattingskip-formatting去掉,

修改为@vue/eslint-config-prettier,这样就可以使用自动修复功能了

添加.eslintignore文件,忽略不需要检查的文件

.DS_Store
.idea
.editorconfig
pnpm-lock.yaml
.npmrc

.tmp
.cache/
coverage/
.nyc_output/
**/.yarn/**
**/.pnp.*
/dist*/
node_modules/
**/node_modules/

## Local
.husky
.local

!.prettierrc.js
components.d.ts
auto-imports.d.ts
2、修改.prettierrc.json.prettierrc.js

prettier An opinionated code formatter

修改为.js,主要是方便我们去查看配置了哪些规范

配置项根据需要自行修改

::: tip

脚手架已经帮我们配置了将 Prettier 的规则设置到 ESLint 的规则中,

所以我们只需要关注.prettierrc.js中的配置即可
:::

module.exports = {
    "$schema": "https://json.schemastore.org/prettierrc",
    printWidth: 120, // 单行输出(不折行)的(最大)长度
    semi: false, // 结尾使用分号, 默认true
    useTabs: false, // 使用tab缩进,默认false
    tabWidth: 4, // tab缩进大小,默认为2
    singleQuote: true, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
    jsxSingleQuote: true, // jsx 不使用单引号,而使用双引号
    trailingComma: 'none', // 行尾逗号,默认none,可选 none|es5|all es5 包括es5中的数组、对象,all 包括函数对象等所有可选
    bracketSpacing: true, // 对象中的空格 默认true,true: { foo: bar },false: {foo: bar}
    htmlWhitespaceSensitivity: 'ignore', // 指定 HTML 文件的全局空白区域敏感度, "ignore" - 空格被认为是不敏感的
    jsxBracketSameLine: false,
    arrowParens: 'avoid', // 箭头函数参数括号 默认avoid 可选 avoid| always, avoid 能省略括号的时候就省略 例如x => x,always 总是有括号
    proseWrap: 'always', // 当超出print width(上面有这个参数)时就折行
}

同样,添加.prettierignore文件,忽略不需要检查的文件

.DS_Store
.idea
.editorconfig
pnpm-lock.yaml
.npmrc

.tmp
.cache/
coverage/
.nyc_output/
**/.yarn/**
**/.pnp.*
/dist*/
node_modules/
**/node_modules/

## Local
.husky
.local

**/*.svg
**/*.sh
components.d.ts
auto-imports.d.ts
3、添加.editorconfig

配置编辑器代码风格,保持统一

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 4
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false
4、自动格式化代码
  • webstorm

开启eslint,并选择自动修复

Vue3工程化项目搭建,工程化,Vue,大前端,vue3,vite,vite+vue3+ts,工程化,vue3工程化,vue3+ts

  • vscode

安装 eslint, volar

settings.json 设置文件中,增加以下代码:

"editor.codeActionsOnSave": {
    "source.fixAll": true,
},
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript"
],
"eslint.alwaysShowStatus": true

修改之后再次执行 yarn run format,对代码进行格式化

::: tip

代码规范配置已完成,具体配置根据团队规范进行修改

:::

husky和lint-staged集成

husky

lint-staged

1、添加husky配置

通过特定的 git hook 来检查git提交信息,代码lint等功能

  • 安装
pnpm dlx husky-init && pnpm install

执行完成之后自动添加以下配置

1、在package.json中添加

"script": {
    "prepare": "husky install"
}

2、创建了一个 pre-commit 钩子的示列


如何添加新的钩子

npx husky add .husky/commit-msg "npm test"
2、添加lint-staged配置

lint-staged只作用于git暂存区的文件,
可以对暂存区的文件进行lint检查,格式化等操作

这里结合husky/pre-commit钩子,对暂存区的文件进行检查

  • 安装
pnpm install -D lint-staged
  • 配置

package.json添加如下配置

"lint-staged": {
    "*.{js,jsx,ts,tsx,vue}": [
        "eslint --fix",
        "git add ."
    ]
},

修改 .husky/pre-commit 触发命令为:

npx lint-staged

这样就可以在提交代码之前,对暂存区的文件进行检查,并尝试修复

比如当你尝试提交如下代码,根据规范,会自动将"转为’,并完成提交

const a = "string"

Git提交规范

这里我们只讲怎么操作,Commit规范讲解参考下文

1、Git Commit 格式规范

Git Commit规范指北

这是 angular 的commit记录,属于是业界的标杆了

Vue3工程化项目搭建,工程化,Vue,大前端,vue3,vite,vite+vue3+ts,工程化,vue3工程化,vue3+ts

2、commitizen 规范集成

commitizen

  • a、安装

本地或者全局安装

这里推荐团队成员去全局安装,这样项目中只需要配置即可使用

pnpm install -g commitizen cz-conventional-changelog

commitizen:Commitizen CLI 工具
cz-conventional-changelog:适配器

  • b、配置

package.json添加如下配置

"config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
}
  • c、使用
git add .
git cz

或者package.json添加scripts

"scripts": {
    "commit": "cz"
}
pnpm run commit

此时会出现这样的交互式命令行,根据提示完成提交

? Select the type of change that you're committing: (Use arrow keys)
❯ feat:        A new feature 
  fix:         A bug fix 
  improvement: An improvement to a current feature 
  docs:        Documentation only changes 
  style:       Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) 
  refactor:    A code change that neither fixes a bug nor adds a feature 
  perf:        A code change that improves performance 
(Move up and down to reveal more choices)

3、commitlint 规范校验
  • 安装
pnpm install -D @commitlint/cli @commitlint/config-conventional
  • 配置

package.json添加如下配置

"commitlint": {
    "extends": [
        "@commitlint/config-conventional"
    ]
}

使用 husky 命令在,创建 commit-msg 钩子,并执行验证命令:

npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

这样就可以在commit-msg,对提交信息进行检查

比如当你去尝试提交一个不规范的message,会阻止提交并报错

subject may not be empty

type may not be empty

➜  vue3-quick-start git:(master) ✗ git commit -m 这是一个错误的提交信息                           
→ No staged files match any configured task.
⧗   input: 这是一个错误的提交信息
✖   subject may not be empty [subject-empty]
✖   type may not be empty [type-empty]

✖   found 2 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

husky - commit-msg hook exited with code 1 (error)

4、版本管理及CHANGELOG

推荐使用 release-it

集成以下功能:

  • Bump version (in e.g. package.json)
  • Git commit, tag, push
  • Execute any (test or build) commands using hooks
  • Create release at GitHub or GitLab
  • Generate changelog
  • Publish to npm
  • Manage pre-releases
  • Extend with plugins
  • Release from any CI/CD environment

规范化的提交信息除了能很好描述项目的修改,还有一个很好的作用就是能根据提交记录来生成CHANGELOG.MD和自动生成版本号等功能。

# Changelog

All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

### 1.0.0 (2022-08-27)

### Features

* init By Vue 3 + TypeScript + Vite ([9487a8b](https://github.com/wei-design/web-vue/commit/9487a8be27d396f6ea96b0ff3b57473325d7f54b))
* 添加github ci ([44d63e2](https://github.com/wei-design/web-vue/commit/44d63e2cb714669945a3d27f99f3148915c904c4))
* 添加husky ([d1150f4](https://github.com/wei-design/web-vue/commit/d1150f47e84dc4ddc0fda5d16bc1ab837b551b05))

### Bug Fixes

* update ci ([278fb38](https://github.com/wei-design/web-vue/commit/278fb3860f460bbbdb045fd2bbe96c9994505d6e))

四、基础配置

1、scss集成

pnpm install -D sass

2、Vite配置

针对打包路径、打包配置、环境变量常量、本地服务做了配置,具体如下:

import { fileURLToPath, URL } from 'node:url'
import { ConfigEnv, defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import dayjs from 'dayjs'
// 引入插件
import VitePluginMetaEnv from 'vite-plugin-meta-env'

const { name: title, version: APP_VERSION } = require('./package.json')

// https://vitejs.dev/config/
export default (configEnv: ConfigEnv) => {
    const { mode } = configEnv
    const env = loadEnv(mode, process.cwd())
    // 增加环境变量
    const metaEnv = {
        APP_VERSION,
        APP_NAME: title,
        APP_BUILD_TIME: dayjs().format('YYYY-MM-DD HH:mm:ss')
    }

    return defineConfig({
        // 设置打包路径
        base: env.VITE_BASE_URL,
        // 插件
        plugins: [
            vue(),
            vueJsx(),
            // 按需导入
            AutoImport({
                resolvers: [ElementPlusResolver()],
                // targets to transform
                include: [
                    /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
                    /\.vue$/,
                    /\.vue\?vue/, // .vue
                    /\.md$/ // .md
                ],

                // global imports to register
                imports: ['vue', 'vue-router'],

                // Filepath to generate corresponding .d.ts file.
                // Defaults to './auto-imports.d.ts' when `typescript` is installed locally.
                // Set `false` to disable.
                dts: './auto-imports.d.ts',

                // Inject the imports at the end of other imports
                injectAtEnd: true,

                // Generate corresponding .eslintrc-auto-import.json file.
                // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
                eslintrc: {
                    enabled: true, // Default `false`
                    filepath: './.eslintrc-auto-import.json' // Default `./.eslintrc-auto-import.json`
                }
            }),
            Components({
                resolvers: [ElementPlusResolver()]
            }),
            // 环境变量
            VitePluginMetaEnv(metaEnv, 'import.meta.env'),
            VitePluginMetaEnv(metaEnv, 'process.env')
        ],
        // 别名
        resolve: {
            alias: {
                '@': fileURLToPath(new URL('./src', import.meta.url))
            }
        },
        // 本地服务配置
        server: {
            headers: {
                'Access-Control-Allow-Origin': '*'
            },
            cors: true,
            open: false,
            port: 5000,
            host: true,
            proxy: {
                '/api': {
                    target: 'https://cloud-app.com.cn/',
                    changeOrigin: true,
                    rewrite: path => path.replace(/^\/api/, '')
                },
                '/amap': {
                    target: 'https://restapi.amap.com/',
                    changeOrigin: true,
                    rewrite: path => path.replace(/^\/amap/, '')
                }
            }
        }
    })
}


3、环境变量与模式

Vite 在一个特殊的 import.meta.env 对象上暴露环境变

默认变量
  • import.meta.env.MODE: {string} 应用运行的模式。

  • import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。

  • import.meta.env.PROD: {boolean} 应用是否运行在生产环境。

  • import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。

  • import.meta.env.SSR: {boolean} 应用是否运行在 server 上。

.env 文件

Vite 使用 dotenv 从你的 环境目录 中的下列文件加载额外的环境变量:

  • 规则如下
.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载,但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载,但会被 git 忽略
  • 配置

添加env.development文件,用于开发环境的配置

# 只在开发模式中被载入

# 网站前缀
VITE_BASE_URL = /

# API - 本地通过/api代理
VITE_API_URL = '/api'

添加env.production文件,用于生产环境的配置

# 只在生产模式中被载入

# 网站前缀
VITE_BASE_URL =  https://cloud-app.com.cn/

# API
VITE_API_URL = 'https://cloud-app.com.cn/'

  • TypeScript 的智能提示

env.d.ts文件中添加

/// <reference types="vite/client" />
interface ImportMetaEnv {
    readonly BASE_URL: string
    readonly MODE: string
    readonly APP_VERSION: string
    readonly APP_NAME: string
    readonly APP_BUILD_TIME: string
    readonly VITE_BASE_URL: string
    readonly VITE_API_URL: string
}

interface ImportMeta {
    readonly env: ImportMetaEnv
}

4、路由自动加载

主要用到了 import.meta.glob

核心代码如下:

import { createRouter, createWebHistory } from 'vue-router'
import type { RouterOptions } from 'vue-router'

// 路由集合
const routes = []

// 匹配到的文件默认是懒加载的,通过动态导入实现,并会在构建时分离为独立的 chunk。如果你倾向于直接引入所有的模块(例如依赖于这些模块中的副作用首先被应用),你可以传入 { eager: true } 作为第二个参数:
const views = import.meta.glob(`@/views/*/index.vue`, { eager: true })

// 动态加载路由
for (const componentPath in views) {
    // 找到example的组件,并加载
    const $component = views[componentPath].default
    // 默认首页必须得
    if ($component && !$component.hidden) {
        const { name, title } = $component
        routes.push({
            path: name === 'HomeView' ? '/' : `/${name}`,
            name: name,
            title,
            component: $component,
            meta: {
                name,
                title
            }
        })
    }
}

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [...routes]
} as RouterOptions)

console.log(routes)

export default router

5、auto-import 使用

unplugin-auto-import

先看下使用效果

这里使用了 onMounted,无需导入,直接使用,对应 element-plusmessage 组件也是

<template>
    <div class="element">
        <el-card header="This is an ElementPlus page">
            <el-button type="primary">ElementPlus</el-button>
        </el-card>
    </div>
</template>
<script setup lang="ts">
    import './index.scss'
    import 'element-plus/es/components/message/style/css'
    import { ElMessage } from 'element-plus'
    onMounted(() => {
        ElMessage.success('ElementPlus page mounted')
    })
</script>

安装
npm i -D unplugin-auto-import
配置
  • vite.config.tsplugins添加

这里只配置了vue和vue-router的auto-import

// vite.config.ts
// 按需导入
{
    plugins: {
        AutoImport({
            // targets to transform
            include: [
                /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
                /\.vue$/,
                /\.vue\?vue/, // .vue
                /\.md$/ // .md
            ],

            // global imports to register
            imports: ['vue', 'vue-router'],

            // Filepath to generate corresponding .d.ts file.
            // Defaults to './auto-imports.d.ts' when `typescript` is installed locally.
            // Set `false` to disable.
            dts: './auto-imports.d.ts',

            // Inject the imports at the end of other imports
            injectAtEnd: true,

            // Custom resolvers, compatible with `unplugin-vue-components`
            // see https://github.com/antfu/unplugin-auto-import/pull/23/
            resolvers: [
                /* ... */
            ],
            
            // Generate corresponding .eslintrc-auto-import.json file.
            // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
            eslintrc: {
                enabled: true, // Default `false`
                filepath: './.eslintrc-auto-import.json' // Default `./.eslintrc-auto-import.json`
            }
        })
    }
}

此时会生成 auto-imports.d.ts.eslintrc-auto-import.json

  • tsconfig.json中include添加

为了代ts提示

"./auto-imports.d.ts"
  • .eslintrc.cjs中extends添加

为了eslint不报错

'./.eslintrc-auto-import.json'
添加 element-plus 的按需引入

element-plus 导入具体查看官网,这里主要说下 auto-import

这里使用到了 unplugin-auto-import 的 Custom resolvers, unplugin-vue-components

  • 首先,安装
npm install -D unplugin-auto-import
  • 配置

vite.config.tsplugins 添加

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
    // ...
    plugins: [
        // 在auto-import的基础上,添加 unplugin-vue-components
        AutoImport({
            // ...
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
    ],
})

:::warning WARNING

如果使用 unplugin-element-plus 并且只使用组件 API,你需要手动导入样式。

Example:

import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'

:::


到此,自动导入的配置完成

遇到的问题

在打包时候报错,相关issue

Module ‘“element-plus”’ has no exported member ‘ElMessage’. Did you mean to use ‘import ElMessage from “element-plus”’ instead?ts`

解决办法:

tsconfig.jsoncompilerOptions 添加

{
    "moduleResolution": "node"
}


axios封装
tools封装

五、自动化

通过 github actions + github pages,实现项目的自动化构建和部署

具体实现见

源码:github

预览:vue3-quick-start


author

原文文章来源地址https://www.toymoban.com/news/detail-571557.html

到了这里,关于Vue3工程化项目搭建的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端工程化 | vue3+ts+jsx+sass+eslint+prettier 配置化全流程

    前端开发是一个工程化的流程。 包括持续集成、持续部署。 我认为集成 的第一方面就是开发,在前端项目开发中,需要保证代码格式规范的统一、代码质量、提交的规划。而这些要求需要通过各种插件来保证规范化和流程化开发。 如何配置这些插件,这些插件各自的功能是

    2024年02月12日
    浏览(40)
  • 【几乎最全/全网最长的 2 万 字】前端工程化完整流程:从头搭到尾(vue3 + vite + qiankun + docker + tailwindcss + iview......)

    使用 Vite + Vue3 + Typescript + axios + echarts + pinia + view-ui-plus + vue-router + less + sass + scss + css + tailwindcss + animate.css + vite-svg-loader + postcss + stylelint + eslint + prettier + autoprefixer + commitizen + commitlint + vite-plugin-compression + vite-plugin-qiankun + Docker + nginx.conf…等等插件,带你从 0 开始一步一步搭

    2024年02月12日
    浏览(65)
  • Vue2向Vue3过度核心技术工程化开发和脚手架

    1.1 开发Vue的两种方式 核心包传统开发模式:基于html / css / js 文件,直接引入核心包,开发 Vue。 工程化开发模式:基于构建工具(例如:webpack)的环境中开发Vue。 工程化开发模式优点: 提高编码效率,比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识

    2024年02月11日
    浏览(53)
  • 前端工程化-VUE

    高效的开发离不开基础工程的搭建。本章主要介绍如何使用Vue进行实际SPA项目的开发,这里使用的是目前热门的JavaScript应用程序模块打包工具Webpack,进行模块化开发、代码编译和打包。 Vue脚手架指的是Vue-cli,它是一个专门为单页面应用快速搭建繁杂程序的脚手架,它可以轻

    2024年02月08日
    浏览(71)
  • pnpm才是前端工程化项目的未来

    相信小伙伴们都接触过 npm/yarn ,这两种包管理工具想必是大家工作中用的最多的包管理工具, npm 作为 node 官方的包管理工具,它是随着node的诞生一起出现在大家的视野中,而 yarn 的出现则是为了解决 npm 带来的诸多问题,虽然 yarn 提高了依赖包的安装速度与使用体验,但它

    2024年02月07日
    浏览(48)
  • vue项目工程化入门

    mac电脑 使用Vue-cli来完成 通过命令先进入到图形化界面,然后再进行vue工程的创建 图形化界面如下: 到此,vue项目创建结束 我们通过VS Code打开之前创建的vue文件夹,打开之后,呈现如下图所示页面: vue项目的标准目录结构以及目录对应的解释如下图所示: 其中我们平时开发

    2024年02月08日
    浏览(51)
  • 探索现代前端工程化工具与流程:提升开发效率和项目质量

    前端工程化是指利用各种工具和技术来提高前端开发效率、代码质量和团队协作的一种开发模式。 它的背景和发展与前端技术的演进密切相关。 在过去,前端开发主要依靠手工编写 HTML、CSS和JavaScript 来构建网页。随着互联网的发展和前端技术的不断演进,前端的工作变得更

    2024年02月14日
    浏览(65)
  • 前端Vue入门-day03-用Vue实现工程化、组件化开发

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 生命周期 Vue 生命周期 和 生命周期的四个阶段  Vue 生命周期函数(钩子函数) 案例-create的应用 案例-mounted的应用 工程化开发 脚手架 Vue CLI 开发 Vue 的两种方式 基本介

    2024年02月15日
    浏览(54)
  • Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署

    Ajax介绍 Axios 案例 前后端分离 前端工程化 环境准备,nodejs安装,D:javaprojectjavawebday03-Vue-Elementday03-Vue-Element资料NodeJS安装文档 Vue项目简介 它本来默认端口号是8080 ,但这就和tomcat冲突了所以修改为7000 Vue项目开发流程 Vue组件库Element pagination分页组件,table表格组件,Dial

    2024年02月05日
    浏览(65)
  • 前端工程化 搭建私有组件库 组件从开发到发布私有npm仓库的全过程

    前言 基于Vue3.0 + TS的组件从开发组件库到发布私有npm仓库的全过程 环境 这里列出本文所使用的环境版本 vue 3.0 vue/cli 4.5.9 nodeJs 14.15.1 npm 6.14.8 vue --version @vue/cli 4.5.9 npm -v 6.14.8 node -v v14.15.1 步骤 创建项目 使用 vue-cli 创建一个 vue3 项目,假设项目名为 avatar-ui-vue vue create avatar-u

    2024年02月02日
    浏览(131)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包