小孕妇自从跳出前项目坑,改改BUG,划划水,清闲至今已有2个工作日头儿。
早起眼皮狂跳,女人的直觉告诉我:万恶的周一作为一周的开头怎么也要表示表示。果不其然,头儿在狂催新项目产品索要原型图设计图和技术文档无果后,苦思冥想抛来了一个不似任务的任务:vue-cli3.0也出来许久了,去搭个试试,看看能不能用于新项目。
噗哈哈哈哈,正中小孕妇下怀,心里暗爽:带薪学习的机会可不多,还可以正大光明的写上日报,这就展开行动!
首先就是安装(npm),步骤如下:
注意:猿儿们安装前请检查自己是否安装了node.js和npm ,一定要安装哦!允许我偷个懒,就不介绍如何安装了。
下面正文开始:
① 安装vue-cli 3.0
运行命令:npm i @vue/cli -g
纳尼?!!!第一步就出错!
小孕妇是崩溃的,但度娘是万能的!
貌似原因:大概是与npm的缓存有关(我猜的),二话不说,先清波缓存。
清除缓存具体方法:npm cache clean --force 回车出现:
这就清理成功了!我们再次执行:npm i @vue/cli -g 回车
淡定安装中.......(希望不要出错!怎么这么慢!啊啊啊!会不会还有错!千万要成功啊!万分紧张!)
成功。(小孕妇胸有成竹十分淡定!)
啊啊啊!终于成功啦!② 搭建脚本文件,首先我们想一个项目名称,emmmmmmmmm,就叫vue-project吧!
运行命令:vue create vue-project
您与npm连接缓慢,是否切换至淘宝镜像?当然YES!然后出现提示:
选择手动配置还是自动配置网上的教程大多数都是选择手动配置,小孕妇自然要与众不同,选择了默认自动配置。大家感兴趣的话可以自行搜索手动配置教程,我就不赘述了!(其实是我手快,不小心按了回车,被迫选择了默认的自动配置!!!气的仰天长啸啊!)
好了,安装成功,让我们试运行一下(这里我们放弃npm,改用yarn,我也不知道为啥,可能大家都说好,我也赶潮流吧)!
运行命令:yarn serve (此处请注意,3.0的运行命令已改变,不再是你们熟悉的run dev了,哈哈哈,惊喜吧)好的,回车
运行成功!打开网页看看
成功!此时我们使用visual code打开组织目录看一下!纳尼?怎么这么少了!头儿叫我开会了,下次再摸索记录组织结构的问题吧!
我的webpack配置文件呢?!真是丈二和尚摸不着头脑啊!少的可怜!再见喽,么么哒(づ ̄ 3 ̄)づ!
网友评论