vue-cli工程基本介绍

2021-03-19 本文已影响0人安掌门dear

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

nodejs

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工程中每个文件夹和文件的用处

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

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

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

package.json里面的配置