0-1搭建社区(论坛)

社区论坛

今天，我来开一个新坑，希望可以一直做下去，先说一下用到的技术吧。

后端开发采用：SpringBoot + MyBatis-Plus

前端开发采用：Vue3

移动端使用Uni-app

开发工具

• 后端开发工具使用IDEA，官网地址： [IDEA官网地址]: https://www.jetbrains.com/idea/
• 前端开发工具使用WebStorm，为什么不用VSCode来开发，因为用WebStorm习惯了，[Web官网地址]: https://www.jetbrains.com.cn/webstorm/promo/

环境配置

• Java使用1.8
• NodeJS使用14.x

创建项目

接下来，我们开始创建项目了。

首先我来说一下，因为本人不是很会设计数据库，而正常逻辑是需求分析、数据库设计，我只能反其道而行之，先从页面中搭建，然后使用大量的假数据及假结构，这样如果有什么问题，就不用大量去修改数据库和后台逻辑了，我们只需要修改一下前端假数据和假结构，等页面彻底跑通，我们在去通过这些假结构来构建数据库，这样可以省下很多没必要的时间，当然，如果是公司开发项目，不建议这么去做。

初期配置

如果你是刚刚下载下来的NodeJS，没有进行过配置，请先全局安装yarn，如果喜欢使用npm的，请跳过这一步。

$ npm install yarn -g

接下来，查看yarn是否已经安装成功。

$ yarn --version

如果出现版本号，则说明已经安装成功yarn了。

这时候，部分Win10及Win11的用户可能会出现一个问题：无法加载文件XXXX，因为在此系统上禁止运行脚本。

接下来，需要使用管理员权限打开一个PowerShell，输入以下代码(未出现此错误请跳过):

$ set-ExecutionPolicy RemoteSigned
> 执行策略更改
> 执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险，如 https:/go.microsoft.com/fwlink/?LinkID=135170
中的 about_Execution_Policies 帮助主题所述。是否要更改执行策略?
> [Y] 是(Y)  [A] 全是(A)  [N] 否(N)  [L] 全否(L)  [S] 暂停(S)  [?] 帮助 (默认值为“N”):
$ y

操作完毕之后，重新打开控制台，查看版本即可成功。

接下来，我们需要全局安装@vue/cli：

# 如果使用的是npm包管理器：
$ npm install -g @vue/cli
# 如果使用的是yarn包管理器：
$ yarn global add @vue/cli

安装完成之后看一下安装的版本：

$ vue --version

创建项目

依照上面，我们完成了初步配置，接下来，我们就要开始创建项目了。

请在非C盘下创建一个目录(非必要)，我就在D:\Projects\ICaseProjects这个目录下，打开cmd窗口或PowerShell窗口，输入：

$ vue create my-community
> Please pick a preset:
> Default ([Vue 3] babel, eslint)
> Default ([Vue 2] babel, eslint)
> Manually select features
# 我们选择第三个`Manually select features`，自行配置
> ? Check the features needed for your project: 
> (*) Babel
> ( ) TypeScript
> ( ) Progressive Web App (PWA) Support
> (*) Router
> (*) Vuex
> (*) CSS Pre-processors
> (*) Linter / Formatter
> ( ) Unit Testing
> ( ) E2E Testing
# 空格选择 回车确认
> ? Choose a version of Vue.js that you want to start the project with:
> 3.x
> 2.x
# 选择 3.x
> ? Use history mode for router?
$ n
> ? Pick a CSS pre-processor:
> Sass/SCSS (with dart-sass)
> Less
> Stylus
# 选择 Sass/SCSS (with dart-sass)
> ? Pick a linter / formatter config:
> ESLint + Airbnb config
> ESLint + Standard config
> ESLint + Prettier
# 选择Pick a linter / formatter config:
> ? Pick additional lint features:
> (*