vue-cli--项目目录及文件解析
|
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
| |-- router.js // 路由
|-- static// 静态文件，比如一些图片，json数据等
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- favicon.ico
|-- index.html // 入口页面
|-- package.json // 项目基本信息
|
一.package.json:定义该项目开发所需要的各种模块以及一些项目配置信息
1.安装依赖
dependencies字段指项目运行时所依赖的模块；//安装运行时依赖包 npm install 模块名 --save
devDependencies字段指定了项目开发时所依赖的模块；//安装开发时依赖包 npm install 模块名 --save-dev
devDependencies字段指定了项目开发时所依赖的模块；//安装开发时依赖包 npm install 模块名 --save-dev
2.script字段用来指定npm相关命令的缩写
二.webpack.base.confg.js , webpack的基础配置文件
功能：
把文件打包成浏览器可以认识的文件
四个重要组成部分：
入口：哪个作为入口文件，打包哪些文件
出口：打包出什么样的文件name=app
loader：对打包的文件做怎样的处理，比如吧es6转为es5
插件：比如对代码的优化，压缩，加密等
三.webpack.dev.conf.js ，webpack开发环境配置
四.定义编辑器的编码格式
五.config/index.js，项目变量配置