【Vuejs】2023- Vue3 項目前端 CI/CD 體驗

1. 環(huán)境準備

?  app-cicd node --version
v18.0.0
?  app-cicd npm --version
9.6.6

2. 安裝

2.1 初始化選項

項目初始化選擇。

?  app-cicd npm init vue@latest

Vue.js - The Progressive JavaScript Framework

? Project name: … app-cicd
? 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? ? No
? Add ESLint for code quality? … No / Yes
? Add Prettier for code formatting? … No / Yes

Scaffolding project in /Users/UserName/GitLabProjects/app-cicd...

Done. Now run:

  cd app-cicd
  npm install
  npm run format
  npm run dev

2.2 項目運行

按照命令行指示 npm run dev。

?  app-cicd npm run dev

> [email protected] dev
> vite

  VITE v4.3.5  ready in 1161 ms

  ?  Local:   http://localhost:5173/
  ?  Network: use --host to expose
  ?  press h to show help
? [ERROR] Could not resolve "vue-demi"

    node_modules/pinia/dist/pinia.mjs:6:206:
      6 │ import { getCurrentInstance, inject, toRaw, watch, unref, markRaw, effectScope, ref, isVue2, isRef, isReactive, set, getCurrentScope, onScopeDispose, reactive, toRef, del, nextTick, computed, toRefs } from 'vue-demi';
        ?                                                                                                                                                                                                               ~~~~~~~~~~

  You can mark the path "vue-demi" as external to exclude it from the bundle, which will remove this
  error.

出現(xiàn)以上錯誤修改，結(jié)合 vue-demi 配置說明^[1] ，修改 package-lock.json，找到 vue-demi

"dependencies": {
  "@vue/devtools-api": "^6.5.0",
  "vue-demi": "latest" # “*” 改為 “l(fā)atest”
},
"funding": {
  "url": "https://github.com/sponsors/posva"
},
"peerDependencies": {
  "@vue/composition-api": "^1.4.0",
  "typescript": ">=4.4.4",
  "vue": "^2.6.14 || ^3.2.0"
},
"peerDependenciesMeta": {
  "@vue/composition-api": {
    "optional": true
  },
  "typescript": {
    "optional": true
  }
},
# 新增配置
"devDependencies": {
  "vue": "^3.0.0"
}

再 npm run dev ，成功！

?  app-cicd npm run dev

> [email protected] dev
> vite
VITE v4.3.5  ready in 296 ms

  ?  Local:   http://localhost:5173/
  ?  Network: use --host to expose
  ?  press h to show help

瀏覽器訪問 http://localhost:5173/^[2]

3. 項目構(gòu)建

因為要測試我們自己的網(wǎng)頁，小小 build 一下。

?  app-cicd npm run build

> [email protected] build
> run-p type-check build-only

> [email protected] build-only
> vite build

> [email protected] type-check
> vue-tsc --noEmit -p tsconfig.vitest.json --composite false

vite v4.3.5 building for production...
? 39 modules transformed.
dist/assets/logo-277e0e97.svg        0.28 kB │ gzip:  0.20 kB
dist/index.html                      0.42 kB │ gzip:  0.28 kB
dist/assets/AboutView-4d995ba2.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-4646de73.css       3.14 kB │ gzip:  1.08 kB
dist/assets/AboutView-b87b23ac.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-f6d09a3d.js       76.05 kB │ gzip: 30.49 kB
? built in 586ms
node_modules/@types/node/fs/promises.d.ts:199:52 - error TS1010: 

199          * device. The specific implementation is o

Found 1 error in node_modules/@types/node/fs/promises.d.ts:199

ERROR: "type-check" exited with 2.

出現(xiàn)以上錯誤，按照提示，仔細查看發(fā)現(xiàn)注釋符號未閉合。npm install --save @types/node 一下，再次 npm run build ，成功構(gòu)建。

?  app-cicd npm install --save @types/node
npm notice Beginning October 4, 2021, all connections to the npm registry - including for package installation - must use TLS 1.2 or higher. You are currently using plaintext http to connect. Please visit the GitHub blog for more information: https://github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/
npm notice Beginning October 4, 2021, all connections to the npm registry - including for package installation - must use TLS 1.2 or higher. You are currently using plaintext http to connect. Please visit the GitHub blog for more information: https://github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/

changed 1 package in 8s

