vue-cli工程基本介绍

• 转眼学习过半，我虽认识到学习是个很好的开始，但是这不能改变我目前依旧还没入门的事实，大多数人都可能感到不自信，没有信心能成为一名合格的工程师，我能干什么我会什么的问题依旧得不到解决，缺少理论的支撑，于是决定痛苦的恶补理论知识，希望和大家一起学习，早日找到一份属于自己满意的前端工作，文章来自拉勾教育大前端

nodejs

• Node.js 是一个基于Chrom V8引擎的JavaScript运行环境
• Node.js 使用了一个事件驱动、非阻塞I/O模型，使其轻量又高效
• Node.js 的包管理器npm，是全球最大的开源生态系统

vue-cli 工程技术

1. vue.js: vue-cli工程的核心，主要特定是双向数据绑定和组件系统
2. vue-router: vue官方推荐使用的路由框架
3. vuex: 专为vue.js应用项目开发的状态管理器，主要用于维护vue组件间公用的一些变量和方法
4. axios: 用于发起GET、POST等http请求，基于Promise设计
5. vux: 一个专为vue设计的移动端UI组件库
6. 创建一个emit.js文件，用于vue事件机制的管理
7. webpack: 模块加载和vue-cli工程打包器

vue-cli工程常用的npm命令有哪些？

下载node_modules资源包命令

npm install

启动vue-cli开发环境的npm命令

npm run dev

vue-cli生成生产环境部署资源的npm命令

npm run build

用于查看vue-cli生产环境部署资源文件大小的npm命令

npm run build --report

vue-cli工程中每个文件夹和文件的用处

1. build文件夹：用于存放webpack 相关配置和脚本。开发中仅偶尔使用，到webpack.base.conf.js用于配置less、sass等css预编译，或者配置下UI库
2. config文件夹：主要存放配置文件，用于区分开发环境、线上环境的不同。常用到此文件夹下config.js配置开发环境的端口号、是否开启热加载或者设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build命令打包生成静态资源名称和路径
3. dist文件夹：默认npm run build命令打包生成的静态资源文件，用于生产部署
4. node_modules: 存放npm命令下载开发环境和生产环境的依赖包
5. src：存放项目源码及需要用到的资源文件
6. src/assets： 存放项目中需要用到的资源文件css\js\image
7. src\components: 存放vue开发中一些公共组件：header.vue、footer.vue
8. src/emit: 自己配置的vue集中式事件管理机制
9. src/router: vue-router vue路由的配置文件
10. src/service：自己配置的vue请求后台接口方法
11. src/page：存在vue页面组件的文件夹
12. src/util：存放vue开发过程中一些公共的js方法
13. src/vuex：存放vuex为vue专门开发的状态管理器
14. src/app.vue： 使用标签渲染整个工程的vue组件
15. src/main.js： vue-cli工程的入口文件
16. index.html： 设置项目的一些meta信息和提供挂载vue节点
17. package.json： 用于node_modules资源和启动、打包项目的npm命令管理

config文件夹下index.js对于工程开发环境和生产环境的配置

• build对象下对于生产环境的配置
  • index: 配置打包后入口html文件的名称以及文件夹名称
  • assetsRoot: 配置打包后生成的文件名称和路径
  • assetsPublicPath: 配置打包后html引用静态资源路径，一般要设置成"/"
  • productionGzip: 是否开发gzip压缩，已提升加载速度
• dev对象下对于开发环境的配置
  • port: 设置端口号
  • autoOpenBrowser: 启动工程时，自动打开浏览器
  • proxyTable: vue设置的代理，用以解决跨域问题

package.json里面的配置

• dependencies：生产环境依赖包的名称和版本号，即这些依赖包都会打包进生产环境的js文件里面
• devDependencies：开发环境依赖包的名称和版本号，即这些 依赖包 只用于 代码开发 的时候，不会打包进 生产环境js文件 里面