1.0.0 • Published 5 years ago

svue-skeleton v1.0.0

Weekly downloads
-
License
MIT
Repository
-
Last release
5 years ago

使用方法：

1.0 环境

  • npm>4.0.0
  • node>8.0.0

1.1 初始化工程

npm i svue-skeleton

1.2 安装依赖

npm i

1.3 进入开发模式

npm run dev

1.4 打包

npm run build

1.5 项目目录

|- src	开发目录
 |- assets	资源目录
	|- img 	图片
 |- components	模块组件目录
 |- js	项目公共js文件
 |- libs	使用到的第三方库
 |- style	公共样式文件
 |- router	vue单页面工程中的路由文件
 |- store	vue单页面工程中的vuex文件
 |- index.html 页面入口
 |- index.js 入口js文件 在当前文件初始化vue
|- static	静态资源目录

1.6 配置文件

详见build目录下webpack.cfg.js

  • 配置代理
  • 配置输出目录
  • 配置开发调试端口号
  • 配置px2rem 默认不开启
  • 打包配置cdn路径 将打包后的static目录放置在对应的cdn节点即可
  • 配置默认引用的js文件

2、功能简介

2.1 开发模式

  • 不支持多页面，支持vue，支持scss，支持ts
  • 支持无需引入即可全局使用的common_entry.js
  • src/pages中的html（或pug）文件和src/pages中的js（入口）文件,在同一个文件夹中并且名称相同
  • 新增页面，需要重新运行npm run dev html，css，js 更改自动刷新

2.2 关于图片资源

  • 图片不要放在/static文件下，而是放在/assets。

    • 因为html中img标签的src如果是绝对路径则会被定为到src目录下，无法引用到static目录下
    • css中图片如果以/static路径开头，会不经过url-loader所处理

  • html中的img标签src对应图片可以被url-loader所处理

    • 第一种方式是相对html路径
    • 第二种方式以/assets开头的绝对路径，自动定位到src/assets目录下
    • 第三种种方式以~@/assets开头的绝对路径，自动定位到src/assets目录下

  • csss中的背景图写法

    • 第一种方式是相对css文件的相对路径
    • 第二种种方式以~@/assets开头的绝对路径，自动定位到src/assets目录下

2.3 打包相关

  • 为了css文件图片路径完美生成相对路径，会被打包成奇怪的图片路径../../static/img/xxx.jpg
  • 静态文件目录static文件夹，打包会被拷贝到dist目录
  • 支持打包文件版本hash，提取vendor.js common.js [page].js文件，只对模块更改的css，js文件版本hash进行更改
    • vendor.js是指/node_modules文件夹中引用的第三方插件
    • common.js是指被多个页面引用超过2次并且，大小超过20k时，才会生成
    • [page.js]对应着每个页面独自的js文件
  • 生成模式css文件单独提取
  • 小于8k图片文件和字体文件自动转base64代码
  • pages多级目录支持（忽略下划线开头的文件和文件夹）
    • 当配置文件webpack.cfg.js中build.assetsPublicPath === './'，二级目录以上页面需要在页面中，增加<base>标签进行修正相对路径。如src/pages/test/test-0.html中的<head>中的<base href="../" />
    • 当配置文件webpack.cfg.js中build.assetsPublicPath === '/', 则路径为绝对路径，无需修正路径
jqueryvue-style-loader
@everything-registry/sub-chunk-2859@infinitebrahmanuniverse/nolb-svu
1.0.0

5 years ago