Generator-svue NPM

SVUE

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

SVUE

项目依赖

svue脚手架使用Yeoman工具搭建,依赖于yeoman-generator.它可以理解为搭建脚手架的脚手架

svue开发

.
└── 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

// 安装nodejs
brew install nodejs

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

安装依赖完毕，开始构建工程

// 创建前端文件夹
mkdir my-project 

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

前端工程开发

工程结构

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

.
└── 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 由两个大类组成，第一个大类又有两个子类。对应到页面，就是有两个一级导航，第一个又有两个二级导航栏页面对应展示为

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); } }
    ]
};