您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

Vue-Cli的简单入门使用

说明

这篇文章是为了让我和组里同学快速上手,学会使用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后写出来的,非常感谢小城老师!
然后,希望我的这篇文章能帮到队友还有阅读的你。


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进