webpack+vue-cli搭建过程

1、检查环境

检查nodejs

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

$ node -v

检查npm

$ npm -v

检查cnpm

$ cnpm -v

2、安装依赖

安装webpack

$ cnpm install webpack -g

安装webpack-cli

$ cnpm install webpack-cli -g

安装vue-cli

$ cnpm install vue-cli -g

4、进入你要创建项目的位置,如C盘

5、装载vue-cli脚手架

例如我的项目名称（即项目文件夹名称）为：Testapp

$ vue init webpack Testapp

按照提示填写项目信息：

 

此时的目录结构是这样的：

 

6、进入刚刚搭建的项目（一定要进去了再执行下一步）

$ cd Testapp

7、安装项目

$ cnpm install

等待一会......

此时目录结构有变化了，可以看到项目根目录多了个node_modules文件夹

 

里面居然已经有一千多个文件夹了【惊恐】

 

开发阶段怎么运行项目？

就这样一个vue脚手架就搭好了，执行以下命令，运行开发环境：

$ cnpm run dev

等待一会......以下就表示运行成功了，

打开http://localhost:8081就可以看到vue-cli项目正常运行了。

怎么退出运行？Ctrl+c连续按两次

怎么开始编写自己的项目？在src目录中大展拳脚吧！（以下注释是我自己理解的哈，不是官方解释，仅供参考）

开发完成后怎么使用自己的项目？赶紧打包吧！

$ cnpm run build

同样要等待一会...

build后就会看见自己项目根目录多了一个dist文件夹

 

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