前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
腾讯云架构师技术同盟
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP腾讯云架构师技术同盟
返回腾讯云官网
社区首页 >专栏 >从0到1！萌新跟着操作也能学会的保姆级全栈项目开发实录一：项目初始化配置

从0到1！萌新跟着操作也能学会的保姆级全栈项目开发实录一：项目初始化配置

作者头像
Qiuner
发布于 2024-10-22 15:51:07
发布于 2024-10-22 15:51:07
14700
代码可运行
举报
文章被收录于专栏：杂烩杂烩
运行总次数：0
代码可运行

前言

  • bbs，中文全称是电子公告板系统，提供了一块公共的电子公告板，让用户可以在上面发布信息、交流、讨论。本系列博客，带大家使用若依来编写一个bbs，包含帖子、长文、视频、投票发布，用户生成内容发布后百度云智能审核与违规词库等……逐步逐句地深入浅出，是新手学习的不二之选

第一章：项目初始化配置

前端部分

技术选型

  • 前端：uniapp+vue3+pinia+ts
  • 后端：若依+MyBatisPlus

拉取项目初始化代码 并进行基础的项目配置

1、拉取初始化代码
image-20240801232401116
image-20240801232401116
image-20240801232442696
image-20240801232442696
  • 通过机器认证后，直接开始查看
image-20240801232514184
image-20240801232514184
  • 解压项目，然后将文件名改成你想要的
  • 也可也使用git操作，找到空白文件夹后，进入命令行输入以下代码
代码语言：javascript
代码运行次数：0
复制
git clone https://gitee.com/dcloud/uni-preset-vue
2、打开项目
image-20240801232747917
image-20240801232747917
  • 可以看到项目有报错，我们不要管，直接按照下图操作
image-20240801232833148
image-20240801232833148
代码语言：javascript
代码运行次数：0
复制
pnpm i
  • 然后关闭VSCode，再次打开。因为VSCode索引编制比较差，所以需要你手动关闭，然后再重启
pnpm i报错，或项目初始代码无法跑通
  • 这个是你node.js 环境问题，具体解决办法为
image-20240801224741285
image-20240801224741285
  • 输入以下查看 node.js版本
代码语言：javascript
代码运行次数：0
复制
node -v
image-20240801224814749
image-20240801224814749
  • 版本要18左右比较合适，Node.js 是现代前端开发工具链的重要组成部分。如果你发现同样的代码，在别人手上不会有问题，但在你电脑运行不起来，那就基本是你电脑代码运行环境配置有问题。
如果你的node.js 环境在20左右，那就得换了。以下是具体的更换流程
  • 博客链接（待写）

3、解决项目报错与下载微信开发者工具

解决报错
image-20240804220746338
image-20240804220746338
代码语言：javascript
代码运行次数：0
复制
{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": ["@dcloudio/types"]
  },
  "vueCompilerOptions": {
    "nativeTags": ["block", "component", "template", "slot"]
  }, 
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

重点代码为以下

代码语言：javascript
代码运行次数：0
复制
  "vueCompilerOptions": {
    "nativeTags": ["block", "component", "template", "slot"]
  },
  • 加上后再重启vscode，即可发现项目不再报错，在这里，我们直接一次性将需要的东西写出来、、
