Anso-cli NPM | npm.io

下载脚手架

yarn add anso-cli -g
npm i anso-cli -g

安装项目

# anso命令为anso-cli内置的脚手架命令
anso init [program]
# [program] 为可选的项目名称，默认为anso-program。（anso-cli@0.0.10之前版本采用anso init 命令执行初始化操作）
# 一系列操作后，会在当前目录下，自动生成新项目及完成下载依赖，执行成功后可直接运行程序

脚手架模板

目前可选的模板只有pc的web项目。

模板目录后，将server_temp.js重命名为server.js文件，才可正确执行。server.js文件不提交git以防团队中的人员提交的环境互相影响。

web项目（anso-pc）文件目录说明

│  .browserslistrc
│  .editorconfig
│  .eslintrc.js
│  .gitignore
│  babel.config.js
│  dirtree.txt
│  output.js
│  package-lock.json
│  package.json
│  README.md
│  vue.config.js
│  yarn.lock
│  
├─build ##服务环境配置信息
│      copy.sh  ##打包后处理第三方库文件
│      server_temp.js ##下载完模板目录后，将该文件重命名为server.js文件，才可正确执行
│
├─public
│   └─ plugin ## 第三方插件
│        ├─ element-ui@2.15.0
│        ├─ iconfont  ## 当前脚手架中使用的图标库
│        └─ vue
│
└─src
    │  main.js
    │  
    ├─api   ##请求方法、鉴权控制
    │      apiURL.js    ##接口请求URL存放
    │      auth.js
    │      index.js
    │      interceptor.js
    │      
    ├─assets    ##静态资源
    │  ├─css
    │  │      index.sass
    │  │      _var.sass
    │  │      
    │  └─imgs
    │      │  logo.png
    │      │  user.jpg
    │      │  
    │      └─help
    │              403.png
    │              403@2x.png
    │              404.png
    │              404@2x.png
    │              
    ├─components    ##组件
    │      HelloWorld.vue
    │      
    ├─plugins   ##插件、第三方库引入
    │      ansoConfig.js    ##anso-ui配置文件
    │      component.js
    │      
    ├─router
    │          
    ├─store
    │  │  getters.js
    │  │  index.js
    │  │  
    │  └─modules
    │          menu.js  ##侧边栏菜单存储
    │          relation.js  ##数据字典存储
    │          tagsView.js  ##标签页存储
    │          user.js  ##用户信息存储
    │          
    ├─utils ##工具类
    │      encryption.js
    │      fieldsFormat.js  ##字段columns格式化，relation格式化
    │      LodopFuncs.js    ##打印
    │      routeDataFormat.js
    │      tree.js
    │      
    └─views ##页面视图
        │  About.vue
        │  Login.vue
        │  
        ├─App   ##框架布局
        │  │  AppFrame.vue
        │  │  AppLogo.vue
        │  │  index.vue
        │  │  menu.js
        │  │  moduleMenu.js
        │  │  
        │  ├─AppMenu
        │  │      index.vue
        │  │      MenuItem.vue
        │  │      
        │  ├─SlideBar
        │  │      index.vue
        │  │      MenuFooter.vue
        │  │      MenuSearch.vue
        │  │      
        │  ├─TagsView
        │  │      index.vue
        │  │      ScrollPane.vue
        │  │      
        │  └─TopBar
        │          index.js
        │          index.vue
        │          UserAvatar.vue
        │          
        ├─ErrorPage
        │      401.vue
        │      404.vue
        │      
        ├─Home
        │      index.vue
        │

脚手架内容介绍

Api接口数据、对接模式

1.接口请求发起

在vue.config.js中配置开发对接环境servers.dev变量

2.模拟api接口请求

1) 运行mock环境
在vue.config.js中，通过配置servers.js中的mock变量，用以配置mock环境；使用npm run mock 进入mock对接模式
2) 配置mock数据接口
192.168.0.47:40001（待修改为共用环境）为内部部署的yapi环境。首次使用请先注册用户，在yapi上新建项目后，可直接将项目后端提供的swagger接口.json文件导入到yapi。并开启自动同步swagger文件。

eslint标准方案

采用standard的eslint方案：https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md

第三方插件

日期/时间转换：dayjs
UI组件库：element-ui，anso-ui

打包后，项目静态资源及第三方库抽离加载说明

项目npm run build 之后，会在/dist文件夹生成两个文件： 1.以${项目名}为名称的文件: 打包后的html、js、css、plugin等文件；其中，plugin文件夹会在打包后失效，html默认加载的第三方库资源会是/dist/plugin文件夹。当多个项目部署时，可共用同个plugin文件，如需切换请手动更改，或修改/public/index.html文件script的引用；anso-ui中的AnsoIcon随着public/plugin中的iconfont变而变。