Web开发day11：Vue chapter 2-1

目录

一、配置脚手架

（1）安装node.js

（2）配置镜像

（3）安装脚手架

（4）查看vue-cli版本（安装完脚手架后重开终端）

二、创建项目

三、分析脚手架结构

四、render函数

五、默认配置

六、ref属性：被用来给元素或子组件注册引用信息（id的替代者）

七、props配置：让组件接收外部传过来的数据

八、mixin混合：把多个组件共用的配置提取成一个混入对象

九、插件：用于增强Vue

十、scoped样式：让样式在局部生效，防止冲突

十一、TodoList案例

---

进度来源：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

网址：001_尚硅谷Vue技术_课程简介_哔哩哔哩_bilibili

一、配置脚手架

（1）安装node.js

• Windows：直接安装node.js即可，node.js默认配置npm，官网
• macOS：先安装HomeBrew，随后

brew install node

使用以下命令测试node版本：

npm --version
npm -V

（2）配置镜像

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

（3）安装脚手架

npm install -g @vue/cli

（4）查看vue-cli版本（安装完脚手架后重开终端）

vue --version
vue -V

二、创建项目

vue create vue_test

选择 Default ([Vue 2] babel, eslint)

cd vue_test

npm run serve

打开 http://localhost:8080/

三、分析脚手架结构

---- vue_test

    ---- .gitignore：git忽略文件

    ---- babel.config.js：babel配置文件，ES6转ES5

    ---- package.json：包说明书，包括一些命令、依赖等

    ---- package-lock.json：包版本控制文件，控制包的下载地址、版本

    ---- README.md：说明

    ---- vue.config.js：自定义默认配置

    ---- src

          ---- main.js：npm run serve命令后执行的第一个文件

          ---- App.vue：vm手下老大，和vm对话，和小组件对话

          ---- assets：静态资源

          ---- components：小组件

    ---- public

          ---- favicon.ico：图标

          ---- index.html：单页面html文件

├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件
├── vue.config.js：自定义默认配置

四、render函数

/* 
	该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false

/* 
关于不同版本的Vue：

	1.vue.js与vue.runtime.xxx.js的区别：
		(1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
		(2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。

	2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用
		render函数接收到的createElement函数去指定具体内容。
*/

//创建Vue实例对象---vm
new Vue({
	el:'#app',
	//render函数完成了这个功能：将App组件放入容器中

	// 简写1
    render: h => h(App),

	// 简写2
	// render:q=> q('h1','你好啊')

	// 完整写法
	// render(createElement){
	// 	return createElement('h1', '你好啊')
	// }

	// template:`
你好啊
`,
	// components:{App},
})

五、默认配置

！！红框不要改名字，绿框可以改名字

使用可以查看到Vue脚手架的默认配置：

vue inspect > output.js

使用vue.config.js可以对脚手架进行个性化定制，以下文件为vue.config.js，详情见：Vue CLI

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,

  // 停止eslint校验，比如文件命名规则
  lintOnSave: false,

  // 配置入口文件等
  // pages: {
  //   index: {
  //     // page 的入口
  //     entry: 'src/index/main.js',
  //     // 模板来源
  //     template: 'public/index.html',
  //     // 在 dist/index.html 的输出
  //     filename: 'index.html',
  //     // 当使用 title 选项时，
  //     // template 中的 title 标签需要是 
  //     title: 'Index Page',
  //     // 在这个页面中包含的块，默认情况下会包含
  //     // 提取出来的通用 chunk 和 vendor chunk。
  //     chunks: ['chunk-vendors', 'chunk-common', 'index']
  //   },
  //   // 当使用只有入口的字符串格式时，
  //   // 模板会被推导为 `public/subpage.html`
  //   // 并且如果找不到的话，就回退到 `public/index.html`。
  //   // 输出文件名会被推导为 `subpage.html`。
  //   subpage: 'src/subpage/main.js'
  // }
})

六、ref属性：被用来给元素或子组件注册引用信息（id的替代者）

• App.vue

七、props配置：让组件接收外部传过来的数据

• App.vue

• Student.vue

八、mixin混合：把多个组件共用的配置提取成一个混入对象

• mixin.js

export const hunhe = {
	methods: {
		showName(){
			alert(this.name)
		}
	},
	mounted() {
		console.log('你好啊！')
	},
}
export const hunhe2 = {
	data() {
		return {
			x:100,
			y:200
		}
	},
}

• 全局混合：main.js中使用，语法为：

import {hunhe, hunhe2} from './mixin'
Vue.mixin(hunhe)
Vue.mixin(hunhe2)

• 局部混合：各个组件中使用，语法为：

import {hunhe, hunhe2} from '../mixin.js'
export default {
    data: ...,
    methods: ...,
    mixins: [hunhe, hunhe2]
}

九、插件：用于增强Vue

• 定义插件 plugins.js

export default {
    install(Vue, options){
        // 1. 添加全局过滤器
        Vue.filter(....)

        // 2. 添加全局指令
        Vue.directive(....)

        // 3. 配置全局混入(合)
        Vue.mixin(....)

        // 4. 添加实例方法
        Vue.prototype.$myMethod = function () {...}
        Vue.prototype.$myProperty = xxxx
    }
}

• main.js中使用插件

// 引入插件
import plugins from './plugins'
// 应用（使用）插件
Vue.use(plugins,1,2,3)

十、scoped样式：让样式在局部生效，防止冲突

十一、TodoList案例

• App.vue

• MyHeader.vue

• MyList.vue

• MyItem.vue

• MyFooter.vue

TodoList案例总结：

1. 组件化编码流程：

   (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

   (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

        1).一个组件在用：放在组件自身即可。

        2). 一些组件在用：放在他们共同的父组件上（状态提升）。

   (3).实现交互：从绑定事件开始。

2. props适用于：

   (1).父组件 ==> 子组件 通信

   (2).子组件 ==> 父组件 通信（要求父先给子一个函数）

3. 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！

4. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。