代码语言：javascript
代码运行次数：0
复制
{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "moduleResolution": "node",
    "paths": {
      "@/*": ["./src/*"]
    },
    "types": ["@dcloudio/types", "miniprogram-api-typings", "@uni-helper/uni-app-types"],
    "allowJs": true,
    "sourceMap": true,
    "skipLibCheck": true
  },
  "vueCompilerOptions": {
    "nativeTags": ["block", "component", "template", "slot"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

具体解释

配置项

值

说明

extends

@vue/tsconfig/tsconfig.json

继承 Vue 官方的 TypeScript 配置文件

compilerOptions.lib

["esnext", "dom"]

指定编译所需的库

"esnext"

使用 ECMAScript 最新版本的功能

"dom"

包含 DOM API

compilerOptions.baseUrl

"."

基础路径，通常用于解析非相对模块的导入

compilerOptions.moduleResolution

"node"

指定模块解析策略，使用 Node.js 的模块解析逻辑

compilerOptions.paths

{"@/*": ["./src/*"]}

模块路径别名，将 @/ 映射到 ./src/ 目录下的文件

compilerOptions.types

["@dcloudio/types", "miniprogram-api-typings", "@uni-helper/uni-app-types"]

指定要包含的类型声明文件

"@dcloudio/types"

包含 DCloud 平台的类型定义

"miniprogram-api-typings"

包含小程序 API 的类型定义

"@uni-helper/uni-app-types"

包含 Uni-App 的类型定义

compilerOptions.allowJs

true

允许编译 JavaScript 文件

compilerOptions.sourceMap

true

生成源映射文件

compilerOptions.skipLibCheck

true

跳过库文件的类型检查

vueCompilerOptions.nativeTags

["block", "component", "template", "slot"]

指定 Vue 模板中的原生标签

include

["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]

包含在编译中的文件或目录

"src/**/*.ts"

包含 src 目录下所有的 .ts 文件

"src/**/*.d.ts"

包含 src 目录下所有的 .d.ts 文件

"src/**/*.tsx"

包含 src 目录下所有的 .tsx 文件

"src/**/*.vue"

包含 src 目录下所有的 .vue 文件

下载微信开发者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

4、运行项目

代码语言：javascript
代码运行次数：0
复制
pnpm dev:mp-weixin
image-20240804222157104
image-20240804222157104
image-20240804222320376
image-20240804222320376
image-20240804222734075
image-20240804222734075
image-20240804222806387
image-20240804222806387
image-20240804223043156
image-20240804223043156

尝试修改项目，体验快捷变化

image-20240804223211524
image-20240804223211524
image-20240804223310187
image-20240804223310187

5、安装AI

image-20240804223431305
image-20240804223431305
  • 安装完后，重新启动vscode
  • 接下来，你打代码就会出现提示了
image-20240804224706032
image-20240804224706032
  • 点击tab键补全
image-20240804224806585
image-20240804224806585

注意

  • 下面的配置你可以直接访问gitee，然后下载，当然也可以自己操作一下

6、使用ESLint

  • 在项目中添加.eslintignore，.eslintignore 文件的作用是指定 ESLint 在进行代码检查时应忽略的文件和目录。
  • 项目中有个 .gitignore 文件，也是类似功能，是用来忽略使用git的时候上传
  • 具体的使用看我其他文章 https://juejin.cn/post/7399478677397094435

7、使用Prettier

  • 用这个来实现自动格式化，大大减少编码时间
  • 具体看我其他文章

8、添加VScode配置

image-20240805164220773
image-20240805164220773
  • 如何新建以上文件
代码语言：javascript
代码运行次数：0
复制
extensions.json
代码语言：javascript
代码运行次数：0
复制
settings.json
  • 这两个文件的作用是：保证所有打开这个项目的时候，都能实现看到的是统一的

9、更换其他的配置项

vite.config.ts

代码语言：javascript
代码运行次数：0
复制
import { resolve } from 'node:path'

import { defineConfig } from 'vite'
import Uni from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    Uni(),
    AutoImport({
      dts: './src/types/auto-imports.d.ts',
      imports: ['vue', 'pinia'],
      dirs: ['src/utils', 'src/hooks'],
    }),
  ],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: resolve(__dirname, './src'),
      },
    ],
    extensions: ['ts', 'tsx', '.json', '.vue'],
  },
  build: {
    // 开发阶段启用源码映射：https://uniapp.dcloud.net.cn/tutorial/migration-to-vue3.html#需主动开启-sourcemap
    sourcemap: process.env.NODE_ENV === 'development',
  },
})

tsconfig.json

