Vue进阶之Vue无代码可视化项目（一）

VillanelleS

已于 2024-05-31 08:53:30 修改

阅读量926

点赞数 22

分类专栏： Vue3基础前端文章标签： vue.js arcgis 前端

于 2024-05-31 00:51:59 首次发布

本文链接：https://blog.csdn.net/qq_34306228/article/details/139282768

版权

本文介绍了Vue项目的搭建过程，包括初始步骤、拓展的工程项目从0-1的建设，以及项目规范化，涉及npm源设置、模块化设计、webpack与vite的使用、eslint与spellcheck配置、git钩子、husky操作、commit规范等，旨在实现高效的团队协作和项目管理。

摘要由CSDN通过智能技术生成

项目搭建

初始步骤

npm create vue@latest

在这里插入图片描述

pnpm i

项目基础架子
在这里插入图片描述
查看npm下载源：

npm config get registry

设置npm官方下载源

npm config set registry https://registry.npmjs.org

请添加图片描述

拓展：工程项目从0-1

全程参与了 - 把控/管控App的生命周期
细分周期

需求评审
方案评审
实际开发
模块化设计-项目架子搭建
webpack
vite
turbopack
rspack
打包构建
模块选择
nest.js
luck.js
ssr的结构
客户端渲染结构
多页的结构
构建的脚本
webpack watch
webpack build命令
webpack大量用到loader-plugin
vite也要大量用到vite-plugin
考虑团队规范，eslint、spell-lint、spell-check等等
git规范决定协同开发的范式、也决定了上线的节奏（两周做了一个发布，第一周开发周、第二周测试修bug）
功能提测，代码review，通过分支管控实现
比如，master是线上主分支，其他的开发基于features开发，合并到测试环境，tr到测试环境，测试的时候要做到归档处理，打tag
后续部署到CI/CD。资源是否需要传到os，是否用cdn加速。
构建过程中，是用什么形式构建的，docker镜像部署，还是用静态资源部署的方式，这种一般结合nginx做反向代理的。
现在基本上整个项目上线成功了
后续做版本控制，版本迭代所有的功能。

项目规范化

除了已有的基础架子之外，还要在这基础上再加一些规范化的产物

package.json

scripts:{
   
	...
	"lint:style":"stylelint \"src/**/*.{vue,css}\" --fix",
	"spellcheck":"cspell \"src/**/*.{vue,ts,tsx}\""
}
"devDependencies": {
   
	 "stylelint":"16.2.1",
	 "cspell":"8.6.0"
}

创建cpell.json文件：
创建custom-words.txt

cspell.json
.cspell
- custom-words.txt

cpell.json

{
   
    "import": ["@cspell/dict-lorem-ipsum/cspell-ext.json"],
    "caseSensitive": false,
    "dictionaries": ["custom-words"],
    "dictionaryDefinitions": [
      {
   
        "name": "custom-words",
        "path": "./.cspell/custom-words.txt",
        "addWords": true
      }
    ],
    "ignorePaths": ["**/node_modules/**", "**/dist/**", "**/lib/**", "**/docs/**", "**/stats.html","**/detect.ts"]
  }

custom-words.txt

byelide
pinia
rushstack
stylelint

在这里插入图片描述

固定版本：版本前面"^"符号去掉：
请添加图片描述
版本统一：
package.json:

{
   
  "name": "byelide",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
   
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "test:unit": "vitest",
    "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/",
    "lint:style":"stylelint \"src/*

最低0.47元/天解锁文章