generator-uniapp v1.0.6
Uniapp generator 
一个基于Yeoman的uniapp项目脚手架生成器 - 使您可以使用合理的默认值和最佳实践快速设置项目。
使用用法
安装 yo, generator-uniapp:
npm install -g yo generator-uniapp
// or
yarn add global yo generator-uniapp如果您打算使用Sass,则需要首先安装Ruby和Compass:
- 从此处下载或使用
Homebrew安装Ruby - 使用
gem安装compass:
gem install compass创建一个新目录,并cd进入:
mkdir my-new-project && cd $_运行 yo uniapp, 可以选择传递应用名称:
yo uniapp [app-name]运行 yarn 安装依赖关系并 yarn serve 进行预览
Generators
可用的 generators:
App
开始一个新的 uniapp 项目,生成项目基础代码,Generator会自动依赖dcloudio和vuejs的一些模块,包括vuex和 flyio 作为默认的请求工具
例子:
yo uniappComponent
生成一个全局组建
例子:
yo uniapp:component MyComponent生成 src/components/my-component/my-component.vue:
<template>
<view class="my-component"></view>
</template>
<script>
export default {
name: 'MyComponent',
props: {}
}
</script>
<style lang="scss" scoped>
.my-component {
}
</style>Page
生成页面并在 src/pages.json 中注册路由
例子:
yo uniapp:page my-page产生 src/pages/my-page/my-page.vue:
<template>
<view class="my-page"></view>
</template>
<script>
export default {
name: 'MyPage',
data () {
return {}
},
onLoad () {
},
methods: {}
}
</script>
<style lang="scss" scoped>
.my-page {
}
</style>通过参数指定是否生成路由和页面标题
Example:
yo uniapp:page my-page --route --title="my page"产生如上的页面并添加一条路由信息到 src/pages.json
{
"pages": [
...
{
"path": "pages/my-page/my-page",
"style": {
"navigationBarTitleText": "my page"
}
}
...
],
...
}当然,您也可以指定生成的子目录。
例子:
yo uniapp:page user/address --route --title="Address"产生 src/pages/user/address/address.vue:
<template>
<view class="address"></view>
</template>
<script>
export default {
name: 'Address',
data () {
return {}
},
onLoad () {
},
methods: {}
}
</script>
<style lang="scss" scoped>
.address {
}
</style>Service
Generates a api service file.
创建一个 api service 文件
例子:
yo uniapp:service home产生 src/services/home.js:
import request from '@/utils/request'
export function get (params) {
return request.get('get-url', params, {
// headers config
})
}
export function post (parameter) {
return request.post('post-url', parameter, {
// headers config
})
}Store
Generates a Vuex module file.
创建一个 Vuex Module 文件
例子:
yo uniapp:store cart产生 src/store/modules/cart.js:
const cart = {
state: {
},
mutations: {
},
actions: {
}
}
export default cart你需要收到在 store/index.js 中去引入这个文件
Style
创建一个样式文件,默认使用SASS
例子:
yo uniapp:style home产生 src/styles/home.scss:
.home {
}生成的样式文件会自动在 src/styles/app.scss 中引入
@import "./iconfont";
@import "./global";
@import "./skeleton";
@import "./home"; // add this line