在上一篇文章中,我们一起进行了一个vue微型项目的下载和安装,最终一个名字为mywebapp2.0的项目已经完成安装完毕,并且熟悉了各个文件的用途,并且在config文件中增加了dev启动项目的配置。接下来,我们要让这个项目跑起来
1. 处理样式 less/scss/stylus/css
本项目中,使用scss库操作CSS样式,方法:将scss库中的5个文件复制到 src/lib 文件夹下面,其中scss库文件地址:链接: https://pan.baidu.com/s/1KTwi3_XKNDFC_sVy4pGOnA 提取码: xph5
- 接下来,启动项目,首先我们还是要在vscode编辑器终端中检验下cnpm能不能用,是否报错
我的报错信息是:显示cnpm不是内部或外部命令,也不是可运行命令或批处理文件
意思是说没有找到cnpm,但显然我已经安装了cnpm,而且确保了安装的是全局方式。然后我就猜测:是不是vscode的terminal和windows的cmd不是同一个,然后通过查看任务管理器进程中的cmd,是同一个!!那么问题到底是什么?
后来,我在vscode编辑器的终端中输入了cmd,问题解决了!!(我也不知道是为什么,如果有大佬看见,希望帮忙解答一下,非常感谢!)
2. 安装DevTools组件
在chrome浏览器中搜索扩展程序DevTools,
发现chrome浏览器的右上角会有一个灰色的 V 标志,当项目正确启动的时候,该图标会被点亮。
- 在终端进入到正确的文件夹路径下,输入项目启动命令cnpm run serve,出现报错
原因:你的node_modules有意外的改动,导致依赖库不完整。
解决: - 删除项目下的node_modules
- 在项目目录下重新执行cnpm install,会重新生成node_modules
- 执行cnpm run serve
- vue项目初始化时cnpm run dev报错,webpack-dev-server解决办法
原因:这是新版本webpack存在的BUG,卸载现现有的心版本webpack,装老版本就可以了,webpack-dev-server版本需要从最新版本降低到如下版本,因为构建项目所用的插件版本太低 - cnpm unistall webpack-dev-server
- cnpm install webpack-dev-server@2.9.1
- cnpm run dev
3. 启动项目
启动项目时遇到的问题,差不多也就这几个。
输入命令cnpm run serve之后,等待一小会儿,可能有的电脑会启动得慢一些,耐心等待一会儿就好了,最终启动项目成功,
在chrome浏览器中输入http://localhost:8080/,或者长按并单击“https://localhost:8080/”打开页面
如果你能够出现这个页面,恭喜你,说明项目启动成功了!
下面,我们开始写项目。