vue-webpack-boilerplate里面各文件解析

mj 发布于2019-08-21 17:08 / 2524人阅读

摘要：地址使用文件解析用于告诉系统要忽略掉哪些文件。文件用于配置忽略语法检查的目录文件。的使用在项目根创建一个名为的文件。该文件的内容定义该项目的编码规范。此目录下的文件不会被处理。包含单元测试相关的文件。

vue-webpack-boilerplate是vue-cli脚手架的一个项目模板。github地址

使用

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

文件解析 .gitignore

.gitignore用于告诉Git系统要忽略掉哪些文件。

在使用 Git 进行版本控制的时候，有些文件是无需纳入 Git 管理的，通常都是些自动生成的文件，像日志或者编译过程中创建的文件。我们可以创建一个名为 .gitignore 的文件，列出要忽略的文件来解决这个问题。关于 Pattern 规则，可以查看 git 的相关文档：http://git-scm.com/docs/gitig...

.gitkeep

.gitkeep用于跟踪项目中的空文件。

Git 不跟踪空文件夹。如果你的项目文件夹里边有任何的空文件夹，Git 都会无视它。但如果你在文件夹里边添加了一个文件，Git 就会开始跟踪这个文件夹。无论这个文件是什么，内容如何，名字叫啥。因此，若想跟踪项目的空文件夹，那么就可以在这个文件夹中创建一个 .gitkeep 文件。

.eslintignore

.eslintignore文件用于配置忽略语法检查的目录文件。，文件中的每一行都表明哪些路径应该被EsLint忽略检测。

当 ESLint 运行时，在确定哪些文件要检测之前，它会在当前工作目录中查找一个 .eslintignore 文件。如果发现了这个文件，当遍历目录时，将会应用这些偏好设置。详情见：http://eslint.cn/docs/user-gu...

.eslintrc

.eslintrc文件用于配置ESLint规则。详情见：http://eslint.cn/docs/user-gu...

.postcssrc.js

postcssrc.js文件用来配置postcss。vue-loader 的 postcss 会默认读取这个文件的里的配置项。详情见：https://vue-loader.vuejs.org/...

PostCSS是一个平台，在这个平台上，我们能够开发一些插件，来处理我们的CSS，比如热门的：Autoprefixer 。Autoprefixer 是一个流行的 PostCSS 插件，其作用是为 CSS 中的属性添加浏览器特定的前缀。

//.postcssrc.js
module.exports = {
  "plugins": {
    // to edit target browsers: use "browserlist" field in package.json
    "autoprefixer": {}
  }
}
//package.json
"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

上述代码，autoprefixer会去读取 package.json 下 browserslist的配置文件

> 1% 兼容全球使用率大于1%的游览器

last 2 versions 兼容每个游览器的最近两个版本

not ie <= 8 不兼容ie8及以下

.babelrc

.babelrc文件用来配置babel。

.editorconfig

.editorconfig文件用来定义项目的编码规范。

EditorConfig可以帮助开发者在不同的编辑器和IDE之间定义和维护一致的代码风格。

EditorConfig的使用

在项目根创建一个名为 .editorconfig 的文件。该文件的内容定义该项目的编码规范。

安装与编辑器对应的 EditorConfig 插件。

其工作原理是：当你在编码时，EditorConfig 插件会去查找当前编辑文件的所在文件夹或其上级文件夹中是否有 .editorconfig 文件。如果有，则编辑器的行为会与 .editorconfig 文件中定义的一致，并且其优先级高于编辑器自身的设置。

build

build中是一些webpack的相关配置，包括基本配置、开发环境配置、生产环境配置等。

config

config目录主要是针对开发环境，生产环境，测试环境的配置信息。

src/assets与static

src/assets/：此目录下的资源会被webpack处理。

static/：此目录下的文件不会被webpack处理。在webpack打包后，此目录下的文件会默认被直接复制到dist/static/中。这是通过在build.assetsPublicPath 和build.assetsSubDirectory来确定的。

详情见：https://vuejs-templates.githu...

test

用于存放测试文件。

test/unit：包含单元测试相关的文件。关于单元测试如何操作，可见：Vue单元测试---Karma+Mocha+Chai实践
test/e2e：包含 e2e 测试相关的文件。

超融合服务器 idc机房托管阿里云服务器里面域名解析更换服务器里面有什么文件 js操作本地硬盘里面的文件如何访问云服务器里面的文件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89172.html

使用json-server来模拟REST API

摘要：官方地址使用可全局安装，也可针对项目安装。可用开启服务。数据文件格式如下让读书点燃梦想地点滨江星耀城让读书点燃梦想地点滨江星耀城仿京东购物车仿京东购物车修改里面的命令。在前端开发中，如果后端接口还没有提供，前端拿不到数据，可能就没法继续写一些交互行为的代码。这一问题可通过json-server来很好地解决。本文主要讲如何将json-server和webpack进行整合，基于vue-w...

smartlion 2019-08-20 19:02 评论0 收藏0
Vue单元测试---Karma+Mocha+Chai实践

摘要：官方推荐使用来进行单元测试。导入和组件，进行测试检查原始组件选项组件有对于组件需要，编写单元测试时，通过传递该参数。在状态更新后检查生成的在状态改变后和断言更新前等待一刻执行命令运行单元测试。参考单元测试测试框架实例教程本文基于vue-webpack-boilerplate。官方推荐使用Karma+Mocha+Chai来进行单元测试。介绍 Karma：一个测试运行器，用于启动浏览器...

Ververica 2019-08-21 16:18 评论0 收藏0
推送近期三波关于Vue.js的资讯

摘要：原文来自集前端最近很火的框架资源定时更新，欢迎一下。推送自己整理近期三波关于的资讯这里就抛砖引玉了，望有更屌的资源送助攻。原文来自：集web前端最近很火的vue2框架资源；定时更新，欢迎Star一下。推送自己整理近期三波关于Vue.js的资讯；这里就抛砖引玉了，望有更屌的资源送助攻。 showImg(https://segmentfault.com/img/bVVeiZ); 第...

Anonymous1 2019-08-22 11:10 评论0 收藏0
使用Vue快速开发单页应用－主体结构

摘要：本文以及后面相应文章，主要是相关技术栈来快速的实现单页应用开发。原文出处其他使用快速开发单页应用主体结构使用快速开发单页应用使用快速开发单页应用登录页面使用快速开发单页应用功能组件与路由组件通信本文所涉及代码全在vue-cnode 单页应用，即在一个页面集成系统中所有功能，整个应用只有一个页面。因为路由的控制在前端，单页面应用在页面切换时比传统页面更快，从而在前端体验更好。将逻辑从...

dcr309duan 2019-08-20 10:29 评论0 收藏0
webpack 教程资源收集

学习的过程中收藏了这些优秀教程和的项目，希望对你有帮助。 github地址, 有不错的就更新官方文档中文指南初级教程 webpack-howto 作者：Pete Hunt Webpack 入门指迷作者：题叶　 webpack-demos 作者：ruanyf 一小时包教会 —— webpack 入门指南作者：VaJoy Larn　　 webpack 入门及实践作者：...

Backache 2019-08-21 14:05 评论0 收藏0