vue2的使用和vue-cli脚手架的搭建（上）

工程化，也可以称之为脚手架环境。

1、什么是组件

组件 （Component）是 Vue.js 最强大的功能之一，组件是一个自定义HTML元素（标签）或称为一个模块，包括所需的模板（HTML）、逻辑（JavaScript）和样式（CSS）。

组件化开发的特点：

• 标准

• 分治

• 重用

• 组合

组件也是有全局（component）与局部（components）之分。

2、单文件组件 single file component SFC

在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。这种方式在很多中小规模的项目中运作的很好，在这些项目里 JS 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由JS驱动的时候，下面这些缺点将变得非常明显：

• 所有的组件都放同一个html文件中

• 没有构建步骤(build操作)，不能使用npm来管理项目

• 缺乏语法高亮和提示

• 没有针对单个组件的css样式支持

针对于上述的问题，vue框架发布了vue-cli项目生成工具，Vue-cli是一个基于 Vue.js 进行快速开发的完整系统， 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。

单文件组件的要求：

• 后缀必须是“.vue”

• 需要使用三个标签将整个文件分成3部分

  • template标签：包裹的是html部分（视图部分）【必须要有的】

  • script标签：包裹的是JavaScript部分（逻辑部分）【必须要有的】

    • css-in-js：在JavaScript中写样式

  • style标签：包裹的css/scss/less等样式部分（样式部分）【可以没有】

    • 样式存在范围的问题的

      • 有“scoped”属性则表示该组件的样式代码只在当前组件生效

      • 如果没有“scoped”属性则表示该组件的样式会影响自己及后代，一般在工程化开发的模式中，只有根组件“App.vue”不写“scoped”属性（全局样式）

• 其他的语法与之前的一致

• 单文件组件只是工程化中的一个文件，无法单独运行，必须在项目中运行

3、工具安装

网址：http://npmjs.com

## 安装
# -g：全局安装
npm i -g @vue/cli

## 安装成功后，检查
vue --version
vue -V
#  Vue和VueCLI是两回事

## 卸载（了解）
npm uninstall -g @vue/cli

如果需要安装其他版本，可以使用npm install -g @vue/cli@版本号的方式进行指定版本。

如果最新版安装不成功，可以尝试以下几种方式去解决：

• 断网，使用热点共享流量去执行安装命令

• 安装其他版本

• 切换一下npm镜像源，切换成taobao

• 卸载nodejs重安装

• 重装系统/换电脑

vue/cli ≠ vue，切勿将版本搞混

4、创建项目

1.在创建的文件夹中cmd进入终端，检查vue -V  使用的vue版本

确保使用的是这个新版本

2.vue  create  文件名

3.选择模板，如果有已经存在的可以选择，（根据需求）
4.选择预设功能（根据自身项目需要选择）

最下面的两个是用来测试的

linter是规范代码格式的，在公司里很多会使用到，如果出现了声明变量但是没有使用，就会进行报错

5选择Vue版本

6.选择css预编译

7.是否独立配项（一般选择独立配项）

8.是否保存本次操作预设（如果预设了下次创建的时候就有模板了）

• 项目创建成功

•