代码语言：javascript
代码运行次数：0
复制
{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    // 修复：替换弃用的选项
    "verbatimModuleSyntax": true,
    // 新增：消除弃用警告
    "ignoreDeprecations": "5.0",
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "moduleResolution": "node",
    "paths": {
      "@/*": ["./src/*"]
    },
    "types": ["@dcloudio/types", "miniprogram-api-typings", "@uni-helper/uni-app-types"],
    "allowJs": true,
    "sourceMap": true,
    "skipLibCheck": true
  },
  "vueCompilerOptions": {
    // experimentalRuntimeMode 已废弃，现调整为 nativeTags，请升级 Volar 插件至最新版本
    "nativeTags": ["block", "component", "template", "slot"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

package.json

代码语言：javascript
代码运行次数：0
复制
{
  "name": "fuxincampusconnect",
  "version": "0.0.0",
  "author": {
    "name": "Qiuner"
  },
  "keywords": [
    "福信校园通"
  ], 
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "dev:app": "uni -p app",
    "dev:app-android": "uni -p app-android",
    "dev:app-ios": "uni -p app-ios",
    "dev:custom": "uni -p",
    "dev:h5": "uni",
    "dev:h5:ssr": "uni --ssr",
    "dev:mp-alipay": "uni -p mp-alipay",
    "dev:mp-baidu": "uni -p mp-baidu",
    "dev:mp-jd": "uni -p mp-jd",
    "dev:mp-kuaishou": "uni -p mp-kuaishou",
    "dev:mp-lark": "uni -p mp-lark",
    "dev:mp-qq": "uni -p mp-qq",
    "dev:mp-toutiao": "uni -p mp-toutiao",
    "dev:mp-weixin": "uni -p mp-weixin",
    "dev:mp-xhs": "uni -p mp-xhs",
    "dev:quickapp-webview": "uni -p quickapp-webview",
    "dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
    "dev:quickapp-webview-union": "uni -p quickapp-webview-union",
    "build:app": "uni build -p app",
    "build:app-android": "uni build -p app-android",
    "build:app-ios": "uni build -p app-ios",
    "build:custom": "uni build -p",
    "build:h5": "uni build",
    "build:h5:ssr": "uni build --ssr",
    "build:mp-alipay": "uni build -p mp-alipay",
    "build:mp-baidu": "uni build -p mp-baidu",
    "build:mp-jd": "uni build -p mp-jd",
    "build:mp-kuaishou": "uni build -p mp-kuaishou",
    "build:mp-lark": "uni build -p mp-lark",
    "build:mp-qq": "uni build -p mp-qq",
    "build:mp-toutiao": "uni build -p mp-toutiao",
    "build:mp-weixin": "uni build -p mp-weixin",
    "build:mp-xhs": "uni build -p mp-xhs",
    "build:quickapp-webview": "uni build -p quickapp-webview",
    "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
    "build:quickapp-webview-union": "uni build -p quickapp-webview-union",
    "type-check": "vue-tsc --noEmit"
  },
  "dependencies": {
    "@dcloudio/uni-app": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-app-plus": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-components": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-h5": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-mp-alipay": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-mp-baidu": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-mp-jd": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-mp-lark": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-mp-qq": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-mp-toutiao": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-mp-weixin": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-mp-xhs": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-ui": "^1.5.5",
    "pinia": "2.0.27",
    "pinia-plugin-persistedstate": "^3.2.0",
    "vue": "^3.2.47",
    "vue-i18n": "^9.2.2",
    "vue-router": "^4.4.2"
  },
  "devDependencies": {
    "@dcloudio/types": "^3.3.3",
    "@dcloudio/uni-automator": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-cli-shared": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-stacktracey": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-vue-devtools": "3.0.0-alpha-3080220230511001",
    "@dcloudio/vite-plugin-uni": "3.0.0-alpha-3081220230802001",
    "@rushstack/eslint-patch": "^1.1.4",
    "@types/node": "^18.11.9",
    "@uni-helper/uni-app-types": "^0.5.8",
    "@uni-helper/uni-ui-types": "^0.5.11",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.0",
    "eslint": "^8.22.0",
    "eslint-plugin-vue": "^9.3.0",
    "husky": "^8.0.0",
    "lint-staged": "^13.0.3",
    "miniprogram-api-typings": "^3.12.0",
    "prettier": "^2.7.1",
    "sass": "^1.56.1",
    "sass-loader": "10.1.1",
    "typescript": "^5.1.6",
    "unplugin-auto-import": "^0.17.6",
    "vite": "^4.4.9",
    "vue-tsc": "^1.8.8"
  }
}
  • 更新完以上配置后，在命令行中使用一下命令更新依赖来解决项目的报错
代码语言：javascript
代码运行次数：0
复制
pnpm i
pnpm add unplugin-auto-import -D
  • 做完以上事情后重启项目

10、安装插件

image-20240805172233956
image-20240805172233956
  • 如图，分别安装以上这些插件
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2024-10-21，如有侵权请联系 cloudcommunity@tencent.com 删除
build
src
开发
配置
全栈

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

build
src
开发
配置
全栈
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
目录
  • 前言
  • 第一章：项目初始化配置
  • 前端部分
    • 技术选型
    • 拉取项目初始化代码 并进行基础的项目配置
      • 1、拉取初始化代码
      • 2、打开项目
    • 3、解决项目报错与下载微信开发者工具
      • 解决报错
      • 下载微信开发者工具
    • 4、运行项目
    • 5、安装AI
  • 注意
    • 6、使用ESLint
    • 7、使用Prettier
    • 8、添加VScode配置
    • 9、更换其他的配置项
    • 10、安装插件
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2025 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论