以前学过一点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的页面。
至此,就结束啦!可能也会有不对的地方,望指正。不说了,终于可以愉快的开始正式的学习了!大家加油!