按下回车后后进入一些项目的配置，刚开始使用Vue的话，大多数配置用默认的就行了，但是对新手来说这个配置最好先选择No，因为如果选择Yes，它会用一种比较严格的模式来要求的你的代码编写的规范（即会有很多报错，比如某行代码前面只能有两个空格呀之类的都会报错）
创建好了之后，我们按照它的说明输入这两条命令
1.输入 回车 进入项目的目录
2.输入 回车 运行项目
项目开始编译，编译完了就会出现下面这个命令窗口
我们把它给我们的url复制到浏览器中
到这里项目就创建好了，然后把项目文件夹拉进编译器里，VS或者WebStrom或者HbuildX都可以，我拉进HX里面，看个人喜好。
打开项目文件夹，看里面的文件目录结构如下
index.html
index.html一般只定义一个空的根节点，在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充。
main.js
main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例。
App.vue
一个vue页面通常由模板(template)、js(script)、样式(style)三部分组成。
template
其中模板只能包含一个父节点，为的简写，是子路由视图，后面的路由页面都显示在此处。
script
vue通常用es6语法来写，用export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等。
style
样式通过style标签包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加scoped，
按照下图的操作，先运行一次项目
此时有个问题就是，每次编译完后都要我们手动复制url去到浏览器，再打开，有点麻烦。我们可以通过修改config文件夹下的index.js文件中的autoOpenBrowser参数为true来使得每次编译完成后会自动打开浏览器。
做一个留言板的功能，包括留言功能和显示留言功能
使用BootStrap库构建静态页面
分析上面的静态页面，可以发现，整个页面可以抽取出3个组件
在代码中抽取组件
所以，我们在src文件夹下的components文件夹下新建3个新的.vue文件，分别命名为Add,List,Item。
要先在index.html中引入Bootstrap库。
先不要看代码的其他的地方，只看标记的地方，这里是引入了两个组件Add和List组件。
然后Add组件有一个属性addComment，它的属性值addComment是定义在App.vue中的methods中的一个方法，其实就是把父组件的方法传递给子组件，让子组件可以调用。
List组件同理，父组件向List传递了一个Comment数组和一个deleteComment方法。
然后再看App.vue的script标签部分
上面这两行的代码就是导入组件
上面的代码则是将导入的组件映射为标签，所以我们才可以在中用和这两个标签。
Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。
一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在组件实例中访问这个值，就像访问 data 中的值一样。
所以上面的代码的意思就是，给Add组件注册一个addComment自定义属性，然后这个属性接收的值的类型是个Function，且这个属性为必填的。
重新看一遍Add.vue的代码，可以知道这个组件的执行流程是，用户输入用户名和留言内容，v-model自动把数据收集到data中的username和contents中，然后点击提交留言按钮时，组件会执行methods中的事件submitComment，然后submitComment会先判断username和contents的值是否合法，合法则通过this.addComment调用父组件传进来的方法，这个方法则会将参数comment添加到父组件中的Comments数组中去。最后把username和contens的值置空。
List组件比较简单，它里面包含着一个子组件Item，所以第一步是在List组件中引入Item组件，然后通过components参数把引入的Item组件映射为标签。
然后List组件的Props有两个，comments和deleteComment，其中comments是用来进行v-for循环的，里面存放的是要全部显示的留言的内容。deleteComment则是List作为中间组件传递给Item的方法，List自身用不到这个方法。由此可见，组件间的通信是要一层一层的传递的。
Item组件有3个Props，分别是comment、deleteComment、index。
comment和index是其父组件传给它的数据，comment是App组件data中的Comments数组中的一个元素，index则是这个元素在数组中的下标。
deleteComment则是App组件通过List组件传给Item组件的方法，用来从数组中删除元素的。
所以Item组件的执行方式是，点击删除按钮的时候，会执行组件的deleteItem方法，先通过ES6的对象解构复制获取到父组件传进来的deleteComment方法，然后再执行，就可以把App组件中的Comments数组中下标为index的元素删除了。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery