Vue-Cli的简单入门使用

说明

这篇文章是为了让我和组里同学快速上手，学会使用Vue-Cli的基本使用而写的，里面可能有许多错误，还请仔细识别，当然，欢迎指正。

这里默认大家已经安装了Vue和Vue-Cli还有node.js(利用其npm工具)，这里不做详细说明

框架的创建

创建代码

vue init webpack 你想取的文件夹名来创建一个框架

说明：这里可以设置你想把这个文件新建在哪个文件夹下面，比如此时我在D:\学习专用\大二\数据库\大作业\teach，我想去上一级可使用：

cd 路径名
当然直接去上一级用：
cd ..

例如：
这时我们开始输入:

vue init webpack 你想取的文件夹名来创建一个框架

这时会进入下载

安装时报错及解决办法

因为这个框架是从GitHub上下载的，所以有可能因为墙的原因或者网速的原因而提示：vue-cli · Failed to download repo vuejs-templates/webpack: getaddrinfo ENOTFOUND github.com
此时建议换网或者手机开热点，当然你也可以选择去网上找webpack包然后下载，使用offline操作来创建，后者，可以在CSDN上搜:vue-cli · Failed to download repo vuejs-templates/webpack: getaddrinfo ENOTFOUND github.com报错而找到，这里不做说明。

另：还有一种报错是说没找到Vue Cli的，如果我没记错的话，解决办法为：

npm install --global vue-cli
p.s.这里是你之前装过了，但他没识别出来才能这样用

一些其他问题请看小张021写的：Vue脚手架安装教程
这里对他表示衷心的感谢，让我安装完毕，而不需他人帮助。
这里@奕⭐giegie，我就不用安一个小时！

安装完毕后的构建操作

下载完毕后进入这个界面

此时，它会问你Project Name是否为你设置的，当然你也可以改，确认项目后按enter

报错及解决办法

>> Sorry, name can only contain URL-friendly characters and name can no longer contain capital letters.

这是因为你的项目名中有URL不友好的字符（像中文和符号还有大写英语都不行），改了就行，好了之后按enter
此时它会问你是否是一个Vue.js项目我们确认为是，按enter

此时问你作者是谁，可设置可不设置，比如我设置为五河今心，之后按enter
这你问你是否花大约6kb设置lighter min+gzip这里确认按enter。
p.s.这个用来干嘛我也不知道，想了解建议自己查查

此时问你是否安装vue-router(路由器)，我们选择是，输入y
是否初始化你的代码？选择n

是否设置测试单元？选择n
是否使用它提供的样例？选择n
选择管理方式：
有npm，yarn，和你自己管(大佬操作)我直接跪了，这里我们选择npm，因为我们下了node.js
此时进入创建
创建完毕后会进入这个界面

如何使用框架

启动

在终端输入：
npm start

可能报错：

这是因为你没有进入你下的文件夹，使用cd 路径进入后就可以，成功后会进入：
此时若点击蓝色连接即进入网页：

基本使用

打开侧栏后有：

文件夹说明

static文件夹，如其名，不要动
我们打开src文件夹
首先我们点开main.js

这个我们也不要动(看下注释，这不重要可以直接看后面，想了解的看下)，我来简单说明一下他，main.js等价于一个静态的主函数？所以别动。

然后点开App.vue，这个可以理解为主界面，不要删除他，但可以把它删成这样:
p.s.router-view/别删！这是我们利用router的方法！：

这样我们获得一个这样的主界面，方便之后操作

接下来，说明router，重要！
上面的import部分是你导入想要设置路由的地方例如我现在在components里建了一个test001.vue文件

顺带说明：

<script>
    export default {
        name: "test001"
    }
</script>

这里是为了暴露自己的组件，export这个一定要有！还有为了不必要的麻烦
请每创建一个.vue文件都在其template先放个空的div
接着我要把它导入到路由应在index.js输入：

import test001 from "../components/test001";

并在其components设置，如图：
path,是路径，一定要有,name建议设置为同名也可不设但还是建议设置，component则一定要设置并同名。建议每建一个.vue就来设置。

接着打开asserts文件夹

图片全丢这！

一些原理和操作说明

之前我们在App.vue里留下了router-view/(展示路径为/(根)的界面即HelloWorld.vue的界面)，这会把我们带向router，而

里关于HelloWorld的route首先解析路径/，然后我们就可以在网页上看到HelloWorld的界面，但是我们不想让根是HelloWorld怎么办？
有两种办法，一种是我们直接修改比如我修改成test001

这样我们的根页面就是：
方法二：重定向

重定向

我们不修改，而是这样在Router里使用redirect
不过这个重定向的代码一定要写在你要重定向的界面前才行。
说明：当它打开路径为根即’/'的界面时，执行redirect(重定向)至你要去的界面的路径。

复用代码的方法

Vue-Cli其万物皆组件的理念允许我们自己造组件？
所以，当我们想复用的时候可以：
先在components里建一个，比如我建个gongjuren.vue（名字建议都英文）
这里顺便也说明一下App.vue作为主界面的优点，
我们先分别在HelloWorld和test001里写个超链接，让其可以互相跳转：

可以看看网址哦，路径变了
然后我想复用一个我写好的东西比如gongjuren.vue(一定要是英文！)不然会识别不出来，还有记得写div！不写也会识别不出来！
注意要复用的东西不要去Router注册！你这样会导致整个页面都打不开的！
然后我想在HelloWorld和test001里都用上，我们这里以test001为例：

先在test001的script里import(写在最前面！)导入，然后在export里注册，像我这样，最后再在div写<gongjuren》</gongjunren》吐槽一下，这CSDN太傻逼了我两个尖括号一写你就以为是你的html 代码了？傻逼。
然后同样步骤在Helloworld里操作，这样我们就有：

和

发现没有？这样我们就实现了代码(组件的复用)。

总结

以上就是我的一些浅薄认识，如有错误欢迎指正，另还想深入学习建议去看B站Up主：编程不良人的【编程不良人】VueCli脚手架的实战教程,已完结！非常好，很详细。我的这篇文章就是在看完这个视频的第3、4p后写出来的，非常感谢小城老师！
然后，希望我的这篇文章能帮到队友还有阅读的你。