使用vue-cli(vue脚手架)快速搭建项目

本文介绍了vue-cli,一个用于自动生成Vue.js+webpack项目模板的脚手架工具,详细阐述了webpack的模块打包概念,并指导如何使用vue-cli搭建项目,包括全局安装vue-cli,创建项目,安装依赖,以及项目目录结构的解析。
摘要由CSDN通过智能技术生成

1.vue-cli是什么?

vue-cli 是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,分为vue init webpack-simple 项目名 和vue init webpack 项目名 两种。

当然首先你的安装vue,webpack,node等一些必要的环境

2.什么是webpack?

一句话概括:webpack是一个模块打包工具(module bundler)。重点在于两个关键词“模块”和“打包”。什么是模块呢?我们回顾一下曾经的前端开发方式,js文件通过script标签静态引入,js文件之间由于没有强依赖关系,如果文件1要用到文件2的某些方法或变量,则必须将文件1放到文件2后面加载。随着项目的增大,js文件之间的依赖关系越发错综复杂,维护难度也越来越高。这样的困境驱使着前端工程师们不断探索新的开发模式,从后端、app的开发模式中我们获得灵感,为什么不能引入“模块”的概念让js文件之间可以相互引用呢?模块1要使用模块2的功能,只需要在该模块1中明确引用模块2就行了,而不用担心它们的排列顺序。基于这种理念,CommonJS和 AMD规范被创造了出来,然后有了require.js、system.js这样的前端模块加载工具和node的模块系统,直到现在流行的es6 module。

模块的引入解决了文件之间依赖引用的问题,而打包则解决了文件过多的问题。当项目规模增大,模块的数量数以千计,浏览器如果要加载如此多的文件,页面加载的速度势必会受影响,而bundler可以把多个关联的文件打包到一起从而大量减少文件的数量提高网页加载性能。提供模块化的开发方式

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值