Vue2+Vue3（脚手架）

YBN娜

已于 2024-01-20 14:00:34 修改

阅读量1.6k

点赞数 33

分类专栏： # vue 文章标签： vue.js javascript 前端 html css

于 2024-01-17 13:08:31 首次发布

本文链接：https://blog.csdn.net/qq_47296476/article/details/134630566

版权

本文详细介绍了Vue2和Vue3的脚手架使用，包括初始化、配置、文件结构、页面文件、入口文件、不同版本的Vue特性，以及Vue的ref属性、props配置、mixin混入、plugins插件、scoped样式、TodoList案例、浏览器本地存储、组件的自定义事件、全局事件总线和消息订阅发布等内容，深入讲解了Vue开发中的关键知识点和实战技巧。

摘要由CSDN通过智能技术生成

1.脚手架

1.1.初始化脚手架

1.1.1 说明：

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

1.1.2 具体步骤：

第一步（仅第一次执行）：全局安装@vue/cli。 npm install -g @vue/cli
第二步：切换到你要创建项目的目录，然后使用命令创建项目 vue create xxxx
第三步：启动项目 npm run serve

备注：

如出现下载缓慢请配置 npm 淘宝镜像：

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

Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置，请执行：vue inspect > output.js

1.1.3文档介绍：

1.1.4脚手架文件结构:

├── 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：包版本控制文件

1.1.5页面文件（index.html）

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
		<!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
		<!-- 配置页签图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
		<!-- 引入第三方样式 -->
		<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
		<!-- 配置网页标题 -->
    <title>硅谷系统</title>
  </head>
  <body>
		<!-- 当浏览器不支持js时noscript中的元素就会被渲染，支持时不会显示 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.（该浏览器不支持js）</strong>
    </noscript>
		<!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

1.1.6入口文件（main.js）：

/* 
	该文件是整个项目的入口文件
*/
//引入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组件放入容器中
  render: h => h(App),
	// render:q=> q('h1','你好啊')

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

ps:报错1：

1.Vue脚手架报错：

Component name “Student“ should always be multi-word vue/multi-word-component-names

报错分析：
根据提示信息可知是组件名出了问题，报错信息翻译过来大概就是组件名"Student"应该总是使用多个单词拼接横线组成的。

但是组件名也是可以使用单个单词的,只是官方文档上面的风格建议我们使用大驼峰或使用“-”衔接的方式而已。

通过后续学习了解到,这其实是语法检查的时候把不规范的代码(即命名不规范)当成了错误。

修改方案：

修改组件名，使其符合命名规范。例如：StudentName或者student-name。

修改配置项，关闭语法检查：

（1）在项目的根目录找到(没有就自行创建)vue.config.js文件

（2）在文件中添加如下内容:
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false /*关闭语法检查*/
})

2.render函数：

vue:核心+模板解析器

理解render函数的作用：

1.1.7关于不同版本的Vue

vue.js与vue.runtime.xxx.js的区别：
1. vue.js是完整版的Vue，包含：核心功能 + 模板解析器。
2. vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
2. 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容。

1.1.7vue.config.js配置文件

1. 使用vue inspect > output.js可以查看到Vue脚手架的默认配置。(只是查看，不能修改)
2. 使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

报错加上const a={}，或者暴漏出去export defult{}

红色框框表示不能修改的，粉色的可修改：

1.1.8修改默认配置：

1.配置原理：

2. 修改配置：

关闭语法检查：

2.ref属性：

1. 被用来给元素或子组件注册引用信息（id的替代者）
2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
3. 使用方式：
1. 打标识：```<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx"></School>```
2. 获取：```this.$refs.xxx```

3.prpos配置：

1. 功能：让组件接收外部传过来的数据

2. 传递数据：```<Demo name="xxx"/>```

3. 接收数据：

1第一种方式（只接收）：```props:['name'] ```

第二种方式（限制类型）：```props:{name:String}```

3第三种方式（限制类型、限制必要性、指定默认值）：
```js
props:{
name:{
type:String, //类型
required:true, //必要性
default:'老王' //默认值
}
}
```
> 备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制prop

4.mixin混入（混合）：

两个组件共享一个配置，并且配置是一样的。（mixin本质上是可重复使用的代码片段，通过混合到Vue组件中，来分发 Vue 组件中的可复用功能。）

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

第一步定义混合：
{
data(){....}, 

methods:{....}
....
}
第二步使用混入：

全局混入：Vue.mixin(xxx) 局部混入：mixins:['xxx']

5.plugins插件

功能：用于增强Vue

本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
定义插件：
对象.install = function (Vue, options) {
     // 1. 添加全局过滤器
     Vue.filter(....)
 
     // 2. 添加全局指令
     Vue.directive(....)
 
     // 3. 配置全局混入(合)
     Vue.mixin(....)
 
     // 4. 添加实例方法
     Vue.prototype.$myMethod = function () {...}
     Vue.prototype.$myProperty = xxxx
 }
使用插件：Vue.use()

5.1使用举例：

5.2扩展资料：

1.插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

添加全局方法或者 property。如：vue-custom-element
添加全局资源：指令/过滤器/过渡等。如 vue-touch
通过全局混入来添加一些组件选项。如 vue-router
添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。

一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

2.使用插件Vue.use()：

通过全局方法 Vue.use()使用插件。它需要在你调用 new Vue() 启动应用之前完成

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

new Vue({
  // ...组件选项
})

也可以传入一个可选的选项对象：

Vue.use(MyPlugin, { someOption: true })

Vue.use 会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。

Vue.js 官方提供的一些插件 (例如vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.u

最低0.47元/天解锁文章

YBN娜

关注

33
点赞
踩
36

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录