使用 vue-cli 快速构建一个 vue项目

vue

之前说明了怎么手动构建一个项目，但是手动构建比较花时间，还要配置，下包，于是可以使用 vue-cli（vue脚手架）构建一个vue项目，很快，也很方便。

第一步：新建一个放 vue项目的文件夹，可以在桌面上，也可以是任意你想要的路径，在这里我新建了一个 appdemo1 的文件夹用于放 vue项目，然后打开cmd命令窗口，进入到这个文件夹，我的是 appdemo1文件夹

第二步：使用 cnpm i vue vue-cli webpack --save

第三步：使用 vue init webpack

之后无脑回车，让它自动构建整个vue项目

第四步：为了实现热更新，自动开启浏览器，建议在 package.json 里添加一条指令：

"open": "webpack-dev-server --open --hot --config build/webpack.dev.conf.js"

这个时候直接执行 npm run open ,可能会报错如图：

这个时候，使用 cnpm i 重新把包装一下就可以了：

包装完之后，你就可以使用 npm run open 来开启 vue项目了，成功之后会自动打开浏览器，显示如图：

就这样，一个 vue项目就构建完成了，比手动的要快很多！！！