v-cli第一次使用与验证密码组件

之前接触过webpack，不得不说webpack对我来说真是太难。现在接触到了vue-cli真的是方便太多了，v-cli中自带webpack，利用它可以快速的创建项目和打包。

1.v-cli安装

在命令行中输入npm install -g @vue/cli 即可
之后我们开业通过vue --version查看版本是否正确。

2.创建项目

我在vscode中创建了一个文件夹v-cli
在终端中运行

vue create .

表示创建到当前目录下，当然也可以 vue create 文件夹名 创建到其他文件夹下
之后会有一些选项，我们第一个选项选择Y，其他默认就好

也可以使用v-ui来搭建

完成搭建的项目，可以看的出来他是基于webpack的，src中存放我们写好的组件
public中是HTML文件和资源文件

3.验证密码的组件

src下有两个文件夹和APP.vue和main.js两个文件
main.js是入口文件，而APP.vue则是根组件。
文件夹components用来创建组件，assets用来存放资源文件。
我在components中新建了一个first.vue的文件用来做组件，
标准的组件有三个部分组成

//用来声明组件模板
<template>
</template>
//用来声明组件的名字，方法，数据等
<script>
export default { 
   }
</script>
//用来给组件加样式
<script>
</script>

下面是我写的组件



我没有写样式

写好代码之后，找到APP.vue文件

添加到根组件里面

4.运行

在根目录下，即我建的v-cli文件夹下运行终端
输入npm run serve
最后它会给我们一个地址
我们在浏览器中输入地址就会打开网页

然后我们验证一下是否可以验证密码
我们在组件中存放了两组数据

可以发现可以验证。

总结：现在相当于入门vue了，对vue这个框架也是越来越喜欢了，它真的是太方便了。