菜鸟之旅一：初学 vue 之使用 vue-cli4 创建项目

笔记一篇，备查。（一个教程搬运工）
刚刚接触vue-cli4,其实我都不知道1，2，3长什么样子。借鉴了很多教程，然后自己动手实践梳理出来。哈哈，接下来开始我的vue菜鸟之旅。

建议：今天问了一些业内人士，建议新手没什么基础的话先不使用vue-cli来建项目，可以先去熟悉一下vue的语法，采用cdn引入的方式先学。

这里附上bootCDN的地址
bootCDN传送门
找对应的版本，然后复制脚本标签，粘贴到你的html文件中。其实就是引入vue的js。
例如这样：<script src="https://cdn.bootcdn/ajax/libs/vue/2.6.11/vue.runtime.min.js"></script>
再去官网熟悉一下vue，附上vue官网地址：
vue官网传送门

菜鸟之旅第一步：选择模式

1.界面模式：

打开终端，输入vue ui回车。弹出提示要调用google浏览器，选择是。如下图所示：

自动打开浏览器，跳转至vue可视化界面模式。如下图所示：

2.命令行模式：

选择好项目文件放置的路径，打开终端输入vue create filename(ps:此处的filename为要创建的文件英文命名)
用上下方向键去选择配置，选择完成后回车。

建议：此处附上大神写的教程地址
命令行模式创建项目详细教程传送门

第二步：新建一个项目

1.选择项目放置文件夹：可选择已有文件夹，也可选择新建

2.配置项目名称：填写项目名称后点击下一步。
3.选择预设：（我是新手配置都选择默认）

4.安装Xcode：

系统会自动跳转到安装Xcode，选择安装。（这个我暂时还不知道安装来干什么用的）

5.在编辑器打开项目：

这里踩了一个坑，点击在编辑中打开，终端显示无法打开编辑器。
此处借鉴大神写的教程。（这个方法我试了不行，大家可以试试）
解决方案：编辑器无法打开解决方案

打开 VS Code–>命令面板 ，在命令框中输入 ‘shell command’ ，找到并点击: “Install ‘code’ command in PATH command”

选择在编辑器打开项目，打不开vscode的话，就先手动打开项目文件（等我找到解决方案以后再补上）。

6.运行项目：

打开终端，cd到根目录输入npm run dev
（注意此处的命令需要cd 到根目录，例如：我创建的项目根目录名是list,终端输入cd list，然后输入npm run dev）

踩坑记录：（项目配置问题）

（1）这里踩了一个坑，项目跑不起来。我直接在浏览器输入：http://localhost:8080,提示localhost无法链接，拒绝了访问请求。

（2）直接在终端输入npm run dev，报错。如下图所示：

百度解决方案：

（1）方案一：vuecli4和vuecli3不一样，不能用npm run dev要改用yarn serve，亲测没解决。
(2) 方案二：先检测node.js，npm，webpack等是否安装，--version对应查版本号。查了所有的都显示了版本号，都安装成功了。再cd到根目录执行npm run dev，亲测没解决，报同样的错误。

（3）方案三：这是webpack新版本的bug，卸载新版本：npm uninstall webpack webpack-cli -g，安装旧版本:npm install webpack webpack-cli --save-dev或者npm install webpack webpack-cli -D，再cd到根目录执行npm run dev，亲测没解决。

（4）方案四：可能是网速问题导致npm安装不完全，建议装cnpm，终端输入：
npm install -g cnpm --registry=https://registry.npm.taobao 再执行npm run dev，亲测没解决。

（5）还有一些方法我忘记了，试了太多，就记得这几个了。（后续遇到的话再补上）

上述这些方法大家都可以去尝试一下，我说的亲测没解决是指针对我遇到的这个问题用上述这些方法没得到解决，每个人的问题不一样，所以有时候可能你用上面的方法就解决了问题。总之还是要对症下药，当然了，在什么都不懂的情况下就和我一样，每个教程的方法都去试一遍，实践出真知。

我的解决方案：

请教了大神，终于解决了问题。
（1）问题根源：vue.config.js里 我参照网上了做了一些设置，写了一些端口啊，路径啊等等，删掉它。（建议：新手没什么基础的话先不要去配置，先熟悉vue，语法啊什么的）如下图所示：

打开终端，cd 到根目录list，然后执行npm install或者 yarn安装依赖，安装完成后执行npm run dev，成功启动啦。npm install-g npm，更新npm版本。如下图所示：

打开浏览器，地址栏输入http://localhost:8080，回车出现vue的界面。如下图所示：

至此项目就算创建并跑起来了。

后续还有新的坑的话到时候再补上。

之前搞了两天，改了页面那些，一直没有改成功。昨天突然就搞通了。百度了一下VScode怎么运行VUE。VS code里面的终端就可以直接写，初始化创建一个项目，然后npm run dev。