my-project-first
A Vue.js project
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --reportvue项目启动原理详析
|-- 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 // 程序入口文件，加载各种公共组件 |-- static // 静态文件，比如一些图片，json数据等 ||-- data // 群聊分析得到的数据用于数据可视化 |-- .babelrc // ES6语法编译配置,里面有一些插件，这些插件的作用是代码的转换 |-- .editorconfig // 编译器的配置,定义代码格式 |-- .eslintignore //忽略语法检查的目录文件 |-- .eslintrc.js //编译规则配置文件，规则定制文件，规则编译不过的时候可以在这里配置为0 |-- .gitignore // git上传需要忽略的文件格式, |-- favicon.ico // link图标 |--.postcssrc.js |-- index.html // 入口页面 |-- package.json // 项目基本信息如：可以配置script脚本 ^上箭头代表可以安装当前版本及以上的版本 |-- README.md // 项目说明
二、项目启动流程框架
当我们输入npm run dev启动项目时，启动流程大致如下：
package.json--->build/webpack.dev.conf.js--->config/index.js--->build/webpack.basse.conf.js--->src/main.js--->src/App.vue--->router/index.js--->components/HelloWorld.vue--->index.html(最终渲染在这个页面展示出来)