V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Kamato
V2EX  ›  Vue.js

推荐一个基于 Vue.js 的 Seed-Project

  •  
  •   Kamato ·
    panteng · 2015-10-28 17:29:22 +08:00 · 5113 次点击
    这是一个创建于 3305 天前的主题,其中的信息可能已经有所发展或是发生改变。

    vue-gulp-sass-browserify-boilerplate

    Logos

    一个使用 Vue.js , Gulp , Sass , Browserify 的前端模板。

    如何使用

    1. 安装 Sass.
    2. 安装 Node.js.
    3. 为你的浏览器安装 Livereload 插件。
    4. 在命令行中运行 npm install,安装 node 模块
    5. 在命令行中运行 bower install,安装 bower 组件
    6. 在命令行中运行 gulp ,搞定了~

    文件树结构

    app/                      --> Source files for the application.
    
        css/                  --> Stylesheets folder.
            src/              --> Sass files.
                main.scss     --> Primary Sass file.
            dist/
                style.css     --> Css file compiled from Sass.
    
        img/                  --> Images.
            logo.png          --> Logo of Vue.js, used for favicon.
    
        js/                   --> Javascripts folder.
            src/              --> Source files for the MVVM part (Vue.js).
                components/   --> Components.
                    view1/    --> The view1 component template and logic.
                            template.html    --> The partial template.
                            index.js         --> The controller and model logic.
                    view2/    --> The view2 component template and logic.
                        template.html        --> The partial template.
                        index.js             --> The controller and model logic.
                directives/   --> Custom directives.
                    my-frist-directive/      --> A demo directive.
                        index.js             --> Logic for the directive.
                filters/      --> Custom filters.
                    my-first-filter/         --> A demo filter.
                            index.js         --> Logic for the filter.
                app.html      --> Templates for the main application.
                app.js        --> Main appliaction module.
                main.js       --> Entry point file for browserify. Initialize Vue instance, routes, custom directives and filters.
            dist/
                bundle.js     --> Generated by browserify from the files in js/src folder.
                bundle.min.js --> The uglified version of bundle.js.
    
        index.html            --> App layout file.
    
    .bowerrc
    .gitignore
    bower.json
    gulpfile.js               --> Gulp tasks.
    logos.png
    package.json
    README.md
    

    Gulp 任务

    1. compile-css 将 Sass 编译为 style.css
    2. minfiy-css 压缩 style.css 为 style.min.css
    3. bundle 使用 Browserify 将所有 vue 相关的文件整合打包为 bundle.js
    4. uglify-js 压缩 bundle.js 为 bundle.min.js
    5. watch 监控文件改动,并自动执行对应任务,如刷新浏览器
    6. default 运行 compile-sassbundlewatch任务。
    7. compress 运行 minify-cssuglify-js任务。

    FAQ

    1. 为什么使用 gulp-ruby-sass 而不使用依赖更少的 gulp-sass ?

      Gulp-sass 的安装依赖于 node-gyp ,而在 Windows 系统中想让 node-gyp 正常工作要花费很多精力。 Gulp-ruby-sass 不依赖于 node-gyp 而依赖于 Sass , Sass 又依赖于 Ruby ,不过在 Windows 上安装 Sass 和 Ruby 还是很简单的。

    如果你是在 OSX 或 Linux 下开发,那么你可以选择使用 gulp-sass 。

    1. 为什么使用 live-reload 而不使用不需要安装插件的 browserSync?

      原因同问题 1 。 BrowserSync 依赖于 node-gyp 。

    Lisence

    MIT

    第 1 条附言  ·  2015-10-28 18:04:57 +08:00
    4 条回复    2015-11-29 11:06:25 +08:00
    banri
        1
    banri  
       2015-10-28 17:35:14 +08:00
    Windows 下编译 Sass 是有坑的,需要以下设置:

    进入 Ruby22-x64\lib\ruby\gems\2.2.0\gems\sass-3.4.15\lib\sass ,打开 engine.rb 文件,找到各种 require... 在它们的下方添加一行:
    Encoding.default_external = Encoding.find('utf-8')
    Kamato
        2
    Kamato  
    OP
       2015-10-28 17:39:52 +08:00
    @banri 是编码的问题吗?我一般会在每个.scss 文件中添加一行 @charset "utf-8";,目前没遇到过你说的坑。
    Kamato
        3
    Kamato  
    OP
       2015-10-28 17:49:55 +08:00
    NemoAlex
        4
    NemoAlex  
       2015-11-29 11:06:25 +08:00
    谢谢分享。
    最近也在整理一个类似的东西,区别是只用 NPM ,不用 bower 和 browserify ,不考虑使用 Windows 的开发者。
    过两天发布。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1037 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 22:14 · PVG 06:14 · LAX 14:14 · JFK 17:14
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.