webpack前端神器 / 网络研习社#16

in #cn5 years ago

webpack.jpg

https://webpack.js.org

但凡能称为神器的,都是有两把刷子的。vue是js的前端框架,要设计一个完整的网页,它要安装大量的依赖,就像我前面几篇所介绍的,要安装vue-router, vue-loader, vue-resource等等,还要配置各项设置。当我一边啃书本,一边看教学视频时,也不由一阵头大:这到底是啥神器嘛,咋要这么多配置啊,这不整死人嘛!

可当我动手实践时,才发现,这些其实都是些基础知识,你完全可以不用理会,这些webpack在第一次创建时都会帮你配置,你只要开始你的核心业务就好啦!

webpack五分钟安装版:

#前提是你已经安装了node.js。
1. npm install -g cnpm --registry=https://registry.npm.taobao.org   
   //注册为国内淘宝镜像,使用cnpm代替npm,这会加快你的安装速度!
2. cnpm install --global vue
   //全局安装
3. cnpm install --global vue-cli
4. cnpm install webpack –g  
   //全局安装
5. vue init webpack webpackdemo  
   //初始化一个项目webpackdemo  
  //在选项中取消最后一项默认的 npm install ,我们用 cnpm install
6. cd webpackdemo
7. cnpm install            
8. cnpm run dev

到此,就可以愉快地运行了!如果不是实践一下,还在看着过期的教程和方法,有时候软件更新太快也是一个麻烦事啊。

webpack2.jpg

初始化的项目结构

以上是初始化的项目结构,你不用写一行代码,你的服务就可以运行起来,确实可以当得起神器之名!


网络研习社系列文章:


@lemooljiang #network-institute

Coin Marketplace

STEEM 0.26
TRX 0.11
JST 0.033
BTC 65012.58
ETH 3101.28
USDT 1.00
SBD 3.86