# generator-svue

> svue工程是生活作风组前端脚手架工程，根据模板生成基本前端工程

Latest version **0.2.0** (published 2019-04-08) · 0 weekly downloads

## Install

```sh
npm install generator-svue
pnpm add generator-svue
yarn add generator-svue
bun add generator-svue
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2019-04-08 |
| First published | 2018-04-20 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | huteng |
| Keywords | yeoman-generator |

## Links

- npm: https://www.npmjs.com/package/generator-svue
- npm.io page: https://npm.io/package/generator-svue

## Dependencies (3)

- [chalk](https://npm.io/package/chalk.md) ^2.4.0
- [yosay](https://npm.io/package/yosay.md) ^2.0.2
- [yeoman-generator](https://npm.io/package/yeoman-generator.md) ^0.20.3

## Recent versions

- 0.2.0 (latest) — 2019-04-08
- 0.1.0 — 2018-04-20

## README

# SVUE

svue工程是生活作风组前端脚手架工程，根据模板生成基本前端工程
<!-- TOC -->

- [SVUE](#svue)
    - [项目依赖](#)
    - [svue开发](#svue)
    - [项目使用](#)
    - [前端工程开发](#)
        - [工程结构](#)
        - [启动工程](#)
        - [设置路由](#)
            - [loginRouter](#loginrouter)
            - [appRouter](#approuter)
            - [otherRouter](#otherrouter)
            - [errorRouter](#errorrouter)
        - [添加页面](#)
    - [工程打包](#)
    - [Links](#links)

<!-- /TOC -->


## 项目依赖

svue脚手架使用[Yeoman](http://yeoman.io/)工具搭建,依赖于[yeoman-generator](http://yeoman.io/authoring/).它可以理解为搭建脚手架的脚手架

## svue开发

```shell
.
└── svue
    ├── router  暂时无用
    ├── node_modules  依赖库
    └── app 
       ├── index.js    构建过程
       ├── templates   模板文件

```

svue本地开发调试时，全局安装svue命令
```
npm link
```


运行生成工程
```
yo svue 
```

svue开发完成后，发布到npm库 
```
npm publish
``` 

发布前需要在package.json中更改版本号，相同版本号不允许再次发版

## 项目使用

该项目生成的脚手架为名为generator-svue，使用npm方式安装，使用 yo 启动。 所以在使用前你需要安装nodejs以及yeoman


``` javascript
// 安装nodejs
brew install nodejs

// 安装脚手架
npm install -g yo 
npm install yo generator-svue
```

安装依赖完毕，开始构建工程
``` javascript
// 创建前端文件夹
mkdir my-project 

// 使用脚手架构建前端工程 
cd my-project 
yo svue
```

## 前端工程开发

### 工程结构
生成的项目结构模仿iview-admin的架构

```shell
.
└── assets
    ├── build  项目构建配置
    ├── dist   打包后的前端静态文件 (build后生成)
    ├── node_modules  前端工程的相关依赖包 (npm install后生成)
    └── src
       ├── client  js文件
       ├── images  图片文件
       ├── libs  工具方法
       ├── router  路由配置
       ├── store  状态管理
       ├── styles  样式文件
        ├── template  模板文件
        ├── vendors  公共库文件
        └── views
            ├── error-page  错误页面
            ├── group  带二级目录的页面
            │   ├── page1  二级页面1
            │   ├── page2  二级页面2
            ├── home  首页
            ├── main-components  主组件
            ├── page  一级目录页面
```

### 启动工程
```
npm run dev
```
如果开始时不想起node服务器，可以通过 

```
npm run watch
```
这样虽然没有起前端服务，但也能做到实时修改后更新前端文件

### 设置路由
go-vue的路由由四部分构成:
#### loginRouter
登录路由

#### appRouter
应用路由，也是工程最主要的路由，所用功能性的请求都走应用路由。应用路由和侧边导航栏是对应的。所有加入到appRouter里的项都会在侧边导航栏展示。

```
export const appRouter = [
    {
        path: '/group',
        icon: 'ios-folder',
        name: 'group',
        title: 'Group',
        component: Main,
        children: [
            {
                path: 'page1',
                icon: 'ios-paper-outline',
                name: 'page1',
                title: 'Page1',
                component: resolve => { require(['@/views/group/page1/page1.vue'], resolve); }
            },
            {
                path: 'page2',
                icon: 'ios-list-outline',
                name: 'page2',
                title: 'Page2',
                component: resolve => { require(['@/views/group/page2/page2.vue'], resolve); }
            }
        ]
    },
    {
        path: '/page',
        icon: 'ios-paper',
        title: 'Page',
        name: 'page',
        component: Main,
        children: [
            { path: 'index', title: 'Page', name: 'page_index', component: resolve => { require(['@/views/page/page.vue'], resolve); } }
        ]
    }
];
```
appRouter 由两个大类组成，第一个大类又有两个子类。对应到页面，就是有两个一级导航，第一个又有两个二级导航栏
页面对应展示为

![image](https://github.com/iview/iview-admin/raw/template/pic/home.png)

#### otherRouter
不让出现在导航栏中的路由，都放到otherRouter中。

例如，主页面的路由就是放在otherRouter中

```
export const otherRouter = {
    path: '/',
    name: 'otherRouter',
    component: Main,
    children: [
        { path: 'home', title: {i18n: 'home'}, name: 'home_index', component: resolve => { require(['@/views/home/home.vue'], resolve); } }
    ]
};
```
#### errorRouter
errorRouter用来放置错误页面的路由。go-vue内置了404，403，500 三种错误的错误页面

### 添加页面
添加页面的大致步骤为:

1. 在src/view下新增页面
2. 在src/router中注册路由
3. 如果页面中需要用到较为复杂的js,例如接口请求，数据处理等,将js放到client文件夹中,然后在页面中引用
4. 不能在 js 文件中直接请求外部接口，会有跨域问题。接口请求都需要用golang转发。在 api/ 下添加

## 工程打包
前端工程由ejs模板，css，js，less等文件组成。最后我们看到页面其实是由打包工具（本工程用的是webpack）将资源打包后的结果

在线上使用都是生成后的前端文件，所以需要将源码文件进行打包

在开发时，如果想要打包前端工程，可以执行build命令，会在assets/dist下生成打包后的文件
```bush
cd assets
npm run build
```
由于打包后的文件可以生成，并不需要放到git中，所以不需要在提交时生成，而在将项目打包成镜像时自动执行

线上打包后前端已经生成静态文件，直接启动后端工程即可

## Links
- [yeoman] (http://yeoman.io/)
- [iView](https://github.com/iview/iview)
- [Vue](https://github.com/vuejs/vue)
- [Webpack](https://github.com/webpack/webpack)

---
_Source: https://npm.io/package/generator-svue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._