Vue|Vue-cli 脚手架一前端|npm|vue.js

【Vue|Vue-cli 脚手架一】目录
1. 介绍
1.1 说明
1.2 安装
1.3 分析vue 脚手架
1.3.1 子文件
1.3.2 src 文件夹
1.3.3 public 文件夹
1.4 render 函数
1.5 脚手架的默认配置
1.6 ref 属性
1.7 props 父传子参数
1.8 mixin 混入
1.8 插件
1.9 scoped 样式
2. ToList案例
2.1 组件化编码流程（通用）
2.1.1 静态组件
2.1.2 初始化案例
2.1.3 交互
2.2 案例总结

1. 介绍 1.1 说明

vue 脚手架是标准化开发工具（平台开发）
vue-cli （command line interface）的缩写
vue-cli 最新版本是5.0，vue 最新版本是3.0
目前我们使用的是 vue 2.0搭配vue-cli 5.0 来学习

1.2 安装在电脑左下角的搜索框输入cmd，进入命令行
一、防止下载慢可以配置npm淘宝镜像：

npm config set registry https://registry.npm.taobao.org

二、全局安装 @vue/cli

npm install -g @vue/cli

三、切换创建项目的目录

vue create xxx

四、选择default（vue2.0）：

文章图片

如下图：表示安装成功

文章图片
然后分别运行上面最底的两行命令（第一句命名每个人的不一样，命名不一样哦）
五、cd xxx
六、启动项目： npm run serve
出现下面页面

文章图片

Local：在浏览器上打开是可以访问的
network：地址是其他人可以访问的

我们复制local地址去浏览器打开可以看到如下页面：

文章图片

补充：

如果用到es6语法需要用babel
检查语法用eslint

1.3 分析vue 脚手架 1.3.1 子文件

.gitignore文件: 作用是可以忽略原来制定的规则，也可以根据自己的需要制定自己的规则。
babel.config.js: Babel 是一个广泛使用的转码器，将 ES6 代码转为 ES5 代码
package.json package-loak.json: 是对项目或者模块包的描述,里面包含许多元信息。记录了项目名称、版本、作者，当前项目依赖的第三方模块等
README.md: 对项目进行描述

1.3.2 src 文件夹
1. main.js
使用npm run serve 后直接运行（相对于入口函数）
按ctrl+~键打开vscode 终端

// 整个项目的入口文件 // 引入vue框架 import Vue from 'vue' // 引入APP组件，是父组件 import App from './App.vue' // 关闭vue的生产提示 Vue.config.productionTip = false // 创建vue实例对象vm new Vue({ // 功能是将App组件放入app容器中 render: h => h(App), }).$mount('#app') // 相当于 el:'#app'

2. App.vue：父组件
3. assets文件夹：静态资源文件，放公共的图片，视频等
4. components文件夹：所有组件存放的地方，除了父组件App.vue,组件名要用驼峰命名法
1.3.3 public 文件夹
1. index.html:

- 锐客网

2. favicon.icon: 字体图标
组件name 要用双驼峰命名法（StudentName）或者student-name 法！！！！
1.4 render 函数

main.js创建vm 实例时使用render 函数
render是精简版的vue，省内存
render: h => h(App) 在创建实例时写

1. vue.js与vue.runtime.js的区别
vue.js 是完整版的，包含核心功能和模板解析器
vue.runtime: 是运行版的，没有模板解析器
2. 因为后者没有模板解析器，所以不能解析template 配置项，需要用render 函数接收createElement函数具体内容
只有在main.js 文件的创建vm时使用render 函数，其他的不用
1.5 脚手架的默认配置默认不能改的文件：

index.html
favicon.ico 名字固定不能改（可以换图片）
src 文件夹：
main.js

其他文件可以改：在官网，参考配置左边的都是可以改的，
修改方法：
创建vue.config.js （要与package.json同级目录下）（vue-cli 5.0以上的安装时就有这个文件）
vue.config.js：脚手架与webpack 配置合并
修改完文件一定要关闭重启 npm run serve
语法检查：ESlint、jslint
关闭语法检查：lintOnSave:false
1.6 ref 属性

被用来给元素或者子组件注册引用信息（id的代替者）
应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）

