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

1、文件夹：用于执行程序的各种依赖 2、文件夹，静态资源，里面的东西，打包会原封不动的打包进去 3、src
文件夹：公用的静态资源，会打包到js文件夹
文件夹：非路由组件，公用的组件。打包到js文件夹
App.vue：是唯一的根组件
4、main.js：是程序的入口组件，程序运行最先执行
vue 中的导入过程解析：
1、如果路径中没有前导 ./ ../ / ,加载数据将从核心模块或者模块加载
2、如果路径中有前导 ./ ../ / ,加载数据将从指定路径加载。
main.js 详细解释
5、. 文件：
通知Git哪些文件不需要添加到版本管理中，即本地修改完项目后，上传到等版本管理服务中，本地哪些文件不上传过去。此文件一般不用修改
6、babel..js ：
确保代码兼容所有的浏览器，Babel 使用AST把不兼容的代码编译成 ES15 版本，因为大多数浏览器都支持这个版本的代码。
7、.json ：
描述项目及其依赖的信息（更新模块时锁定模块的大版本号，版本号的第一位，不能锁定后面的小版本）
8、-lock.json ：
描述项目及其依赖的信息（依赖记录详细的版本号，名称，依赖之类的信息），当执行npm 的时候，node从.json文件读取模块名称，从-lock.json文件中获取版本号，然后进行下载或者更新。
9、.md ：
对项目的主要信息进行描述，如果一个项目你很长时间都没有动,突然你需要修改这个项目,那么通过.md中对项目的描述能让你快速的再次上手。
10、项目其他配置说明： 1、 .json 中的 --open项目运行起来的时候，让浏览器自动打开
"": {
"serve": "vue-cli- serve --open",
"build": "vue-cli- build",
"lint": "vue-cli- lint"
},
2、关闭的自动校验功能
创建vue..js 文件(文件名不能改)，
.={
:false
} 3、配置src文件夹的别名，（定义别名后，引入该路径文件时，可以通过引入别名代替，更加方便）
定义别名：在vue..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//css/.css 文件，由于已经定义了src//css/ 的别名为_css, 可以直接这么引用： "_css/.css";
2、对于引入静态图片时，要注意在别名前面加 ~ 才可以引入正确。