知名商城网站建设首页优化公司
1.Vue开发的两种方式
（1）核心包传统开发模式
基于html/css/js文件，直接引入，开发Vue。
（2）工程化开发模式（更常用的一种）：
主要是基于构建工具（例如,webpack）的环境中开发Vue，可以利用构建工具编写一些高级的语法。
但是问题是需要一些复杂的配置（配置并不简单；各个项目雷同的配置；缺乏统一标准）
=> 需要一个工具，生成标准的配置！
Vue Cli 的提出！
2.Vue CLI
（1）基本介绍：
是官方提供的一个全局命令工具。
可以帮助我们 快速创建一个开发Vue 项目的标准化基础架子。（集成了 =webpack配置，即一个目录）
（2）好处：
<1>开箱即用，零配置；<2>内置babel等工具；<3>标准化；
（3）创建步骤：
<1>全局安装（一次）：
yarn global add @vue/cli 或 npm i @vue/cli -g
<2>查看vue安装的版本
vue --version
<3>创建项目架子
vue create project-name (项目名-不能用中文)
（4）启动项目
进入目录，输入：
yarn serve 或者 npm run serve （serve这个名字不是固定的，可以找package.json中设置）
3.项目的目录介绍和运行流程
4.组件化开发和根组件
（1）组件化
一个页面可以拆分为一个个组件，每个组件有着自己独立的结构、样式、行为。
好处：便于维护，利于复用，能够提升开发效率。
组件分类：普通组件、根组件
（2）根组件
整个应用最上层的组件，包裹所有普通的小组件。
（3）组件的构成
每一个组件由三部分构成：
<1>template：结构，有且只能有一个根元素；
<2>script：js逻辑；
<3>style：样式（可支持 less，需要装包）
让组件支持less
<1>style标签，lang="less"，开启less功能；
<2>装包： yarn add less less-loader
使用scoped：解决全局样式的问题
默认情况下：写在组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题；
（1）全局样式：默认组件中的样式会作用到全局；
（2）局部样式：可以给组件加上scoped属性，可以让样式只作用于当前的组件；
原理：使得当前组件内的标签都被添加上哈希值，最终使得当前组件的元素才会有自定义的属性；
（4）组件的注册
使用组件的注册，使得整个Vue文件相对简单和条理；
<1>普通组件的注册-局部注册
<2>普通组件的注册-全局注册
注册的时候，组件名和组件对象是一样的，可省略组件对象
参考：
040-工程化开发和脚手架_哔哩哔哩_bilibili