Vue-cli（2.X）的简单入门（创建项目、 Vue工程改造、Vue组件）

Vue CLI简单概述

• Vue CLI是一个基于Vue.js进行快速开发的完整系统
• Vue CLI致力于将Vue生态中的工具基础标准化（如Webpack），它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样编程人员可以专注在撰写应用上，而不必花时间在处理配置上
• 同时，Vue CLI也为每个工具提供了调整配置的灵活性，无需eject

Vue-CLI的安装

执行以下命令进行安装

npm install -g @vue/cli

命令成功执行结束后显示如下：

使用以下命令进行查看Vue-Cli的版本

vue --version

VueCLI创建项目

2.X版本创建项目

• 执行以下命令

# 分别执行
npm install -g @vue/cli-init
# 注意 项目名称不能是大写
vue init webpack vue-entry

成功创建后显示如下：

• 进入工程，进行启动
  实际上就是执行上述显示的两条命令

# 进入到工程目录下
cd vue-entry
# 进行启动
npm run dev

执行后显示如下

我们进入给的链接,显示页面如下：

• 对项目进行编译，然后使用WebStorm打开
  
  使用WebStorm打开项目后，打包后的页面被放在dist文件夹下
  
  如果发现使用浏览器打开index.html文件后，页面空空如也，可能是路径的问题，将文件内容更改为相对路径即可
  
  用浏览器打开后页面显示如下：
  

3.x创建项目

• 3.x可以进行自定义选择vue cli版本创建项目
  创建项目命令如下：

# vue-three是项目名称
vue create vue-three

执行后会出现如下界面

选择了自定义后会出现如下界面

选择2.x版本后，出现如下界面，依次进行选择

选择完毕后就开始了欢快的创建工程过程，完成后会出现以下内容

• 根据上述命令进行启动项目

cd vue-three
# 启动命令与2.x版本稍有差异
npm run serve

启动完成后可以根据给的地址进行访问

• 访问
  
• 对比一下2.x创建项目所生成的项目文件结构和3.x创建项目所生成的项目文件结构

3.x项目文件结构

2.x项目文件结构

肉眼可见的3.x比2.x少了很多东西

Vue CLI工程和普通工程

不使用Vue脚手架时创建的普通工程

• 创建一个html文件
• 引用vue.js
• 编写Vue组件
  

Vue CLI工程

Vue 的普通工程里，我们是将组件和页面都写在一个文件内
但有了Vue CLI后，Vue脚手架帮助我们将组件整合成为了一个.vue文件

Vue工程改造

我们在上面使用vue命令创建了一个vue工程
在之后我们需要创建自己的vue工程时，可以复制整个工程 文件夹，然后进行一些更改作为我们自己的项目，而不必再一次使用命令进行繁琐的操作

复制后使用WebStorm（或其他用的顺手的开发工具）打开，然后对其中的一些文件进行修改

修改后的App.vue如下所示，启动工程后

访问localhost:8080

使用Vue脚手架的工程

• 主要的点就是在组件部分，Vue将组件整合为了一个.vue文件，当某处需要这个组件时，进行引用即可
• .vue文件包含了三个部分：template、script、style
  
• Vue普通工程与脚手架工程的对比
  

Vue组件

普通工程中注册Vue组件（局部 & 全局）

• 全局注册
  js里进行全局注册
  
  Vue实例进行绑定使用，全局注册组件有两种方式进行使用
  

方式1： div中使用

方式1结果如下：

方式2：直接在Vue实例中使用

方式2结果演示

• 局部注册
  局部注册是以对象的方式进行注册的
  
  在使用的时候略与全局注册有一一点点差别，需要在Vue实例中进行声明
  
  局部组件结果演示
  

Vue-CLI工程注册组件

组件（手动渲染）

• 创建组件
  组件目录
  

Login组件

Home组件

• App.vue组件中使用Home和Login组件
  
  ！这里说明一下手动渲染：我们虽然引用并且注册了两个组件，但是具体在
  中使用哪一个是需要手动去写的，使用Login组件就在

  中使用,使用home就在

  中使用,非常不方便，在后面的Vue路由将会解决这一问题。
  启动工程，查看效果