1. 环境准备
代码语言：javascript复制➜ app-cicd node --version
v18.0.0
➜ app-cicd npm --version
9.6.6
2. 安装
2.1 初始化选项
项目初始化选择。
代码语言：javascript复制➜ 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
> app-cicd@0.0.0 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.
出现以上错误修改，结合 vue-demi 配置说明[1] ，修改 package-lock.json，找到 vue-demi
代码语言：javascript复制"dependencies": {
"@vue/devtools-api": "^6.5.0",
"vue-demi": "latest" # “*” 改为 “latest”
},
"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
> app-cicd@0.0.0 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]
Untitled.png
3. 项目构建
因为要测试我们自己的网页，小小 build 一下。
代码语言：javascript复制➜ app-cicd npm run build
> app-cicd@0.0.0 build
> run-p type-check build-only
> app-cicd@0.0.0 build-only
> vite build
> app-cicd@0.0.0 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.
出现以上错误，按照提示，仔细查看发现注释符号未闭合。npm install --save @types/node 一下，再次 npm run build ，成功构建。
➜ 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
> app-cicd@0.0.0 build
> run-p type-check build-only
> app-cicd@0.0.0 build-only
> vite build
> app-cicd@0.0.0 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. 创建 Jenkinsfile
创建 Jenkinsfile 用于 Jenkins 流水线构建。
代码语言：javascript复制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"
}
}
}
}
}
整体目录结构。
代码语言：javascript复制➜ 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. 结语
将此项目推送到远程 GitLab 仓库中，备用。这里介绍了 Vue3 的一些基本使用，如项目安装、构建，然后介绍了 Jenkinsfile 的编写。时间关系呢，过程较为省略。毕竟大佬说 "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]
