hlcs-web v0.1.0

项目简介

基于 vue3.js 的前端开发环境，用于前后端分离后的单页应用开发，可以在开发时使用 TS、lsee 等最新语言特性。项目包含：

• 基础库: vue3.js、vue-router、vuex、Ant Design
• 编译/打包工具：webpack、babel、less

目录结构

├── dist                            生成打包后文件
├── node_modules                    安装的依赖包
├── public                          构建模板资源   
├── src                             源码目录    
│   ├── api                             与后端交互使用相关方法和配置（接口）
│   ├── assets                          资源目录，这里的资源会被wabpack构建
│   │   └── fonts
│   │   └── img
│   │   └── icons                    
│   │   └── js                    
│   ├── components                      公共组件目录
│   ├── routes                          前端路由
│   │   └── index.js
│   ├── store                           Vuex相关配置（状态管理）
│   │   └── index.js
│   ├── utils                           存放除api以外的公共文档
    │   │   └── index.js
│   └── views                           页面目录
│       ├── hello.vue
│       └── notfound.vue
│   ├── App.vue                          主模块（路由组件的顶层路由）
│   ├── main.ts                          vue入口文件
├── tsconfig.json                        配置ts文件的规则
├── vue.config.js                        项目主要配置
├── package.json                    npm包配置文件，里面定义了项目的npm脚本，依赖包等信息

环境安装

本项目依赖 node.js， 使用前先安装 node.js 和 cnpm（显著提升依赖包的下载速度）。 1. 自行下载并安装 node.js： https://nodejs.org/en/download/ 2. 然后安装 cnpm 命令：

    npm install -g cnpm --registry=https://registry.npm.taobao.org

快速开始

git clone http://10.1.102.37:8081/hlcs/hlcs-web.git
cd hlcs-web
npm install
npm run serve

命令列表：

#开启本地开发服务器，监控项目文件的变化，实时构建并自动刷新浏览器，浏览器访问 http://localhost:8080
npm run serve

#使用生产环境配置构建项目，构建好的文件会输出到 "dist" 目录，
npm run build

#运行构建服务器，可以查看构建的页面
npm run build-server

#运行单元测试
npm run unit

模块化

开发时可以使用 ES2015 module 语法，构建时每个文件会编译成 amd 模块。

组件化

整个应用通过 vue 组件的方式搭建起来，通过 vue-router 控制相应组件的展现，组件树结构如下：

app.vue                         根组件（整个应用只有一个）
    ├──view1.vue                    页面级组件，放在 views 目录里面，有子组件时，可以建立子目录
    │   ├──component1.vue               功能组件，公用的放在 components 目录，否则放在 views 子目录
    │   ├──component2.vue
    │   └──component3.vue
    ├──view2.vue
    │   ├──component1.vue
    │   └──component4.vue
    └──view3.vue
        ├──component5.vue
        ……

相关资源

• vue.js 官网：https://vuejs.org/
• vue.js 中文网： http://vuefe.cn/
• vue-router 文档：http://router.vuejs.org/zh-cn/index.html/
• vuex 文档：http://vuex.vuejs.org/
• webpack 文档：https://webpack.github.io/docs/
• ES2015 入门教程：http://es6.ruanyifeng.com/