Vue脚手架入门与高级配置：从初始化到组件间通信-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45738592/article/details/121467607

第 3 章：使用 Vue 脚手架

3.1 初始化脚手架

3.1.1 说明

1. Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）。
2. 最新的版本是 4.x。
3. 文档: https://cli.vuejs.org/zh/

3.1.2 具体步骤

第一步（仅第一次执行）：全局安装@vue/cli。
        npm install -g @vue/cli (4.x)安装失败尝试cnpm install -g @vue/cli
第二步：切换到你要创建项目的目录，然后使用命令创建项目
        vue create xxxx
第三步：启动项目
        npm run serve
备注：
1. 如出现下载缓慢请配置 npm 淘宝镜像：npm config set registry
        https://registry.npm.taobao.org
2. Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置，
        请执行：vue inspect > output.js 生成一个output.js包含vue脚手架默认配置
3.打开vscode终端ctrl+~

3.1.3 模板项目的结构

render函数

main.js中脚手架使用精简版的vue，没有模板解析器，所以使用render渲染模板 render:h=>h(App)

关于不同版本的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 inspect > output.js可以查看到Vue脚手架的默认配置。

创建一个vue.config.js文件(与package.json同级)

一个指定其 entry 的字符串。
module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></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'
  }
}

关闭语法检查

一个指定其 entry 的字符串。
module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
    }
  },
  lintOnSave:false  //关闭语法检查 
}

3.2 ref 与 props

ref属性

被用来给元素或子组件注册引用信息（id的替代者）

应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）

使用方式：

打标识：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>

获取：this.$refs.xxx 获取到真实DOM元素或组件实例对象

props配置项
功能：让组件接收外部传过来的数据

传递数据：<Demo name="xxx"/>
xxx都得加双引号但是年龄这类型的数字可以这样做 :age='18+1' =>可以得到19
接收数据：
第一种方式（只接收）：props:['name']

第二种方式（限制类型）：props:{name:String}
第三种方式（限制类型、限制必要性、指定默认值）：
props:{
	name:{
	type:String, //类型
	required:true, //必要性
	default:'老王' //默认值,一般不与必须值一起写
	}
}
备注: props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。
data(){
    return{
        msg,
        myAge:this.age
    }
}
methods:{
    updataAge(){
        this.myAge++
    }
}

3.3 混入

功能：可以把多个组件共用的配置提取成一个混入对象
使用方式：

第一步定义混合：(在mixin.js中)
export const hunhe = {
	data(){
        return{ x:100,y:200}
    },
    methods: {
		showName(){
			alert(this.name)
		}
	},
	mounted() {
		console.log('你好啊！')
	}
}
第二步使用混入：

全局混入：Vue.mixin(xxx) 局部混入：mixins:['xxx']
//在main.js使用混入，整个应用中所有vc、vm都可以使用
import {hunhe} from './mixin'

Vue.mixin(hunhe)
//在组件中引入一个hunhe
import {hunhe} from '../mixin'

mixins:[hunhe]
注意事项:如果自身组件和混入都含有某一数据则以自身为主,不使用混入的数据；但是对于生命周期钩子函数,二者都会使用且混入大于自身组件的

3.4 插件

1. Vue 插件是一个包含 install 方法的对象
2. 通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等

功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

定义插件：
在src下创建plugins.js

对象.install = function (Vue, options) {
    // 1. 添加全局过滤器
    Vue.filter(....)

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

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

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

export default {
	install(Vue,x,y,z){
		console.log(x,y,z)
    
        // 1. 添加全局过滤器
        Vue.filter(....)

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

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

		//给Vue原型上添加一个方法（vm和vc就都能用了）
		Vue.prototype.hello = ()=>{alert('你好啊')}
	}
}

引入插件：import plugins from './plugins' 使用插件：Vue.use(plugins)

scoped样式

作用：让样式在局部生效，防止冲突。

写法：<style scoped>

写法：<style lang="less" scoped> 样式使用的是less

Vue 笔记 4

第 3 章：使用 Vue 脚手架

3.1 初始化脚手架

3.1.1 说明

3.1.2 具体步骤

3.1.3 模板项目的结构

3.2 ref 与 props

3.3 混入

3.4 插件

scoped样式