前端技术栈

0x01 NGINX 的配置说明

# ===== http请求访问80端口
server {
listen 80;
# ===== 服务名称
server_name www.newyetai.com newyetai.com;
# ===== 重定向到https
rewrite ^(.*)$ https://$host$1 permanent;
}
# ===== https请求访问443端口
server {
listen 443 ssl;
# ===== 服务名称
server_name www.newyetai.com newyetai.com;
charset utf-8;
access_log /var/log/nginx/host.access.log main;
# ===== 访问 /login_wechat 的时候解析url，并重定向到serverUrl上
location /login_wechat {
rewrite ^(.*)$ https://$arg_serverUrl#login_success permanent;
}
# ===== 前端项目
location / {
# ===== 访问 / 的时候解析到前端页面上
root /usr/share/nginx/alita-front/;
# ===== 访问资源不存在的时候访问到 @routerback
try_files $uri $uri/ @routerback;
}
# ===== 后端项目
location @routerback {
# ===== 反向代理到docker上
proxy_pass http://127.0.0.1:8082;
proxy_set_header Host $host;
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_connect_timeout 60;
proxy_read_timeout 600;
proxy_send_timeout 600;
}
error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;
}

0x02 概念介绍

nodejs 是什么？

通俗讲，nodejs 就是对谷歌 V8 引擎的一个封装，能运行 js（可以操作系统相关的一些东西，像后端语言一样有线程、IO 流等技术）

webpack 是什么？

用于打包生成 html/css/js 等

npm/npx/yarn 是什么？有什么区别？

可以理解为 mave，npm/npx 是官方的包管理器，npx 是新版优化后的一种新的包管理器，类似 yarn。yarn 是第三方的包管理器，并行下载速度快而且稳定。

vue 是什么？

vue 是一个渐进式的 MVVM 前端框架，页面元素跟数据是分开的，所有的操作都应该只关心数据

vue cli 是什么？

vue cli是用来通过命令行方式来编写 vue 代码的插件

vuepress 是什么？

这是一个将markdown生成html文档的一个框架，可在 markdown 中插入 vue 代码以及组件等

taro 是什么？

这是京东开源的一个框架，可以编写一套前端代码，生成 H5 以及各种小程序，据说还会支持生成 flutter 项目

0x03 开发环境搭建

nodejs 安装

1.首先下载安装稳定版本（LTS 版）的nodejs

# 查看`nodejs`版本
node -v
# 查看`npm`版本
npm -v
# 查看`npx`版本
npx -v

3.安装第三方包管理器yarn（强烈推荐，下载速度快、稳定）

# 全局安装
npx install -g yarn

4.安装@vue/cli(官网：https://cli.vuejs.org/zh/)

这里推荐使用3.10.0版本，因为@vue/cli现在已经是4.x了，但是vue还是2.x，不建议升级最新的

yarn global add @vue/cli@3.10.0

5.安装vuepress(官网：https://cli.vuejs.org/zh/)

yarn global add vuepress

5.安装taro(官网：https://taro-docs.jd.com/taro/)

yarn global add @tarojs/cli

Hello World

# 输入命令创建一个简单的demo，默认就好了
vue create vue-demo
# 进入目录
cd vue-demo
# 启动项目
yarn serve

0x04 前端技术栈

vue

官网：https://cn.vuejs.org/

vue-router

官网：https://cn.vuejs.org/

vuex

官网：https://vuex.vuejs.org/zh/guide/

axios

官网：http://axios-js.com/ 又拍云：https://www.kancloud.cn/yunye/axios/234845/

ant-design-vue

官网：https://www.antdv.com/docs/vue/introduce-cn/

vuepress

官网：https://cli.vuejs.org/zh/

taro

官网：https://taro-docs.jd.com/taro/

vant

官网：https://youzan.github.io/vant-weapp/#/intro

各种配置以及注意事项

  • vue.config.js vue 项目相关的配置，比如后端项目代理、前端项目端口等
  • package.json 项目相关的包以及启动的命令等配置
"scripts": {
// 启动项目，环境变量为dev
"serve": "vue-cli-service serve --mode dev",
// 编译项目，环境变量为test
"test": "vue-cli-service build --mode test",
// 编译项目，环境变量为production
"build": "vue-cli-service build --mode production",
// 诊断项目
"lint": "vue-cli-service lint"
},
  • .env、.env.dev、.env.test 环境配置（自定义的配置必须是以VUE_APP_开头）
  • ant-design-vue 框架中的日期控件使用的 moment.js，所有得到的值为 moment 对象，前端传入后端需要进行转换
  • ant-design-vue 框架中的 switch 控件显示的时候不根据值显示需要进行设置valuePropName
<a-switch v-decorator="['publiced',{ rules: [], valuePropName: 'checked' }]" />
  • ant-design-vue 框架中的表格宽度自适应需要进行设置scroll，注意需留一列不设置宽度以便支持自适应宽度
Edit this page