111 packages are looking for funding
  run `npm fund` for details
?  app-cicd npm run build

> [email protected] build
> run-p type-check build-only

> [email protected] build-only
> vite build

> [email protected] type-check
> vue-tsc --noEmit -p tsconfig.vitest.json --composite false

vite v4.3.5 building for production...
? 39 modules transformed.
dist/assets/logo-277e0e97.svg        0.28 kB │ gzip:  0.20 kB
dist/index.html                      0.42 kB │ gzip:  0.28 kB
dist/assets/AboutView-4d995ba2.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-4646de73.css       3.14 kB │ gzip:  1.08 kB
dist/assets/AboutView-b87b23ac.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-f6d09a3d.js       76.05 kB │ gzip: 30.49 kB
? built in 578ms

4. 創(chuàng)建 Jenkinsfile

創(chuàng)建 Jenkinsfile 用于 Jenkins 流水線構(gòu)建。

pipeline {
    agent any
    
    options {
        buildDiscarder(logRotator(numToKeepStr: '5'))
    }

    stages {
      stage('Init') {
            steps {
              script {
                checkout scmGit(
                  branches: [[name: 'master']],
                  userRemoteConfigs: [[credentialsId: 'ab8e0508-a9f3-4ff3-aa18-0afc27a4df08',url: 'http://192.168.2.159:9080/web/app-cicd.git']])
                sh 'pwd && ls -l'
              }
                // 
            }
        }
        
        stage('Build') {
            steps {
              script {
                echo "Build project"
                sh 'node --version && npm --version'
                sh 'npm install'
                sh 'npm run build'
                sh 'ls -l'
              }
            }
        }

        stage('Test') {
            steps {
              script {
                echo "Test project"
              }
            }
        }

        stage('Deploy') { 
            steps {
              script {
                echo "Deploy project"
                if(fileExists('/Users/username/apps/app-cicd')) {
                  sh 'rm -rf /Users/username/apps/app-cicd'
                }
                echo "Deploy project inited"
                sh 'mv dist/ /Users/username/apps/app-cicd'
                sh 'ls /Users/username/apps/app-cicd'
                echo "Deploy project finished"
              }
            }
        }
    }
}

整體目錄結(jié)構(gòu)。

?  app-cicd git:(master) ls -l
total 368
-rw-r--r--    1 paxtonx  staff    1432  5 13 11:26 Jenkinsfile
-rw-r--r--    1 paxtonx  staff    1763  5 12 23:56 README.md
drwxr-xr-x    5 paxtonx  staff     160  5 13 02:39 dist
-rw-r--r--    1 paxtonx  staff      38  5 12 23:56 env.d.ts
-rw-r--r--    1 paxtonx  staff     331  5 12 23:56 index.html
drwxr-xr-x  335 paxtonx  staff   10720  5 13 00:44 node_modules
-rw-r--r--    1 paxtonx  staff  140945  5 13 02:39 package-lock.json
-rw-r--r--    1 paxtonx  staff    1196  5 13 02:39 package.json
drwxr-xr-x    3 paxtonx  staff      96  5 12 23:56 public
drwxr-xr-x    9 paxtonx  staff     288  5 12 23:56 src
-rw-r--r--    1 paxtonx  staff     281  5 13 02:16 tsconfig.app.json
-rw-r--r--    1 paxtonx  staff     332  5 13 02:37 tsconfig.json
-rw-r--r--    1 paxtonx  staff     241  5 13 02:15 tsconfig.node.json
-rw-r--r--    1 paxtonx  staff     153  5 13 02:16 tsconfig.vitest.json
-rw-r--r--    1 paxtonx  staff     355  5 13 02:18 vite.config.ts
-rw-r--r--    1 paxtonx  staff     400  5 12 23:56 vitest.config.ts

5. 結(jié)語

將此項目推送到遠程 GitLab 倉庫中，備用。這里介紹了 Vue3 的一些基本使用，如項目安裝、構(gòu)建，然后介紹了 Jenkinsfile 的編寫。時間關(guān)系呢，過程較為省略。畢竟大佬說 "Talk is cheap. Show me the code." - Linus Torvalds

6. 參考資料

www.jenkins.io/zh/doc/book…^[3]

plugins.jenkins.io/git/#plugin…^[4]

plugins.jenkins.io/nodejs/^[5]