Th技术开发白皮书

介绍

2021/6/13 vue

# 前序准备

你需要在本地安装 node (opens new window) 和 vscode (opens new window)。

本项目技术栈基于 ES2015+ (opens new window)、vue (opens new window)、vuex (opens new window)、vue-router (opens new window) 、vue-cli (opens new window) 、axios (opens new window) 和 element-ui (opens new window)，提前了解和学习这些知识会对使用本项目有很大的帮助。

# Node.js安装

下载地址 (opens new window) 安装稳定版本 ，下载后进入终端查看node版本，输入：node -v

# 查看node版本
node -v
# 查看npm版本
npm -v
# 出现v14.17.0这种打印则代表安装成功

# 开发工具

官方推荐的开发工具有两个，vscode和hbulider x，对于不熟悉前端开发的同事，这里不推荐使用别的开发工具。

本文仅介绍上述两种开发工具的安装及配置，如果对其他开发工作感兴趣的同学自己研究一下。

# 1. Vscode

下载地址 (opens new window)，安装稳定版本，傻瓜式安装，一直点击下一步就可以了

安装完成以后需要在拓展中安装以下第三方插件，安装后需要重启：

插件 作用
Chinese (Simplified) Language Pack for Visual Studio Code 汉化
ESLint 重要代码自动修复，具体配置方法见ESLint (opens new window)
HTML CSS Support html支持
HTML Snippets 代码块
Vetur 高亮和缩进
VueHelper 代码跳转
Auto Rename Tag 标签自动闭合

# 2.Hbulider X

下载地址 (opens new window)，下载后解压打开，注意不要放在中文目录下

打开编辑器，选择工具-插件安装，安装内置插件如下：

Hbulider X插件 来源 作用
内置终端 内部插件 内置终端
git插件 内部插件 git插件
Sass/sass编译 外部插件 sass预编译
Less编译 外部插件 less预编译
eslint-js 外部插件 代码修复
eslint-plugin-vue 外部插件 eslint vue支持

选择工具-设置，设置制表符长度以及空格代替制表符，用于调整tab缩进

img

选择插件配置，勾选以下配置

img

至此，开发工具配置完成

# 目录结构

本项目已经为你生成了一个完整的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据
├── plop-templates             # 基本模板
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── directive              # 全局指令
│   ├── filters                # 全局 filter
│   ├── icons                  # 项目所有 svg icons
│   ├── config                 # router 规则配置
│   ├── core                   # 核心模块全局加载
│   ├── lang                   # 国际化 language
│   ├── layouts                # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json

# 开始开发

# 进入项目目录
cd ith-member
# 项目初始化
npm install
# 或
yarn install
# 本地开发 启动项目 有时也可以使用npm run dev指令，两者的区别是基于脚手架的版本不同
npm run serve
# 终止项目
Ctrl+c
# 项目打包，打包分为测试环境/生产环境，具体可在package.json查找，以下为生产打包，读取的是生产环境变量
npm run build

强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。若还是不行，可使用 yarn (opens new window) 替代 npm。

Windows 用户若安装不成功，很大概率是node-sass安装失败，解决方案 (opens new window)。

# 组件发布私有仓库方式 高阶

1、找到系统用户目录的.npmrc文件，把这段代码直接粘贴到.npmrc文件中

registry=http://192.168.0.114:8888/nexus/content/groups/npm-all/
init.author.name = liguoping
init.author.email = liguoping@itonghui.org
init.author.url = http://www.itonghui.com
# an email is required to publish npm packages
email=liguoping@itonghui.org
always-auth=true
_auth=bGlndW9waW5nOml0b25naHVpMTIz

2、发布命令

#项目工程更目录下 执行发布到私有仓库中
npm publish --registry http://192.168.0.114:8888/nexus/content/repositories/npm-internal/

3、其他镜像切换命令

  • 设置淘宝镜像
npm config set registry https://registry.npmmirror.com
  • 设置npm镜像
npm config set registry https://registry.npmjs.org

# Vue 生态圈

首先了解这些 vue 生态圈的东西，会对你上手本项目有很大的帮助。

  1. Vue官网 (opens new window)初学者一定要看的网站，官网才是最好的指导
  2. Vue Element UI (opens new window)一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
  3. 本框架是对Vue Element Admin (opens new window) 的二次封装，本文中没有找到的信息可在这里尝试查找思路

指南