Vue框架学习（四）

工程化开发

Vue CLI是Vue官方提供的一个全局命令工具，可以帮助我们快速创建一个开发Vue项目的标准化基础架子。

1、准备工作

在此之前先检查电脑里有没有安装node.js，在cmd里输入node -v，如果出现版本号，则有，没有的话，就去node.js官网上下载安装，安装步骤比较简单，一直下一步即可。

node -v

有node.js之后还需要安装一下yarn，同样在cmd里输入npm install -g yarn

npm install -g yarn

最后输入yarn -v 检查是否安装成功。

2、使用步骤

（1）全局安装：yarn global add @vue/cli 或者  npm i @vue/cli -g

yarn global add @vue/cli

npm i @vue/cli -g

（2）查看vue的版本

vue --version   或者 vue -V

（3）创建项目架子

在创建项目前，要先进入到项目创建的位置，比如你想创建在D盘的随便学学这个文件夹里，那就要先进入到这个文件夹里面，然后再输入vue create 项目名。

vue create demo-vue01

demo-vue01是项目名，不能用中文。

后面会出现一个选项，选vue2还是vue3，然后是使用yarn还是npm，看个人选择，我选的是vue2和yarn。

（4）启动项目

启动项目之前要先进入到项目目录里，上面给了我们提示，cd demo-vue01

然后使用yarn serve启动项目。

通过访问localhost:8080来访问我们项目的页面。

3、项目文件介绍

主要介绍index.html、components文件夹、App.vue、main.js

index.html：是主页面，网页进行展示的页面内容

components文件夹：组件目录，用来存放一些组件

App.vue：项目运行能看见的内容都在这里编写。分为三部分，template（有且只能有一个根元素）；script（js逻辑）；style（样式）

main.js：第一个执行的文件，先导入vue，导入App.vue，实例化Vue，将渲染到index.html容器里。

组件化开发

组件化：将页面拆分成一个个的组件，每个组件有着独立的结构、样式、行为。便于维护，利于服用。

普通组件注册使用

（1）局部组件

只能在注册的组件内使用。

在components文件夹下创建.vue文件；在使用的组件内导入并注册。

使用：当成html标签使用<组件名></组件名>

注意：使用大驼峰命名方法

（2）全局组件

在所有组件里都能使用

在components文件夹下创建.vue文件；在main.js内导入并注册。

使用：当成html标签使用<组件名></组件名>

注意：使用大驼峰命名方法