vue-cli项目构建目录介绍

一：用vue-cli正确构建一个项目的目录如下：

二：目录介绍如下：

2.1：一级目录/文件介绍如下：

build文件夹: 用于存放  webpack 相关配置文件

config文件夹: 用于存放  vue基本配置文件

node_modules文件夹:  用于存放  npm install 安装的依赖代码库

src文件夹: 主要用于存放  我们开发的代码。

staic文件夹:  主要用于存放  第三方静态资源

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

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

.eslintignore:  配置我们不会对build文件和config文件进行语法检查。

.eslintrc.js:  eslint的配置文件，主要是定义一些代码编写风格的规则。

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

index.html:  入口html 文件。

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

2.2：二级目录/文件介绍如下：

build---------------------------->>>

    build.js：生产环境构建；

    check-versions.js：版本检查；

    utils：构建相关工具；

    vue-loader.conf.js：css加载器；

    webpack.base.conf.js：webpack基础配置；

    webpack.dev.conf.js：webpack开发环境配置；

    webpack.prod.conf.js：webpack生产环境配置；

config----------------------------->>>

    dev.env.js：项目开发环境配置；

    index.js：项目主要配置（如端口、打包路径等）；

    prod.env.js：项目生产环境配置；

node_modules----------------->>>(略)

src-------------------------------->>>

    assets文件夹：用于放置一些资源类文件（如图片等）；

    components文件夹：放组件文件；

    router文件夹：放置路由文件；

    App.vue：vue页面；

        一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)；

        其中模板只能包含一个父节点，也就是说顶层的div只能有一个；

        style标签默认是影响全局的，如需只在该组件下起作用，需在标签上加scoped，<style scoped></style>；

       如果写less文件，需在style标签里添加lang="less"，<style lang="less"></style>；

        如要引入外部css文件，首先需给项目安装css-loader依赖包（npm install css-loader）；

    main.js：入口文件

        该文件主要用于引入vue框架、根组件、路由设置及插件等，并且定义vue实例，如下图所示