zoukankan      html  css  js  c++  java
  • vue-cli3 搭建的前端项目基础模板

    基于 vue-cli3 搭建的前端模板,forkclone 本仓库,即可搭建完成一个新项目的基础模板,源码地址,欢迎 starfork

    特性

    • CSS 预编译语言:less
    • Ajax: axios,做了一定的封装,详见 src/services/request.js
    • SVG 雪碧图:采用 webpack 插件 svg-sprite-loader,及 svg 精简压缩工具 svgo
    • 移动 web 的适配方案:引入了 postcss-pxtoremlib-flexible,可以自由地用 px 去开发
    • 常用的 js 工具类: cloud-utils
    • 常用的 Less 的 mixins 集合:magicless

    目录介绍

    
    .
    ├── build            # 生成压缩包
    ├── public           # 静态资源,不需要 webpack 处理
    └── src
        ├── assets
        │   ├── fonts    # 字体文件
        │   ├── img
        │   ├── js       # 不经过 npm 或 yarn 下载的第三方依赖包
        │   └── less     # reset 样式,及定义的常量文件等
        ├── components
        │   └── SvgIcon  # svg 雪碧图
        ├── filters      # 全局过滤器
        ├── icons        # svg 文件
        │   └── svg
        ├── router       # 路由及拦截器
        ├── services     # 统一的服务接口请求处理
        └── views
            └── hello
    

    开发及发布

    
    # 克隆项目
    git clone git@github.com:cklwblove/vue-cli3-template.git
    
    # 安装依赖
    yarn install
    
    # 可以通过如下操作解决 yarn 下载速度慢的问题
    yarn install --registry=https://registry.npm.taobao.org
    
    # 启动服务
    yarn run serve
    
    # 构建生产环境
    yarn run build
    
    # 压缩 dist 文件夹,生成 zip 包
    yarn run deploy
    
    

    浏览器访问 http://localhost:3001

    其他

    
    # --svgo svg精简压缩
    yarn run svgo
    
    # --analyz 基于 webpack-bundle-analyzer 插件分析打包的文件构成及大小(vue ui 界面上的分析不习惯)
    yarn run analyz
    
    # --report 生成静态报告文件
    yarn run report
    
    

    相关链接

    原文地址:https://segmentfault.com/a/1190000017040058

  • 相关阅读:
    SQL——BETWEEN操作符
    SQL——IN操作符
    SQL——LIKE操作符
    SQL——ORDER BY关键字
    SQL——AND、OR运算符
    顺序执行
    流程控制
    集合类型
    字典类型
    字典 in 操作符
  • 原文地址:https://www.cnblogs.com/lovellll/p/10124419.html
Copyright © 2011-2022 走看看