我想使用MEVN Stack在Vue中创建完整的堆栈。第1部分
MEVN堆栈是什么？
这就是MEVN堆栈
MEVN STACK 是指一个技术栈，包括 MongoDB、Express、Vue 和 Node.js。
-
- Mongodb
-
- Express
-
- Vue.js
- Node.js
取名于它们的首字母。
同样地，也有类似的MEAN STACK（Mongodb、Express、AngularJS、Node.js）。
在Qiita上，虽然有关于MEAN的内容，但却没有关于MEVN的，所以我希望从今往后可以努力写作。
如果你觉得有点喜欢的话，请给予我「Looks Good To Me!」，这将激励我！
如果這樣構成的話，就可以實現。
关于每个人的角色。
構築方式如下所示。
环境建设
■行为背景
操作系统：macOS Catalina 10.15.6
Node版本：v13.8.0
Vue版本：@vue/cli 4.2.2
MongoDB版本：v4.2.3
启动 MongoDB
在终端上执行以下命令以启动mongodb。根据路径中提到的地方，创建一个名为”mongod.conf”的文件，并进行必要的设置。
hoge@hoge-MacBook-Air hoge %mongod --config /usr/local/etc/mongod.conf
我将源代码的项目存储在documents文件夹下，所以在storage中创建了一个名为data的文件夹，用于存储数据库的数据。你可以自由地更改路径。
systemLog:
destination: file
path: /usr/local/var/log/mongodb/mongo.log
logAppend: true
storage:
dbPath: /Users/Seastar/Documents/data/db
net:
bindIp: 127.0.0.1
一旦MongoDB启动完成，就开始创建应用程序项目！
创建项目
由于此次是以“hoge”为名创建的，请根据需要进行更改。
hoge@hoge-MacBook-Air documents %mkdir hoge && cd hoge
hoge@hoge-MacBook-Air hoge %npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (hoge)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/hoge/Documents/hoge/package.json:
{
"name": "hoge",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes) y
╭────────────────────────────────────────────────────────────────╮
│ │
│ New minor version of npm available! 6.13.6 → 6.14.7 │
│ Changelog: https://github.com/npm/cli/releases/tag/v6.14.7 │
│ Run npm install -g npm to update! │
│ │
╰────────────────────────────────────────────────────────────────╯
当成功执行以上命令后，将在hoge文件夹下创建一个名为”package.json”的文件。
在确认创建成功后，请继续执行以下命令。
hoge@hoge-MacBook-Air hoge %npm install express bcryptjs passport passport-jwt jsonwebtoken mongoose body-parser cors concurrently mongodb
hoge@hoge-MacBook-Air hoge % npm i -D nodemon
每个人的职责如下
-
- express
Node.jsのフレームワークの一つ
サーバーサイド処理を書くために必要
bcryptjs
パスワードなどをハッシュ化するため
passport
認証機能を実装するため
passport-jwt
passport JSON Web Tokeで電子署名付きのJsonで改ざんチェック
jsonwebtoken
JSON Web Tokeでのチェック
mongoose
mongodbへの操作のため。ちなみにマングース
body-parser
formの入力値を受け取るため
cors
Cross-Origin Resource Sharing
concurrently
npmのコマンドをサーバー側とフロント側で同時に実行するため
mongodb
mongodbを操作するためにドライバーが必要
nodemon
アプリケーションのコードの変更を監視し、変更があった際に自動でサーバーの再起動をしてくれるツー
随后，创建一个名为“server”的文件夹和一个名为“client”的Vue客户端。
hoge@hoge-MacBook-Air hoge % mkdir server
hoge@hoge-MacBook-Air hoge % vue create client
Vue CLI v4.2.2
┌─────────────────────────────────────────┐
│ │
│ New version available 4.2.2 → 4.4.6 │
│ Run npm i -g @vue/cli to update! │
│ │
└─────────────────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No
....省略.....
? Successfully created project client.
? Get started with the following commands:
$ cd client
$ npm run serve
hoge@hoge-MacBook-Air hoge %cd client
hoge@hoge-MacBook-Air client %npm i axios
hoge@hoge-MacBook-Air client %cd ../
hoge@hoge-MacBook-Air hoge %cd server
hoge@hoge-MacBook-Air server %touch index.js
这篇文章到此为止。
由于篇幅较长，本次将到此为止。下次我们将制作具体的代码。
