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: 使用标签<router-view>渲染整个工程的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文件 里面
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容