SVUE

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

• SVUE
  • 项目依赖
  • svue开发
  • 项目使用
  • 前端工程开发
    • 工程结构
    • 启动工程
    • 设置路由
      • loginRouter
      • appRouter
      • otherRouter
      • errorRouter
    • 添加页面
  • 工程打包
  • Links

项目依赖

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

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下生成打包后的文件

cd assets
npm run build

由于打包后的文件可以生成，并不需要放到git中，所以不需要在提交时生成，而在将项目打包成镜像时自动执行

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

Links

• [yeoman] (http://yeoman.io/)
• iView
• Vue
• Webpack