之前接触过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这个框架也是越来越喜欢了,它真的是太方便了。