anso-cli
v0.0.12
Published
ANSO项目脚手架
Downloads
6
Readme
下载脚手架
yarn add anso-cli -g
npm i anso-cli -g
安装项目
# anso命令为anso-cli内置的脚手架命令
anso init [program]
# [program] 为可选的项目名称,默认为anso-program。([email protected]之前版本采用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 ## 第三方插件
│ ├─ [email protected]
│ ├─ 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
│ [email protected]
│ 404.png
│ [email protected]
│
├─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接口请求
- 运行mock环境
在vue.config.js中,通过配置servers.js中的mock变量,用以配置mock环境;使用
npm run mock 进入mock对接模式
- 配置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变而变。
当iconfont库是与其他项目不是同套icon时,可在项目中main.js自行添加。注意,如果修改了/public/plugin中的资源,请注意多项目部署时冲突问题。 plubic/plugin文件夹不可删除
2.plugin文件夹: 可供共有的第三方库依赖文件,目前包含vue、element、iconfont
FAQ
yarn add anso-cli -g 之后没办法使用anso命令
这个问题可能因为没有添加 yarn global module 的路径到 PATH 环境变量引起的。 先执行 yarn global bin 拿到路径,然后添加到 PATH 环境变量里。
yarn global bin /usr/local/bin
你也可以尝试用 npm i anso-cli -g