Vue微型项目（二）——项目的启动及其问题解决

在上一篇文章中，我们一起进行了一个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/”打开页面

如果你能够出现这个页面，恭喜你，说明项目启动成功了！

下面，我们开始写项目。