vue 项目目录结构
运行 vue-cli
项目之后,让我们来看一下整个项目的结构
build
项目的打包构建目录,里面的文件是关于整个 vue 项目用什么方式打包,不同的项目环境打包方式怎么区别,什么文件该使用什么 vue-loader 插件, 打包时需要使用哪些 webpack 的插件,插件的配置等等。 vue 项目中的 webpack
config
关于项目配置的目录,这里面对不同的项目运行环境有不同的配置,如在开发阶段,在本地环境运行项目的主机名、端口、eslint开关、自动开启浏览器等。在生产环境时,index.html
目录,静态资源目录、是否开启静态脚本压缩等。
node_modules
依赖包
src
项目的源码目录,所有的关于页面的内容都在这里面,包括 组建
、 样式文件
、router配置
、vuex
、api
…
static
静态文件存放目录
test
测试目录
.babelrc
babel 配置文件,babel是一个 javascript
编译器,对于项目中使用的 js,获取各个浏览器的支持。
{
// 此项指明,转码的规则
"presets": [
// env项是借助插件babel-preset-env,下面这个配置说的是babel对es6,es7,es8进行转码,并且设置amd,commonjs这样的模块化文件,不进行转码
["env", { "modules": false }],
// 下面这个是不同阶段出现的es语法,包含不同的转码插件
"stage-2"
],
// 下面这个选项是引用插件来处理代码的转换,transform-runtime用来处理全局函数和优化babel编译
"plugins": ["transform-runtime"],
// 下面指的是在生成的文件中,不产生注释
"comments": false,
// 下面这段是在特定的环境中所执行的转码规则,当环境变量是下面的test就会覆盖上面的设置
"env": {
// test 是提前设置的环境变量,如果没有设置BABEL_ENV则使用NODE_ENV,如果都没有设置默认就是development
"test": {
"presets": ["env", "stage-2"],
// instanbul是一个用来测试转码后代码的工具
"plugins": ["istanbul"]
}
}
}
editconfig
定义和维护一致的编程风格。
#缩进风格:空格
indent_style = space
#缩进大小2
indent_size = 2
#换行符lf
end_of_line = lf
#字符集utf-8
charset = utf-8
#行尾允许空格
trim_trailing_whitespace = true
#结尾总是插入新的一行
insert_final_newline = true
eslintignore
对于 eslint 语法检查忽略的文件
eslintrc.js
检查项目中编程语言的语法错误。
gitignore
配置 git 仓库忽略文件
postcssrc.js
PostCSS 是一个利用 JS 插件来对 CSS 进行转换的工具,这些插件能够检查你的 CSS
、支持变量声明、mixins
、
转换未来的 css
语法、内联图片等。
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
"plugins": { //插件
"postcss-import": {},
"postcss-url": {},
// 配置浏览器的兼容性,详细配置在 package.json 中的 ‘browsersList’ 中
"autoprefixer": {}
}
}
index.html
项目主入口 html 文件
package-lock.json
依赖包版本管理
README.md
项目描述