- The project is structured using Ant Design Pro
Proto directory, used to store proTO, proTO can be managed in a unified git, as the child git of the front and back end projects
- Proto generates code scripts
protogen.sh
#! /bin/bash
PROJ_ROOT="$(dirname "$(readlink "$0")")"
mkdir -p ${PROJ_ROOT}/src/grpc/server/_proto
mkdir -p ${PROJ_ROOT}/src/grpc/client/_proto
Yarn add protoc-gen-ts
# the back-end go get -u github.com/golang/protobuf/protoc-gen-go
protoc \
-I ${PROJ_ROOT}/proto \
--js_out=import_style=commonjs:${PROJ_ROOT}/src/grpc/client/_proto \
--grpc-web_out=import_style=typescript,mode=grpcwebtext:${PROJ_ROOT}/src/grpc/client/_proto \
${PROJ_ROOT}/proto/bbcloud/*.proto
Copy the code
Add scripts to package.json to generate code
"grpc:generate": "bash protogen.sh"
Copy the code
Generated code
Js generated code that ide does not recognize very well, not easy to import, so generate ts version
Do not delete generated JS, do not delete generated JS, do not delete generated JS
The IDE already recognizes imports automatically
- Introduce typescript support
Install dependencies
NPM install typescript [email protected] --save-dev
// vue.config.js
const vueConfig = {
configureWebpack: {
resolve: { extensions: ['.ts'.'.tsx']},module: {
rules: [{test: /\.ts$/, loader: 'ts-loader'}},// webpack plugins
Copy the code
tsconfig.json
{
"compilerOptions": {
"target": "es5"."module": "commonjs"."noImplicitAny": true."removeComments": true."preserveConstEnums": true."sourceMap": false
},
"include": ["src/**/*"]."exclude": ["node_modules"."**/*.spec.ts"]}Copy the code
You’re done
For information on how to use grpc-Web in Vue, see: juejin.cn/post/697733…
Refer to the article: blog.csdn.net/mouday/arti…