【vue】创建项目-项目目录结构-自定义组件

一、使用VueCli快速构建项目

1.vue cli 脚手架的安装

npm install -g @vue/cli

PS:如果使用npm方式安装脚手架速度太慢，或者是卡死的话，可以选择淘宝镜像cnpm的方式安装

//安装淘宝镜像的命令行
① npm install -g cnpm --registry=https://registry.npmmirror.com
// 如果安装了cnpm淘宝镜像的话，可使用下面的命令行安装@vue/cli脚手架，网速会相对来说快一些② cnpm install -g @vue/cli

使用npm命令经常容易出现卡死情况，如出现这种情况，清执行此命令，即可解决：

npm config set registry https://registry.npm.taobao.org
或者，哪个方式快，用哪个
npm config set registry https://registry.npmmirror.com

2.vue create 命令创建项目

// helloworld 是项目名，可自行定义

vue create helloworld

创建成功后会自动生成图片上方的文件

---

二、vue脚手架项目目录结构

在开始之前先简单认识一下项目的目录结构

---

1.App.vue

在项目设计页面之初，我们可以根据需求，将页面设计为几个模块（这里我设置成三个），从这里可以看到，项目自动生成了两个vue文件（HomeView和AboutView）

我在这两个vue文件里输入了两个不一样的文字方便大家观察

我们只需要在App.vue文件中输入（对应路由的页面占位符）即可让页面显示出来（效果如下）

---

2.index.js

但是为什么每次出现的都是HomeView.vue文件里的内容呢？
这是由于path导致的

这两张图片可以直观的看到两者的区别

---

三、自定义控件

组件是Vue.js最强大的功能之一，组件可以扩展HTML元素，也可以封装可重用的代码，组件系统让开发人员可以用独立可复用的小组件来构建大型应用。

组件的出现，能够让开发人员以不同的组件，来划分不同的功能模块，将来需要什么样的功能，去调用对应的组件即可。

组件的优点

1、方便重复使用
2、减少代码重复冗余
3、便于多人协同开发
4、有助于提高开发效率
5、提升整个项目的可维护性

组件的使用步骤

1.在components 文件夹新建组件页面

2.在需要此组件的页面调用组件

Tip:通常，代码中一些没有见过的自定义标签，如等，就是组件。每一个标签代表一个组件，组件一旦注册成功，就可以复用，可以在很多需要的地方直接使用即可。