8、Vue之中的组件化开发

组件化开发的概念

在Vue的开发过程中我们不直接动手写html那样太过麻烦，而是通过VueCli搭建起一个项目的框架，在框架中进行开发，开发的过程中将一个又一个的vue文件当作一个又一个的组件。

包的安装

搭建项目框架之前，首先需要安装node js进行Vue的包的管理，类似于安装了python的pip。正常谷歌搜索安装稳定版本即可，安装成功后在命令行页面中输入 npm -v可以显示node的版本。

安装完成了之后运行 npm install -g vue/cli 即可安装Vue开发脚手架

组件的概念

组件是Vue中的一个概念，类似于python之中的一个.py文件，我们可以在Vue中通过复用组件来完成复杂的功能。

组件的构成

组件的后缀名为.vue
组件包含三个部分分别是

1. template 组件的模板结构
2. style 组件的样式
3. script 组件的javascript代码

Vue之中通过npm创建Vue工程

1. 通过命令行进去到你想要创建Vue工程的目录下，tips：visual studio code之中的命令行没用。
2. 使用vue create yourProjName 创建你的工程
3. manually select features ->不选liner 只选择 babel-> 3.x-> package.json->No
4. 创建好了之后 npm run serve就可以将服务运行起来，最终的效果是这样的一个效果
   
5. 在网页上就可以看到Vue了，想要做什么修改也可以在这个框架之中进行修改。