脚手架命令行创建Vue项目避坑指南

以前学过一点vue，那时候就觉得怎么简单怎么来，学习前端的技术很多时候都是想着将框架离线到本地来进行学习。总觉得用脚手架好麻烦，其实自己也是尝试过之后才有这种感觉，或许是不太适应那种模式。

不知道有没有人和我遇到一样的情况，自己去离线下载，使用的时候老是会出现各种问题，各种报错，总是要花费好久的时间去查问题点，关键好多文章和我写的不一样，用了各种我没见过的语法什么的，跟着写直接报错。我想这可能就是最让人头疼的事了。

这两天在研究脚手架的使用，也是各种坑不断，不过好在还是搭建成功了。在这里记录一下问题，希望看到的朋友少走弯路。

1）node.js安装

这里安装过程就不提了，安装之后记得设置淘宝镜像提高下载成功率和速度。

npm config set registry=https://registry.npm.taobao.org

如果在公司使用还需要设置代理，你可以选择每次安装插件的时候都跟上代理：

npm install request --proxy http://127.0.0.1:8080

也可以用修改配置的方式一次性搞定

npm config set proxy=http://127.0.0.1:8080

2）webpack安装

// 安装命令
npm install -g webpack
// 检查命令
webpack -v

这里需要注意的是如果webpack的版本在4.0以上还需要安装webpack-cli。没有安装的话会提示报错。

npm install -g webpack-cli

3) vue-cli安装

这里的v要大写。

npm install -g vue-cli
// 检查命令
vue -V

如果遇到安装失败错误的情况，可能是本地有已存在的文件冲突，使用这个命令强制安装：

npm install -g vue-cli -force

4) 创建Vue项目

vue init webpack demo01

这里遇到一个坑，执行这个命令的时候报错，大概是说无法下载webpack模板的意思，去网上查了很久，好多都说这种情况把代理删了就好了。我试了一下没有效果，因为自己压根没设代理。其实原因是因为自己在公司，内网需要设置代理，和npm设置的代理不一样，需要设置的是cmd的代理。

set http_proxy=http://127.0.0.1:8080

设置完以后就可以愉快的执行了，创建过程中可能会问你几个问题，你估摸着回答就行了。公司代理可以自己问一下前辈。

最后我创建出来的项目是这样子的：

5）运行vue项目

项目创建好后怎么运行的问题也让我搞了半天，运行命令：

npm run dev

项目创建完就直接执行这个命令会报一堆错，原因是package.json文件中需要的依赖包没有安装。需要执行安装命令：

npm install

这里需要注意需要切换到创建好的项目下执行，例如我这里应该是E:/vue-cli project/demo01。安装完毕后应该会多一个node_modules文件夹，里面是所有的依赖。

然后执行npm run dev命令就可以编译成功啦！

在浏览器中访问http://localhost:8080就可以看到vue的页面。

至此，就结束啦！可能也会有不对的地方，望指正。不说了，终于可以愉快的开始正式的学习了！大家加油！