在使用vue的时候我们需要先下载对应插件Vue-cli,有两种方式可以在控制台或者终端安装npm install -g @vue/cli 或者 yarn global add @vue/cli 安装好以后我们就可以检查型号
此时我们就安装成功了需要的插件接下来我们可以在终端里创建项目了。下面我们就不在截图,直接用文字表述了,可以直接按照下面的步骤直接在终端输入。(终端直接右击选择在终端打开会比较方便哦)
- vue create . ()注意后面是有点的)
- 按向下的箭头选择 Manually select features
- 一般情况下可以选择(用空格控制选择与否) Choose Vue version , Babel , CSS Pre-processors , Linter / Formatter
- 2.x
- Sass/SCSS (with node-sass)
- ESLint + Standard config
- Lint and fix on commit
- In dedicated config files 选择y
- 最后一步保存一个预设的名字,然后回车安装
此时会产生很多的文件,我们一般在src文件夹里编程,其他这里就不过多介绍,需要的可以自行百度 ,
如图所示,在src文件夹里会有两个常用的,components文件夹和App.vue文件,在components文件夹里我们可以写子组件,App.vue文件会直接与index.html文件中的div的id为app的节点相连接,在引用时候会直接把模板内容替换掉该div。
下面就是关于父子组件连接的一些操作,首先要新建一个子组件文件
创建的组件分为三部分如图(每个组件都是这样的三部分),
为了方便学习,我们直接把代码放出来,直接看着代码学习。
子组件和父组件两个区域,
父组件需要引入子组件,然后就有两种方式注册,一种是全局注册,如上图左侧被注释的1和2 ,还有一种是局部注册,如上图components:{one}这种形式,
子组件就是需要接受父组件创传过来的数据了,如上图右侧用props的方式接收,
最后在父组件调用子组件就可以实现子父组件之间的通讯了。。。