二、Vue2.0项目结构内容及配置解析

1、node_modules文件夹：用于执行程序的各种依赖

2、Public文件夹，静态资源，里面的东西，打包会原封不动的打包进去

3、src

        assets文件夹：公用的静态资源，webpack会打包到js文件夹

        componets文件夹：非路由组件，公用的组件。Webpack打包到js文件夹

        App.vue：是唯一的根组件

4、main.js：是程序的入口组件，程序运行最先执行

        vue 中的import导入过程解析：

        1、如果import路径中没有前导 ./   ../   /  ,加载数据将从核心模块或者node_modules模块加载

        2、如果路径中有前导 ./  ../  /  ,加载数据将从指定路径加载。

        main.js  详细解释

5、.gitignore 文件：

通知Git哪些文件不需要添加到版本管理中，即本地修改完项目后，上传到github等版本管理服务中，本地哪些文件不上传过去。此文件一般不用修改

6、babel.config.js ：

确保 JavaScript 代码兼容所有的浏览器，Babel 使用 AST 把不兼容的代码编译成 ES15 版本，因为大多数浏览器都支持这个版本的 JavaScript 代码。

7、package.json ：

描述项目及其依赖的信息（更新模块时锁定模块的大版本号，版本号的第一位，不能锁定后面的小版本）

8、 package-lock.json ：

描述项目及其依赖的信息（依赖记录详细的版本号，名称，依赖之类的信息），当执行npm install的时候，node从package.json文件读取模块名称，从package-lock.json文件中获取版本号，然后进行下载或者更新。

9、README.md ：

对项目的主要信息进行描述，如果一个项目你很长时间都没有动,突然你需要修改这个项目,那么通过README.md中对项目的描述能让你快速的再次上手。

10、项目其他配置说明： 

1、 package.json 中的  --open项目运行起来的时候，让浏览器自动打开

 "scripts": {

    "serve": "vue-cli-service serve --open",

    "build": "vue-cli-service build",

    "lint": "vue-cli-service lint"

  },

 2、 关闭eslint的自动校验功能

  创建vue.config.js 文件(文件名不能改)，

  module.exports={

    lintOnSave:false

1.   }

3、配置src文件夹的别名，（定义别名后，引入该路径文件时，可以通过引入别名代替，更加方便）

        定义别名：在vue.config.js 中定义别名：

const path = require('path')
const resolve = (dir) => {
    return path.join(__dirname, dir)
}
module.exports = {
    lintOnSave: false,//关闭eslint自动校验功能
    //别名设置，方式一
    chainWebpack: (config) => {
        config.resolve.alias
            .set('@', resolve('src'))  //本项目路径src路径设置别名为@
            .set('_conf', resolve('src/config')) //本项目路径src/config路径设置别名为_conf
            .set('_iconfont', resolve('src/assets/icons/iconfont'))
            .set('_css', resolve('src/assets/css'))
            .set('_img', resolve('src/assets/img'))
            .set('_components', resolve('src/components'))
            .set('_header', 'src/Header')
            .set('_footer', 'src/Footer')
            .set('$$', path.resolve(__dirname, '../static/')) //项目根路径同级static目录设置别名为$$
            .set('$@', path.resolve(__dirname, '../static/src/')) //项目根路径同级static/src目录设置别名为$@
    },
    // //别名设置，方式二
    // configureWebpack: {
    //     resolve: {
    //         alias: {
    //             '@': resolve('src'), //本项目路径src路径设置别名为@
    //             'assets': resolve('src/assets'), //本项目路径src/assets路径设置别名为assets，静态文件前要加~，否则只会以当前目录为基准
    //             '$$': path.resolve(__dirname, '../static/'), //项目根路径同级static目录设置别名为$$
    //             '$@': path.resolve(__dirname, '../static/src/') //项目根路径同级static/src目录设置别名为$@
    //         }
    //     }
    // },
}

       使用定义的别名：

1、例如，引入src/assets/css/global.css 文件，由于已经定义了src/assets/css/ 的别名为_css, 可以直接这么引用：import "_css/global.css";

2、对于引入静态图片时，要注意在别名前面加 ~ 才可以引入正确。

例如：想引用 src/assets/img/foot-info-icon-web.png  这个图片，在已定义src/assets/img别名为_img  后，

正确写 法：<img src="~_img/foot-info-icon-web.png" />  

错误的写法：<img src="_img/foot-info-icon-web.png" />       

require 函数：

        node.js中的内置函数，用来加载模块，是一种运行时同步加载的机制，require参数可以是模块名或者文件路径名。require本质是，赋值的过程，将内容赋值给变量

          -1、无路径(也称为加载模块)：

          例子：require('path')

            （1）node会先查找path模块是否是内置模块（nodejs内置的模块有fs、http等），找不到则进行下一步

    （2）从当前目录向外寻找node_moludes查找是否有path.js文件，找不到进行下一步；

    （3）在node_moludes中找path文件夹，寻找index.js文件；

    （4）没有index.js文件，则去package.json中查找main字段，该字段对应于一个入口路径；

    （5）以上都找不到，报错。
 

  -2、有路径(也称为加载文件)：

  例子：require('./find.js')

    （1）、node会先找当前目录下的find.js文件；

    （2）、进而寻找find.json文件；

    （3）、寻找当前目录下的find文件夹的index.js

    （4）、没有index.js文件，则去package.json中查找main字段，该字段对应于一个入口路径；

require(path) ,path 路径至少要有三部分组成, 目录,文件名和后缀,文件名可以用变量标识，path,不能是纯动态路径，

比如：../css/demo.css  ,不可以。

        ./css/demo.css,可以

        css/demo.css，可以