Vue脚手架目录详解

html-css026

Vue脚手架目录详解,第1张

build:webpack配置文件

config:webpack配置文件

node_modules:安装的依赖包

src:所有的组件都写在里面

static:所有第三方的静态资源存放目录

.babelrc:babel的一些配置(比如将es6编译成es5的一些配置)

.editorconfig:编辑器的一些配置(包括编码格式,缩进风格,换行格式)

.gitignore:配置Git仓库忽略的一些文件(不会上传)

.postcssrc.js 配置postcss的文件(主要是css样式兼容性,自动加前缀(autoprefixer))

index.html:入口html文件。

package.json: 项目的一些配置信息(项目的一些具体信息)

package-lock.json就是锁定安装时的包的版本号,并且需要上传到git,以保证其他人在npm install时大家的依赖能保证一致。

autoprefixer:是用于给css3属性自动加属性前缀的

babel系列都是处理语法的

chalk:适用于格式化输出命令行信息的,比如run dev以后的start...

copy-webpack-plugin:在webpack中拷贝文件和文件夹

extract-text-webpack-plugin:为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象

file-loader:操作文件

friendly-errors-webpack-plugin:能够更好在终端看到webapck运行的警告和错误

html-webpack-plugin :插件的基本作用就是生成html文件

node-notifier:来发送桌面消息,包括应用状态改变以及错误信息

optimize-css-assets-webpack-plugin:压缩提取出的css,并解决ExtractTextPlugin分离出的js重复问题(多个文件引入同一css文件)

ora:命令行里自动运行的信息提示

portfinder:可以帮你找出正在运行的进程打开了哪些端口

rimraf:跑shell命令 rm-rf 的工具

semver:是用来对特定的版本号做判断的(check-version.js)中

shelljs:selljs是在node里跑shell命令的工具,比如‘rm -rf’在(check-version.js)中,属于Unix命令

uglifyjs-webpack-plugin:压缩js

webpack:打包工具

webpack-bundle-analyzer:打包优化工具,可得到一个可视化模块大小界面

webpack-dev-server:配合webpack,创建开发环境(启动服务器、监视文件变化、自动编译、刷新浏览器等),提高开发效率

webpack-merge:合并

由此可以看出styleLibraryName支持自定义主题路径, 前提是路径前带 ~ 符号. 否则取

当需要 babel-plugin-component 插件按需加载自定义主题生成好的css文件时只需要通过 styleLibraryName 属性 ~ + 路径 指定就可以了