文檔官網
功能簡介
ano-vue腳手架工具是vue-cli3.0的超級 支援熱啟動，擴充功能如下：
1. 僅僅需要指令行就可以自動化建立頁面，元件，以及建立其依賴關系，提高開發效率。
2. 自動化路由配置，無需手動添加路由項。
4. 動态切換代理,啟動服務的時候隻需要在指令行中添加需要切換的代理環境變量即可。
5. 标準化的代碼及目錄模版，統一前端代碼風格。
6. 頁面腳本按需加載，解決了單應用打包大的問題。
7. 面向對象和注解的程式設計體驗，大大加強了代碼的複用性和降低了代碼的耦合度。
第一步：安裝腳手架工具
windows環境需要安裝可以執行linux指令行的工具，下載下傳 gow.exe [下載下傳位址](http://dl.pconline.com.cn/download/762799.html) 一鍵安裝後，重新打開cmd視窗即可。
安裝腳手架工具指令： npm install -gd ano-vue
mac環境安裝需要管理者權限 sudo npm install -gd ano-vue
第二步：ano-vue -h 檢視指令行
-V, --version output the version number
-i,--init 初始化應用, 帶應用類型參數
-c,--create <string> 建立一個view, component, service, model
-r,--remove <string> 删除一個view, component, service, model
-w,--watch 啟動伺服器應用
-b,--build 打包壓縮靜态資源生成釋出包
-h, --help output usage information
第三步: ano-vue -i
在本地建立一個項目檔案夾，cd到檔案夾根目錄中，執行以上指令初始化項目模闆代碼
第四步：npm install -d
安裝package.json中的子產品依賴
第五步：ano-vue -w
啟動項目, 會看到一個網站的初始化頁面模闆，表示初步運作已經成功，如果你要開發自己的項目可以修改下index.html将模闆代碼修改下即可 ano-vue -w dev 表示啟動服務并使用proxy.config.js中的dev代理。
*項目核心目錄檔案介紹
1. proxy.config.js 配置服務端ajax請求代理檔案，使用的時候隻需要 ano-vue -i dev(說明：這裡的參數為需要切換代理項的鍵)。
2. main.js webpack項目打包入口檔案
3. src/assets 存放圖檔和靜态檔案的目錄。
4. src/common 項目的公共檔案夾
5. src/common/components 全局vue元件目錄其中BaseComponent 為所有元件的基類，可以為所有元件增加公共功能。
6. src/controller/index.js 路由檔案，攔截使用者請求，這裡和 vue-router的配置檔案一樣，使用腳手架會自動更新這個檔案内容，大部分情況下不需要使用者自動修改，除非配置攔截器或者子路由。
7. src/model 用戶端向服務端發送ajax請求擷取資料的實體類檔案夾。
8. src/service 通用業務功能的實體類存放目錄，為view層提供微服務功能子產品。
9. src/view 頁面入口元件的存放目錄。
1. 建立一個頁面元件 list
2. 在list中使用vuex的狀态管理器顯示一段内容
3. 建立model實體，在list中調用model實體的 showList方法向背景發送ajax請求擷取資料
4. 建立一個service的切面為model實體的showList方法增加執行前和執行後的攔截功能
5. 在list頁面元件中使用 @provider依賴注入将 model和service自動綁定進來，這個前提是model和service都是autowire
（自動裝載類）。
6. 建立list頁面的私有子元件banner 和 通用元件 slider
7. 将list元件的資料傳遞給子元件banner 在banner中使用 @props注解擷取接受資料
第一步：建立頁面 list.vue
使用指令: ano-vue -c view list
這個指令的意思是 建立一個視圖層的頁面 list
import {component,store} from '@common/lib/decorator'
import BaseComponent from '@common/components/BaseComponent'
import listStore from './store'
@component
@store(listStore)
export default class list extends BaseComponent {
constructor() {
super();
}
data() {
return {
}
}
created() {
}
mounted() {
}
methods() {
return {
}
}
}
1. 在使用注解的時候首先需要将 decorator這個類引入進來，用到哪個注解就解構這個注解中的方法即可。
2. BaseComponent 為目前元件類的基類，比如我想為所有元件增加一個 hide和show方法來在目前元件中僅僅使用this.show就能顯示目前元件，this.hide就能隐藏元件這樣的好處是相當于在 Vue.prototype上挂在原型方法基本是一個道理。
3. @component注解表明目前類是一個vue的元件類。
4. @store(listStore) 将目前vuex的store子產品注入到全局 當然你也可以給它取個别名例如: @store("userStore", listStore); 使用的時候可以用 this.$store.state.userStore.getters 或者 this.$store.state.listStore.getters 這個可以自己嘗試下。
5. 類中的生命周期函數，與原來的對象形式基本是一樣的。接下來我把常用的生命周期函數一一列出如下:
data() {
return {
"username": "ue2"
}
}
created() {
}
computed() {
return {
}
}
components() {
return {
}
}
watch() {
return {
}
}
filters() {
return {
}
}
methods() {
return {
}
}
mounted() {
}
beforeMount() {
}
第二步：在list目錄下的store.js中增加一個state名字為sex值為male
export default {
namespaced : true,
state : {
sex: "male"
},
mutations : {
},
actions : {
},
getters : {
}
}
第三步：在list.vue中進行顯示
<template>
<div>
{{$store.state.listStore.sex}}
</div>
</template>
第四步：建立一個user的實體類model
ano-vue -c model user
此時會在src/model檔案夾下自動生成一個 user.js的model實體代碼如下：
import {autowire,model,requestMapping} from '@common/lib/decorator.js'
import Base from './base'
@autowire({moduleId:"user"})
@model
export default class user extends Base {
constructor() {
super();
}
}
代碼解釋：
@autowire({moduleId:"user"}) 自動裝在目前類 其中參數moduleId是必填的這裡的moduleId 是與 @provider(["user"])對應的，隻有自動裝在的類，才可以使用 @provider進行依賴注入。
這裡還要強調一個額外的功能，除了moduleId意外例如我們給這個類增加一個屬性參數name 代碼如下：
import {autowire,model,requestMapping} from '@common/lib/decorator.js'
import Base from './base'
@autowire({moduleId:"user", name: "豬八戒"})
@model
export default class user extends Base {
name = ""
constructor() {
super();
}
}
我們可以通過以上的代碼在自動裝載目前類的時候給name初始化一個值，還是比較強大的吧。
接下來我們為這個model增加一個showUserList的方法并且可以往服務端發送請求代碼如下:
import {autowire,model,requestMapping} from '@common/lib/decorator.js'
import Base from './base'
@autowire({moduleId:"user"})
@model
export default class user extends Base {
constructor() {
super();
}
@requestMapping({url: "/api/v1/showUserList", type: "get"})
getUserList(req, res) {
return res;
}
}
代碼解釋： 使用 @requestMapping注解可以表明目前的showUserList 會自動想服務端發送url的請求 類型為get，預設為get請求，return res（一個包裝了傳回資料的promise對象） req參數為調用方傳入的json參數。
在list.vue中調用model中的這個方法代碼如下：
import {component,store,provider} from '@common/lib/decorator'
import BaseComponent from '@common/components/BaseComponent'
import listStore from './store'
@component
@store(listStore)
@provider(["user"])
export default class list extends BaseComponent {
constructor() {
super();
}
data() {
return {
}
}
created() {
this.user.getUserList().then((res)=>{
console.log(res);
})
}
mounted() {
}
methods() {
return {
}
}
}
代碼解釋: 在@provider中進行依賴注入，在create鈎子函數中進行調用。很簡單吧
第五步：建立一個面向切面程式設計的 aop service
ano-vue -c service log
此時在src/service目錄中生成了一個aop的service代碼如下：
import {autowire} from '@common/lib/decorator.js'
@autowire({"moduleId": "log"})
export default class log {
}
這個service的功能是，我們期望在getUserList之前記錄下代碼執行的starttime，在函數執行完成以後記錄一個endTime。
import {autowire,aspect,before,after} from '@common/lib/decorator.js'
@autowire({"moduleId": "log"})
@aspect
export default class log {
@before
recordExecBeforeTime() {
}
@after
recordExecAfterTime() {
}
}
代碼解釋：
1. 增加@aspect注解表明這個類為一個切面， @before @after 可以是多個，按照順序執行
接下來我們在model的user中應用這個切面代碼如下：
import {autowire,model,requestMapping,inject,agent} from '@common/lib/decorator.js'
import Base from './base'
@autowire({moduleId:"user"})
@model
@agent
export default class user extends Base {
constructor() {
super();
}
@inject("log")
@requestMapping({url: "/api/v1/showUserList", type: "get"})
getUserList(req, res) {
return res;
}
}
代碼解釋：要在類上使用切面，必須要有這些元素: @agent 被動态代理注解 @inject 在那個方法上使用切面。
第六步：建立一個list.vue的私有子元件banner
ano-vue -c component list/banner
此時會在 src/view/list/components 下面自動生成一個banner.vue的子元件
在list.vue中引入私有子元件代碼如下：
import {component,store,provider} from '@common/lib/decorator'
import BaseComponent from '@common/components/BaseComponent'
import listStore from './store'
import banner from './components/banner'
@component
@store(listStore)
@provider(["user"])
export default class list extends BaseComponent {
constructor() {
super();
}
data() {
return {
}
}
created() {
this.user.getUserList().then((res)=>{
console.log(res);
})
}
mounted() {
}
components() {
return {
banner
}
}
methods() {
return {
}
}
}
第七步：建立一個list.vue的通用子元件slider
ano-vue -c component common/slider
通過以上指令會在 src/common/components 目錄下自動生成 slider.vue
在list.vue中引入代碼如下:
import {component,store,provider} from '@common/lib/decorator'
import BaseComponent from '@common/components/BaseComponent'
import listStore from './store'
import banner from './components/banner'
import slider from '@common/components/slider'
@component
@store(listStore)
@provider(["user"])
export default class list extends BaseComponent {
constructor() {
super();
}
data() {
return {
}
}
created() {
this.user.getUserList().then((res)=>{
console.log(res);
})
}
mounted() {
}
components() {
return {
banner,
slider
}
}
methods() {
return {
}
}
}
第八步： 在list.vue中給banner.vue子元件傳遞參數
list.vue 傳值代碼如下:
<template>
<div>
{{$store.state.listStore.sex}}
<banner :username="username"></banner>
<slider></slider>
</div>
</template>
banner.vue 接受參數代碼如下：
import {component, props} from '@common/lib/decorator'
import BaseComponent from '@common/components/BaseComponent'
@component
@props({"username": String})
export default class banner extends BaseComponent {
constructor() {
super();
}
data() {
return {
}
}
created() {
}
mounted() {
}
methods() {
return {
}
}
}
代碼解釋： 這裡使用了 @props 進行參數接受，我們可以為被接受的參數指定一種資料類型進行校驗.
webpack中的别名定義如下：
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@assets': path.resolve(__dirname, 'src', 'assets'),
'@common': path.resolve(__dirname, 'src', 'common'),
'@controller': path.resolve(__dirname, 'src', 'controller'),
'@model': path.resolve(__dirname, 'src', 'model'),
'@service': path.resolve(__dirname, 'src', 'service'),
'@view': path.resolve(__dirname, 'src', 'view'),
},
extensions: ['*', '.js', '.vue', '.json']
}
最後再次介紹兩個指令:
ano-vue -w 啟動服務
ano-vue -w dev 啟動服務并使用proxy.config.js中的dev代理
ano-vue -b 打包應用
QQ：912273637 技術交流群：849829771