使用方式：

打标识：或者
获取：this.$refs.xxx

1.7 props 父传子参数功能：让组件接收外部传过来的数据
传递数据：
接收数据三种方式：
1.（只接收）：props['name'] (数组型）
2.（限制类型）：props:{ name:Number } （对象型）
3.（限制类型、限制必要性、指定默认值）：

props:{ name:{ type:String, required:true, default:'lisa' } }

注意：

props是只读的，是不允许修改的,vue底层对检测对props的修改，修改了会发生警告，
如果需求要修改，则要复制props的内容到data中，然后去在methods修改data的数据。
prop优先级高于 data

1.8 mixin 混入

功能：把多个组件共同的配置提取成一个混入对象
文件创建：在src的文件夹下创建mixin文件

使用方式：
第一步定义混合：

export const mixin={ data(){}, methods:{} }

第二步使用混入：
记得要先用import引入文件
1.全局混入：Vue.mixin(xxx)
2. 局部混入：mixins:['xxx']

如果组件有的，mixin也有，则data、method以组件的为主，mounted（生命周期钩子函数）两者都有（mixin在前）

1.8 插件功能：用于增强Vue
本质：包含install方法的对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
定义插件：
插件文件一般命名plugins.js

```js 对象.install = function (Vue, options) { // 1. 添加全局过滤器 Vue.filter(....)// 2. 添加全局指令 Vue.directive(....)// 3. 配置全局混入(合) Vue.mixin(....)// 4. 添加实例方法 Vue.prototype.$myMethod = function () {...} Vue.prototype.$myProperty = xxxx }

使用插件：
在main.js使用：Vue.use()
1.9 scoped 样式

作用：样式在局部生效，防止命名冲突
写法：

补充：
import 引入文件是后来者居上原则，样式相同后面会覆盖前面的

div { background-color: pink; }

意思是用less语言写的样式，我们需要在终端安装less插件,代码如下

npm i less
npm i less-loader@7

如果style 标签不写lang，默认是css样式
2. ToList案例

文章图片

类似手机的代办事件
2.1 组件化编码流程（通用） 1. 实现静态组件：抽取组件，使用组件实现静态页面效果
2. 展示组件动态数据：

数据类型、名称
数据保存的组件

3. 交互-绑定事件，事件监听
2.1.1 静态组件
案例可以拆分为3个组件 Heater、List、Footer（组件名要语义化）
List组件里面有Item子组件
静态组件实现结构和样式，不用动态
组件名一定要两个单词组合的名字用大驼峰命名法
先拆结构，再拆样式
2.1.2 初始化案例
展示动态数据
数据类型:[{}]，即数据里面放对象
数据保存组件：mylist（谁用给谁）

让标签动态有属性 checked=todo.finish

2.1.3 交互
1. 添加
用户输入数据并展示出来
1.event事件，event.target.value
2. v-model
生成唯一id的方法uuid算法、nanoid
在终端安装nanoid库：npm i nanoid
它的暴露方式是分别暴露
引入时要使用 import {nanoid} from ‘nanoid’
子向父传参
父传子一个函数，子调用函数
head 传参数到list ：head-app-list
2. 勾选
1. click 点击事件
2. change 改变事件
补充：handleChecked()：是一个函数，用来处理触发事件，同时实现对应的效果，如改变子的checkbox的状态。
3. 删除
用filter 过滤器过滤然后再重新赋值
4. 底部统计
补充：es6 reduce方法

arr.reduce(function(sum,num,index,arr){ ... },init)

arr 表示原数组
sum表示上一次调用时的返回值，或者初始值init
num表示当前正在处理的数组元素
index 表示当前正在处理的数组元素的索引，若提供init值，则索引为0，否则索引为1
init表示初始值
其实常用的参数只有两个:sum 和 num

2.2 案例总结

组件化编码流程：
(1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。
(2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：
1).一个组件在用：放在组件自身即可。
2). 一些组件在用：放在他们共同的父组件上（状态提升）。
(3).实现交互：从绑定事件开始。
props适用于：
(1).父组件 ==> 子组件通信
(2).子组件 ==> 父组件通信（要求父先给子一个函数）
使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！
props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。